Since I’ve only recently mastered my skills working with this programming language, I decided to share my experience and hopefully help those who are just at the beginning of their journey!
Why can using typescript be helpful?
Setting up typescript
When I was dealing with this programming language, I found dozens of different resources explaining the mechanics of writing the code, and also very helpful for me was the official documentation, which you can find here.
There are a few basic steps that will help you start working with TypeScript.
Step 1. Installing
In this step, you need to install Node.js on your computer and the
npm command manager.
It is also possible to use Visual Studio typescript plugins, but I personally prefer working with Node. Js
> npm install -g typescript
Once Node.js is installed, run node
-v to see if the installation was successful.
Step 2: Generate the Node.js file
npm init command, you will need to generate the Node.js
package.json file, which will introduce systematic questions about your project.
Step 3: Add TypeScript dependencies
Now, when we prepared our environment in Node.js, we needed to install dependencies for TypeScript using the following command:
npm install -g typescript
The command will install the TypeScript compiler on a system-wide basis. From that moment, any project you create on your computer can access TypeScript dependencies without having to reinstall the TypeScript package.
Step 4. Install typescript ambient declarations
The TypeScript ecosystem contains thousands of such ambient declarations files, which you can access through
DefinitelyTyped. DefinitelyTyped is a repository that contains declaration files contributed and maintained by the TypeScript community.
To install this declaration file, use this command:
npm install --save-dev @types/node
DefinitelyTyped, you can always write your own ambient modules for it. Defining types doesn’t necessarily have to be done for every line of code in the external library, only for the portions you are using.
Step 5: Create a typescript configuration file
tsconfig.json file is where we define the TypeScript compiler options.
npx tsc --init --rootDir src --outDir build
Step 6: Create a scr folder
src hosts the TypeScript files:
mkdir src touch src/index.ts
src, we also create an
index.ts file, and then we can start writing some TypeScript code.
While writing Typescript, it is advisable to have a Typescript compiler installed in your project’s local dependencies.
Step 7. Executing TypeScript
Now, run the
tsc command using
npx, the Node package executer.
tsc will read the
Now run the command below to execute the code:
Basically, that’s it; we’ve set up an environment and compiled our first TypeScript file, where we can now start writing our code.
Important things to know
When starting to work with TypeScript, you should take into account that:
- TypeScript must be compiled, which can take some time, particularly in larger projects.
These are two limitations that TypeScript has; it doesn’t mean that you should not implement it in larger projects, but you should be aware that it may slow down the code writing process. So if you have an urgent, huge project, think thoroughly about whether to use TypeScript for it or not.
In this post, I just briefly explained the basics of setting up TypeScript and its purpose, but to be able to build projects based on this programming language, you need to know a lot of theory, especially ones about classes, modules, variables, functions, interfaces, etc. As with any programming language, theory is the basis that allows developers to avoid mistakes (in most cases) and successfully create and run projects.
Top comments (15)
P.S. Loved the resource you've attached!
Great Article! Here are a few points I want to mention:
Personally I prefer doing configuration after running this init command
tsc --initand all the tweaks within
tsconfig.json. This is because not only is it convenient, but also can you manage your configuration in a single place
TypeScript could be a huddle for those who are not accustomed to statically typed language. But as your project grows, it's way faster to develop in TS rather than JS since you'll immediately see what each function's interface is once you see the code itself. Currently I use Python for my work, but sometimes it is so painful since some old and big projects in Python doesn't have any type systems(like AWS's boto3 or SQLAlchemy v1.4... so horrible).
thanks for adding that info!
I find the first noticeable benefit of Typescript is having auto-complete when writing code in VS Code. It's true that you get suggestions while using JS too, but it's more refined with TS.
The next major benefit is noticeable when refactoring a large project. Any typos fail immediately instead of silently at runtime.
It's true that there are refactoring tools to do global variable name replaces. However, that relies on a developer using the tools. If someone doesn't use them for whatever reason (e.g. new to programming/unfamiliar with the language and tools) and introduces a bug, it may go unnoticed.
However, the build will break during deployment with Typescript, meaning that it adds an additional safety net.
Thanks for pointing this out!
This an excellent introduction for newbies!
Thanks for sharing.I will surely start learning TypeScript
Glad to hear that!
Great article, Heather!
This is me trying to setup typescript every time:
That's was me exactly in the begging of my journey 😁
Some comments may only be visible to logged-in visitors. Sign in to view all comments.