DEV Community

Cover image for TypeScript , A brief introduction.
HagarAbdelzaher
HagarAbdelzaher

Posted on

TypeScript , A brief introduction.

1-What is typescript?

"TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale." - https://www.typescriptlang.org/ -

10 years ago , Typescript was developed and maintained by Microsoft to improve the development experience of large-scale javascript applications.

Designed to be compatible with existing javascript libraries and frameworks such as React , Angular and Vue , which make it easy to adopt and integrate into your development workflow.

Typescript and frameworks
5000 companies reportedly use TypeScript in their tech stacks, including Slack, Tech Stack, and HENNGE K.K.

In this article, we will be covering the key features and benefits of using TypeScript , how it can help you write better and more maintainable code and how to start using it.

2- What's the difference between TS and JS?

JS vs TS
When you first hear that typescript is a superset of javascript that question start popping in your mind .. What's the difference? Wasn't Javascript with all of its powerful capabilities and frameworks enough? What did typescript add to javascript?
You'll get the point when you remember that time when you were working on your very first JS project and you misspelled that variable and you spent hours searching for the error and you couldn't find it , or that other time when you forgot to declare your function and started using it. All of these errors and more can be overcome with TypeScript!

Using typescript has a lot of advantages :

  1. Type Safety:
    TS provides type safety at compile time. i.e: It catches type-related errors before code execution, making it easier for you to fix bugs and find that misspelled variables that made your head turn ;)

  2. Better code maintenance: It has annotations that make your code more readable and self-documenting

  3. Improved productivity: It provides you with features like type inference, interfaces , and classes , making it easier to write and manage complex code. Thus, improved productivity and faster development cycles.

  4. Easy integration: TS was designed in a way that made it compatible with existing JS libraries and frameworks. You can easily integrate it into your development workflow without anything being affected.

  5. Decreases Errors in your code: TS provide you with facilities like static typing that make common errors in Js such as null or undefined values , type mismatches and missing properties can be caught at compile-time , reducing the likelihood of runtime errors.

  6. Strong Community and resources: It has a strong and growing community , thus many resources such as documentation , tutorials and third-party libraries , which can help you learn and use TS effectively.

Overall, these advantages make TypeScript a popular choice for large-scale JavaScript applications, where code maintenance and error prevention are crucial.

3- Getting started with Typescript

A- How to setup your TS environment?

  1. Install node and NPM: You can download them from the official Node.js website.
  2. Install Typescript: By running this command in your terminal you will have typescript installed globally on your machine npm install -g typescript
  3. Create a typescript project:
    After navigating to your new project directory from your terminal run the following command to initialize your new TS project
    tsc --init
    This will create a tsconfig.json file in your project directory, which include your TS configuration settings.

  4. Configure 'tsconfig.json':You can open the file and configure your settings as you need.
    e.g: setting 'outDir' property to specify the output directory for compiled JS files.

  5. Write your TS code: Once you finished your configuration you can start writing TS code in your '.ts' files
    Compile your code using the following command in your terminal , this will compile all .ts files in your project and output the corresponding javascript files in the location specified by the outDir property in 'tsconfig.json' file

    tsc

.ts file compiled to .js file

  1. Run your JS code: After your code has been compiled from .ts to .js files you can now run it using the following command ( assuming your file name was app.js)

    node app.js

This will execute the compiled JS code and output the results in your terminal successfully.

You are a hero until now , you understood why you should use TS and when it will be most beneficial for you and also you installed everything you need to start writing your typescript code successfully , but we have the most important point now missing.. and I know you're now asking a very important question .. What will I write? From where can I understand all of these concepts that you mentioned and how to start writing actual TypeScript code to benefit from all of these advantages?

B- How to start your journey?
There are many resources available for learning TypeScript. Here are some of the best resources to help you get started:

  1. The official TypeScript documentation is a great place to start learning TypeScript. It covers everything from the basics of TypeScript syntax to advanced features and concepts.

  2. The TypeScript Handbook is another official resource that provides a comprehensive guide to TypeScript. It covers a wide range of topics, including basic types, functions, classes, interfaces, and more.

  3. TypeScript Deep Dive is a free online book that provides an in-depth guide to TypeScript. It is written by the TypeScript team member Basarat Ali Syed and covers a wide range of topics from the basics to more advanced concepts.

  4. Udemy TypeScript Courses offers many courses on TypeScript at various levels, from beginner to advanced. Some of the popular courses include "TypeScript: The Complete Developer's Guide" and "Complete TypeScript Course for Web Developers."

  5. Pluralsight TypeScript Courses also offers many courses on TypeScript. Some of the popular courses include "TypeScript Fundamentals" and "Advanced TypeScript."

  6. TypeScript Weekly Newsletter is a weekly newsletter that provides updates on TypeScript news, articles, and tools. It is a great resource to stay up-to-date with the latest TypeScript developments.

Remember, the best way to learn TypeScript is to practice writing code and working on projects. These resources can help you get started and provide guidance along the way, but it's up to you to put in the effort and dedication to become proficient in TypeScript.

Top comments (0)