Typescript — The Basics

While doing my job search, I noticed that Typescript was required by many companies. I decided to look into this programming language and I am going to do a resume of what I have learned so far.

What is Typescript?

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript.

Why Typescript?

As developers, we are trying to keep our code as DRY as possible to make our code look easier and not type anymore code that we have to, but this is a situation where writing a little bit more code upfront will pay bid dividends as the project grows.

The biggest benefit is actually ‘tooling’ which we get in our IDE like VSCode. When we use typing notation or work with libraries that are strong typed, the code will be automatically documented in the IDE so we really have to refer back to the online documentation for the library that we use. In addition, the compiler can catch bugs in advance, which is a far more efficient way to refactor code.

Another cool benefit of Typescript is that there is no learning curve if you know Javascript. That’s because it is a superset of Javascript so any valid JS code is also valid in Typescript.

Installing Typescript

First thing to do is to install Typescript globally with npm.

npm i -g typescript

Doing this will gives us access to the ‘tsc’ command which will run the Typescript compiler.

Typescript version used

Typescript code on its own won’t be able to run anywhere (in the browser, node.js…) What is happening is that we use the Typescript compiler to convert that Typescript code to vanilla Javascript.

To get a better idea, I created a file called ‘index.ts’ and simply typed ‘console.log(‘Hello World’). Then in the command line I ran ‘tsc index.ts’. This creates an ‘index.js’ file which is our actual Javascript code that we can run in the browser. This new file contain a code that is identical to ‘index.ts’ file

Creating a TS code

By default Typescript will compile to ES3 which doesn’t have support for ‘async await’. The compiler is actually very sophisticated and there are lots of options that we can pass to it to customize its behavior.

First, we need to create a ‘tsconfig.json’ file which will automatically get picked up when we run ‘tsc’. In this new file, a few options need to be written:

{
"compilerOptions": {
   "target": "es3",
   "watch": true,
   "lib": ["dom", "es2017"]
  }
}

1. First line is the target and will the flavor of Javascript that the code will be compiled to.
2. The second line is watch that will recompile our code every time we save the file (that will save us from having to run that tsc command after every change).
3. The next option is LIB which allows us to automatically include typings for certain environments such as the DOM or ES 2017.

Third-party libraries

Install lodash with npm which creates a node modules folder with the source code for lodash and import it in index.ts

npm i lodash
npm i @types/lodash
//index.ts
import * from _ 'lodash'

Conclusion

Using Typescript is a very great way to prevent bug. Airbnb claims 38% of bugs could have been prevented by TypeScript.

Where TypeScript shines is with good IDE support, like Vscode, where we get visual feedback if we mistype something.

I only started working on Typescript and am looking forward to learning more about it.