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.
You can read more on the official website typescriptlang.org.
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
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.
Switch Gradually Over Time
Easy to Learn
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
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.
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
.tsx (for files containing React components).
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.