The guide into why and how to start with TypeScript

This is purely based on my personal experience over the past two months when I started using TypeScript for the first time. At the end of the article, I will share also how to configure your project for TypeScript to get you started. You will see that the initial configuration is the only hard part about TypeScript.

Just to put things into perspective, I am not a big fan of JavaScript or TypeScript either. However, from time to time I need to make a web application. That’s when I dust off my React skills and get to work. On my latest project feltoken.ai (federated learning solution on a blockchain), I was building my dApp UI using React and JavaScript as usual. Then my friend Filip joined the project and he recommended trying TypeScript. Now the whole project is written in TypeScript and honestly, I think it was worth it!

TypeScript

TypeScript builds on top of JavaScript by adding syntax for types. During a build process, it is compiled into JavaScript. Hence there is no speed advantage over JavaScript, but it can run anywhere where JavaScript can. Therefore the main advantage of TypeScript is the error checking, better suggestions and overall improved integration with a code editor.

Strongly typed languages in general allows for better optimization during compilation over dynamically typed (e.g. JavaScript, Python). So it feels like a missed opportunity that TypeScript isn’t compiled to something faster. However, this allows maintaining JavaScript’s compatibility. Plus TypeScript provides special types as any which makes your variables behave as standard JavaScript variables.

You can read more on the official website typescriptlang.org.

Why?

Here are three plus one reason why we stick to TypeScript and you should consider it too.

Better Suggestions and Easier Collaboration

You already use autocompletion, suggestions, a preview of a function definition, so what’s this great benefit all about? TypeScript takes this even further. It checks that types of function arguments are compatible with the function definition. It also checks that function doesn’t call any unsupported methods on variables. I was quite surprised by the extent of what’s checked by TypeScript. For example, it forces you to check for corner cases like null or undefined variables (if specified by the type).

I find this especially helpful when working in a team. When using functions I find this especially helpful when working in a team. When using functions defined by your fellow developers, you know exactly what types are expected and what will be returned by the function and it can’t happen that some unexpected type or null value will break the rest of your code. To some extent, this replaces documentation as everybody must write types. Everybody can then take advantage of better suggestions and rely on types which will be returned by the code of others.

Trust me, working in a team with undocumented JavaScript code is something you don’t want to experience twice. TypeScript make this experience much more pleasant.

Switch Gradually Over Time

Honestly, this fact got me convinced. You don’t have to rewrite your whole codebase in one sitting. You can have a mix of TypeScript and JavaScript files and everything will work just fine. Then I just set a goal to rewrite at least one file with each commit. This resulted in full TypeScript code in just a few days.

Easy to Learn

I admit that I heard about a TypeScript before. However, I always thought about it as a different language. With my limited use of JavaScript, I just thought it was not worth learning another language. I couldn’t be more wrong. Honestly, if you have experience with any other static typed language and you understand JavaScript, then just go through a few examples and you will be good to go.

Sure some corner cases might stop you at the beginning, but that’s nothing that Stack Overflow couldn’t resolve. My biggest struggle was with loading a JSON config file and accessing its keys. What a surprise I had to check if the key exists in the JSON first and everything worked just fine.

Initial Setup is The Hardest Part. Copy It!

I find this issue with many libraries/languages/tools. In the beginning, you are learning something new. You still don’t really know how things work, but you are expected to set up all the config files that everything works together nicely. This can be frustrating. If I learned something over the years, it is that the best way is to just copy them. I always use configs from my past projects whenever I am starting something new.

Initial TypeScript Setup (for React)

In the end, I would like to share our setup, so that you can easily include it in your current or future projects. This is our setting for React application so you might need to change it depending on your project. All the following files should be located at the root of your project (same level as package.json…)

1. Add typescript to your package.json file (our full package.json). Below are only lines that you have to add to specific fields in your package.json (make sure to use the latest versions). After that, you will need to run npm install or yarn install in your project.

Some packages are written only in JavaScript, but oftentimes there exist extra type definitions for them. As you can see, these are usually named as @types/...

2. Add tsconfig.json file to the root of your project.

3. Add Eslint config file .eslintrc.json which helps with automatic formatting and makes your code much nicer. One thing you might want to change is the max length as 120 can be quite long. Over time you might need to add some extra rules, but you will figure that as you go.

4. Finally, you might want to ignore some files, so you don’t apply linting on everything. Just add .eslintignore with content as below. This also allows rewriting JS files over time.

You should also install TypeScript and ESLint extensions in your editor if possible (VS Code has both). And that’s all! Now you can use your react application as before with npm start and other commands. You can start adding a TypeScript files with .ts or .tsx (for files containing React components).

Conclusion

I am happy that I was finally pushed to learn TypeScript. So far I see mainly positives and I will use it for all my future projects. I would definitely recommend spending the day or two in order to learn it. Follow me for more developer insights throughout the development of my current project: FELToken.