DEV Community

Cover image for TypeScript for Beginners: What You Should Know
Heather Parker
Heather Parker

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Now run the command below to execute the code:

node dist/index.js
Enter fullscreen mode Exit fullscreen mode

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.

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.

Top comments (15)

idleman profile image
idleman • Edited

Worth to mention is that TypeScript create at least as many bugs as JavaScript so the benefits is rather small compared to JavaScript. Not a popular thing to say, but damn well true:

swordheath profile image
Heather Parker

I completely support this point of view, however I believe that it is quite personal, because for some developers TypeScript has enough advantages compared to JavaScript, while others prefer to use JavaScript only. As I mentioned in this post this is a huge topic for discussion, I thing this is worth writing the whole new post 😁

P.S. Loved the resource you've attached!

uponthesky profile image
UponTheSky • Edited

Great Article! Here are a few points I want to mention:

  • Personally I prefer doing configuration after running this init command tsc --init and 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 tsconfig.json.

  • 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).

swordheath profile image
Heather Parker

thanks for adding that info!

ant_f_dev profile image
Anthony Fung

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.

swordheath profile image
Heather Parker

Thanks for pointing this out!

jakeroid profile image
Ivan Karabadzhak

This an excellent introduction for newbies!

swordheath profile image
Heather Parker

Thanks, Ivan!

clericcoder profile image
Abdulsalaam Noibi

Thanks for sharing.I will surely start learning TypeScript

swordheath profile image
Heather Parker

Glad to hear that!

timlmit profile image


jareechang profile image
Jerry • Edited

Great article, Heather!

This is me trying to setup typescript every time:

Image description

swordheath profile image
Heather Parker

That's was me exactly in the begging of my journey 😁

bredpit31203601 profile image
Lee | AptosLaunch IDO 22nd Nov 22


Some comments may only be visible to logged-in visitors. Sign in to view all comments.