In this tutorial, we will get an overview of TypeScript, learn the benefits of using it, and how to get started with it.
What is TypeScript?
TypeScript is a popular open-source language created by Microsoft. TypeScript is a superset of JavaScript that adds type safety and static typing to the language. Because TypeScript compiles to JavaScript, it can be used everywhere from the browser, to Node, to Deno, and to any JavaScript-enabled environment.
JavaScript is an interpreted language so you can sometimes have bugs that are not detectable until you run your code. However, TypeScript is a statically-typed language, which means that it can catch errors at compile time, rather than at runtime. This means that you can use TypeScript to write code that is safer and easier to debug.
Why TypeScript?
Because of the aforementioned benefits, TypeScript is a popular language to use in modern development. Here are some of these benefits:
- Compile-time errors: TypeScript can catch errors at compile time, rather than at runtime, saving you time and effort.
- Strong typing: Because TypeScript is statically-typed, you will get an error if you pass a mismatched type to a function.
- Object-oriented improvements: TypeScript adds object-oriented features that don't exist natively in JavaScript.
- Tooling and ecosystem: TypeScript has great tooling and support, enhancing the developer experience.
- Organization: Thanks to namespaces, modules and improved OOP, TypeScript is a great language for organizing your code.
Installing TypeScript
To install TypeScript, you first need to install Node and NPM. If you need help with this, you can follow our how to install Node guide.
Once you have Node and NPM installed, you can install TypeScript with the following command:
npm install -g typescript
Alternatively, you can use Yarn to install TypeScript:
yarn global add typescript
We want to install it globally, so we can use it in any app we create.
Check to see if TypeScript is installed by running the following command:
tsc -v
If you see a version number in your terminal, you've installed TypeScript successfully.
Using TypeScript
Now that TypeScript is installed, we can start using it. Create a file called app.ts in your root directory. In here we can start writing some TypeScript.
Let's keep it simple and write a function that takes a number and returns the square of that number:
const square = (x: number): number => x * x;
To test that it is working, let's call the function and print the result:
const square = (x: number): number => x * x;
const result = square(5);
console.log(result);
Great, now that we've written our first TypeScript code, we can move on to compiling it.
Compiling TypeScript into JavaScript
To compile our TypeScript code, we can use the TypeScript compiler. To do so, use the tsc command and pass it the name of the file we want to compile.
tsc app.ts
After the file is compiled, you should see a app.js file in the root directory.
var square = function (x) { return x * x; };
var result = square(5);
console.log(result);
Since app.js is just a regular JavaScript file, we can run it in the browser or Node.
Let's run it in Node:
node app.js
You should see the output:
25
The TypeScript compiler has successfully taken our TypeScript in app.ts and compiled it into valid JavaScript in our app.js.
TypeScript Type Safety
As mentioned earlier, TypeScript is a strictly-typed language, which means that it can catch errors at compile time, rather than at runtime.
Let's look at our function one more time:
const square = (x: number): number => x * x;
Notice how we have to specify the type of the parameter x. This is because we are using TypeScript, and TypeScript requires that we specify the type of the parameter.
This is how TypeScript can help us catch errors at compile time.
We have also typed the return value of the function to be number as well. This helps the caller know that the function will return a number, instead of a string, or something else. In this way, TypeScript code is somewhat self-documenting.
Watch what happens if we try to accidentally pass a string instead of a number:
const square = (x: number): number => x * x;
const result = square("5");
console.log(result);
If you try to compile this TypeScript code, the compiler will throw an error:
app.ts:3:23 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
3 const result = square("5");
~~~
Found 1 error.
The TypeScript compiler will throw an error, letting you know that the parameter x is of type number, and that the argument "5" is not of type number.
Because TypeScript caught the issue at compile time, we can fix the issue by changing input to square to a number, saving us from a potential runtime error.
Conclusion
TypeScript is extremely useful for modern JavaScript development. We've learned how to use TypeScript to write code that is safer and easier to debug. We've also learned how to compile TypeScript code into JavaScript that can be run in browsers or on the server.
If you're interested in learning more, TypeScript has a playground where you can try out different TypeScript features. Also, reading the documentation is a great way to learn about TypeScript.
Hopefully, you've found this tutorial helpful and excited to learn more about TypeScript!
