TypeScript for Beginners: What You Should Know

TypeScript is a great programming language that was introduced to the public in 2012. This language is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object-oriented, with classes and interfaces, and statically typed like C# or Java. The popular JavaScript framework Angular 2.0 is written in TypeScript. Mastering TypeScript can help programmers write object-oriented programs and have them compiled to JavaScript, both on the server side and the client side.

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?
As was already mentioned, TypeScript is a kind of subtype of JavaScript, which helps developers simplify the original language so it is easier to implement it in projects. In the developer world, there are lots of doubts regarding TypeScript and the general sense that it brings to the code writing process. But my opinion here is that TypeScript knowledge is not something that will take a lot of your time while learning but something that will definitely give you lots of advantages, especially if you work with JavaScript.

Furthermore, TypeScript extends JavaScript and improves the developer experience. It enables developers to add type safety to their projects. TypeScript provides various other features, like interfaces, type aliases, abstract classes, function overloading, tuples, generics, etc.

Setting up typescript
The first and most obvious step is to know JavaScript:) Because typescript is based on this programming language, learning it is primarily dependent on your understanding of JavaScript.You don’t have to be a master of JavaScript, but without knowing some basics of this language, working with TypeScript is a challenging task.

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
Using the 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
This is probably one of the greatest things that typescript offers: ambients. This is a specific declaration, type, or module that tells the TypeScript compiler about actual source code (like variables or functions) existing elsewhere. If our TypeScript code needs to use a third-party library that was written in plain JavaScript libraries like jQuery, AngularJS, or Node.js, we can always write ambient declarations. The ambient declaration describes the types that would have been there and will be written in TypeScript.

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

Most of the types for popular JavaScript libraries exist in
DefinitelyTyped. However, if you have a JavaScript library whose types are missing from 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
The tsconfig.json file is where we define the TypeScript compiler options.

npx tsc --init --rootDir src --outDir build

The tsconfig.json file has many options. It’s good to know when to turn things on and off. TSC reads this file and uses these options to translate TypeScript into browser-readable JavaScript.

Step 6: Create a scr folder

src hosts the TypeScript files:

mkdir src
touch src/index.ts

Inside 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 tsconfig.json file in the current directory and apply the configuration against the TypeScript compiler to generate the compiled JavaScript code:

npx tsc

Now run the command below to execute the code:

node dist/index.js

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:

1. TypeScript takes longer to write than JavaScript because you have to specify types, so it may not be worth using for small projects;
2. 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.

Conclusion
Because TypeScript generates plain JavaScript code, you can use it with any browser. TypeScript is also an open source project that provides many object-oriented programming language features such as classes, interfaces, inheritance, overloading, and modules. Overall, TypeScript is a promising language that can undoubtedly assist you in neatly writing and organizing your JavaScript code base, making it more maintainable and extensible.