TypeScript = JavaScript + powerful type system

 

 

 For beginners!!!

Contents

•    Overview of TypeScript
•    Features of TypeScript
•       Advantages and Disadvantages
•       Installation of TypeScript
•       Conclusion

Overview of TypeScript

Before diving in, familiarise yourself with TypeScript's fundamentals.

TypeScript is an open source programming language was first released in 2012 by MicroSoft. TypeScript is a superset of JavaScript that means it was built on JavaScript. TypeScript has all the functionality of JavaScript as well as some unique extra features. Such as type determination, interfaces, abstract classes, access modifiers, static type verification, and so forth.           

                                   

The primary purpose of TypeScript is to carefully control the data type of variables during compilation and coding to ensure error-free development. Additionally, it examines the data type and syntax of the methods, classes, objects, and functions.

Unlike JavaScript, which decides the data type of values at runtime.

TypeScript detects errors during compilation so it is referred to be a static typing method whereas JavaScript is a dynamically typing method, which means it detects error during run time.

Transpilation is the process by which developers can import JavaScript programmes into TypeScript and compile them using the TypeScript compiler on their IDE (Integrated Development Environment) platform.

JavaScript source code cannot be impacted by TS during compilation. Without modifying the source code, the TS compiler simply determines the data types of variables, checks for errors, and runs as JavaScript.

Features of TypeScript with playground examples

1.     TypeScript explicitly sets the data type of variables while coding whereas JavaScript doesn’t.

 To specify the data type of variables during compilation, here variables like “sales”, “course”, and “is published” are explicitly assigned to data types “number”, “string”, and “boolean”.

2.     Using the value that has been assigned to the variable, TypeScript automatically                determines the type of any functions or variables.

 

    Here, data type of “sales” is not specified but TypeScript auto detects the type of    “sales” based on the value assigned to “sales”.

 3.     It highlights type incompatibilities and syntactic mismatches made during coding. It        aids developers to avoid coding errors.

        In this example, data type of “age” is number but it is assigned to a string, now                 TypeScript throws a type mismatch error.

4.     TypeScript's stringent type checking at both the coding and build time is a huge           benefit. For greater coding flexibility, we can control the type checking strictness       with the TypeScript compiler option "Strict". 

    A list of type checking rules is contained in strict mode. For severe type checking, simply enable this mode in the TypeScript compiler settings.

5.     It helps with code completion, which means it shows the exact classes, methods,             functions, and syntax for the programme during coding. A developer can select                 appropriate functions and methods from TypeScript library functions.

               

It supports third party library functions as well.

6.     Type Assertion

TypeScript uses the type assertion technique to convert a variable from one type to another.It is called type narrowing and allows you to override its inferred and analyzed view of types in any way you want to.

     Sometimes the same variable needs to behave differently depending on the data type. Type assertion throws an error in this situation. We must use type assertions to instruct the TypeScript compiler to accept this in order to deliver the expected results.

 When we employ functions from third-party libraries, TypeScript will  raise type checking issues for some of the methods. To avoid this situation, we use type assertion.

 TypeScript's primary function is to maintain the same data type for variables throughout the entire program. But some programmes are exceptional. The data type of the variable will differ based on the scope of the variable in a particular function.

 For example, employee code – TS 123 and gift coupon code – 123 456

     In this case, to get the employee ID, the "employee code" should be set to "any" type because it contains a string and a number. To generate the gift coupon code, we use only the last three digits of the employee code plus the secret code, so the employee code should be of the number type this time.

    Here, employee code is globally annotated as "any," and it is converted to "number" type via type assertion to generate a gift coupon locally. 

 Type assertion is represented by “angular brackets (< >)” or the “as” keyword.

       Using “as” keyword

Advantages of TypeScript 

§  TypeScript strictly enforces type checking during compilation and coding, allowing developers to write error-free code that can be safely run.

§  It can be used in both the front and back end as JavaScript.

§  TypeScript provides code completion, code refactoring, productivity boosting, and type checking.

§  It can be used in medium- to large-scale projects.

§  TypeScript can be executed anywhere as JavaScript. 

§  TypeScript highlights unexpected behavior in code and reduces the number of threads.

§  It is a type system; there is no need to add extra code to annotate types explicitly.

§  TypeScript includes abstract classes, access modifiers, and interfaces that are not present in JavaScript.

Disadvantage of TypeScript

§  Too strict type-checking can sometimes affect flexibility in coding.

§  Without the assistance of JavaScript, TypeScript cannot be executed directly in browsers. 

§  Errors are possible during runtime. because TypeScript does all of its type checking during the build process.

 How to install TypeScript and configuring the TypeScript compiler?

   Simply follow the steps!

 Installation of TypeScript

1.   We have to install NPM for the TypeScript compiler, so go to https://nodejs.org/en/ and download the latest version of Node.js.

2.     Open a terminal on your computer.

3.   Type the following commands to install TypeScript:

              

            Here, "sudo" is needed when Mac or Linux show a permission error during                       installation.

4.    Verify installation using the following command:

Configuring the TypeScript Compiler

Some IDE platforms do not include the TypeScript compiler. For instance, the Visual Studio Code editor does not include the TypeScript compiler, so we have to configure the TS compiler for the VS Code editor. Here are the steps:

1.    In your VS Code editor, create a typescript project and save it with the “ts”           extension. 

2.     Navigate to the TS project folder in terminal. 

3.    Enter the following command:

The terminal will look like this:

                  

    Open TypeScript Configuration in your Visual Studio Code editor. It shows all the settings, and you can use them based on your needs.

Conclusion

        To summarize, TypeScript is a type system that includes all of the features of JavaScript as well as strict type checking and static typing to create error-free code. 

        TypeScript = JavaScript + powerful type system