Search for a command to run...
A Frontend Developer passionate about building products and solutions using technologies revolving around the Javascript Ecosystem. I have experience working with the MERN Stack and also a big fan of the JAMStack methodology. Currently, I'm exploring Figma in my spare time and other design tools in order to create much simpler and easy to use interfaces for my users.
This is a lovely article, Yusuf. Enjoyed reading it.
Page speed and performance are some of the key factors that determine if a user will stay on a website or not. Any website that takes over ~2 seconds for its initial page load isn’t performant. Today's users do not have the patience or attention span...
Originally, Javascript was used as a tool to create beautiful animations and interactions on the web, they were there to make websites look attractive and eye catchy, and that was all. But then, Google Maps was introduced, and that period represented...
The use cases for widgets have risen over the past ten years within the web ecosystem as their importance has grown in different sectors ranging from e-commerce to fintech to health websites. Widgets have made it easy and seamless for users to perfor...
Nowadays, websites and applications can be accessed from different parts and regions of the world. So, it is very essential to make your website easily accessible to anyone regardless of their location. In this article, I’ll share the importance of i...
Ant Design Select component has a lot of properties that can be passed into the component in order to enjoy it to the fullest, but one property I wished it has is the prefix icon. Recently, I was tasked with building a product that involved a lot of ...
On this page
Typescript has been around for a while now, and I'm sure you must have heard developers around you talk about it. According to the latest StackOverflow survey, Typescript is the second most loved programming language after Rust. In this article, I would be introducing what Typescript is, its benefits in today's world, and how to set up your Typescript development environment.
In order to have a seamless experience while following this article, ensure you have the following catered for:
TypeScript is a programming language created and maintained by Microsoft. It is a strict syntactical superset of Javascript and adds optional static typing and true Object-Oriented Programming (OOP) capabilities to the language. If you're familiar with other programming languages like C# or Java, it is impossible to declare a variable without stating the datatype it would hold. So, Typescript enables us to replicate this feature in Javascript in order to reduce runtime errors or bugs which developers face while coding. It also increases developer productivity. Since TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs. Also, few people also consider Typescript as Javascript with superpowers😎.
Typescript can be installed on a local machine using either of the following commands:
npm install -g typescript
or
yarn global add typescript
This would install Typescript globally on our machine. Once the installation is completed, we now have access to the tsc command. The tsc command stands for Typescript Compiler which we would be using for most of our operations with Typescript. You can confirm if the installation was successful by using the command:
tsc -v
You should get a version number outputted after entering that command in your terminal.
Now, create a folder called ts-intro then create a file called app.ts within it. Typescript files are usually identified with a .ts extension. Paste the following code in our app.ts file:
console.log("Hello World");
Then run the Typescript compiler in order to compile our code to Javascript:
tsc app.ts
You should find a new file app.js created automatically in your project root. That's the javascript file which our Typescript code was compiled into.
Now, imagine we have more than one Typescript file within our project, running the tsc command for each one of them would be counter-productive, we need a more efficient method for compiling all our Typescript file. We can achieve that using the tsconfig.json file that would be created in our project root. Run the command below to do that:
tsc --init
A new file named tsconfig.json should be in your project root after running that command. This file is very similar to what our package.json file does in most projects. It contains the rules and configurations Typescript will be needing in order to work seamlessly on our machine.
Looking at our newly created tsconfig.json file, we would find a considerable amount of configurations which we need not worry ourselves about now. The only thing we might need to change is our target option. This tells us what version of javascript our Typescript code would be compiled into. The default selected option is ES5, we can change it to ES6 if we would like our javascript code to use the latest features of javascript or any other version we wish to use. Also, comments have been created alongside each property to tell us what they are for.
{
"compilerOptions": {
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"strict": true, /* Enable all strict type-checking options. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. */
"skipLibCheck": true, /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
}
}
So, create another file called main.ts and paste in the following code:
const user = {
firstName: "Brian",
lastName: "Smith",
role: "Doctor"
}
console.log(`Hello ${user.role} ${user.firstName} ${user.lastName}`)
Running our tsc command would compile all files ending with the Typescript extension in our project root. A new file called main.js would be created. If we inspect it, you'll notice we have javascript code that's in ES5 version.
"use strict";
var user = {
firstName: "Brian",
lastName: "Smith",
role: "Doctor"
};
console.log("Hello " + user.role + " " + user.firstName + " " + user.lastName);
Now, we can use the tsc command to compile any Typescript file we have in our project.
In this article, we learnt what Typescript is, the benefits of Typescript in today's world, and how to set it up in your development environment. This article is just an introduction to Typescript, there's still so much about Typescript we obviously can't discuss in a single post. I hope this article has convinced you why you might need Typescript in that next project you plan to work on. In my upcoming post, I would be showing you how you can convert a project originally built with Javascript to Typescript.