TypeScript is as good as it is rumored ???

Tram Ho

TypeScript is an open source programming language, first announced in October 2012 (at version 0.8), after two years of in-house development at Microsoft. And in recent years, Typescript has become a trend in the web development world. So what made Typescript so popular, and is it really as good as it is rumored ??? Let’s find out together

1. What is TypeScript?

TypeScript is an open source language built on JavaScript by Microsoft.

Typescript is built on standard ES6, and compiled into Javascript code to be run in any browser.

For example the following typescript code snippet

will be compiled into the same javascript code

 

Typescript is an upgraded version of Javascript because it is typed superset of Javascript code, adding static type options and object-oriented classes.

2. Features of TypeScript

  • TypeScript is JavaScript . TypeScript is built from JavaScript code and translated into JavaScript code. So, you only need to know JavaScript and you will be able to use TypeScript. All TypeScript code will be compiled into the corresponding JavaScript for execution purpose.
  • TypeScript supports JS libraries : Compiled TypeScript can use any JavaScript code so TypeScript can reuse all existing JavaScript frameworks, tools, and libraries.
  • JavaScript is TypeScript : This means any valid .js file can be renamed to .ts and compiled like other TypeScript files.
  • TypeScript is portable : TypeScript is flexible across browsers, devices and operating systems. It can run in any environment that JavaScript can run on. Unlike its counterparts, TypeScript doesn’t need a dedicated virtual machine or a specific environment to execute.

3. Naughty with Typescript

3.1 Data types and variable declaration

Typescript supports all ES6 data types, including primitive data types (string, number, and boolean), array, enum, … and user-defined data types.

Syntax of variable declaration

In Typescript, when you declare a variable with hoisting (const, var, or let), you can add a type annotation to specifically specify the type of the variable.

If you declare it like this, Typescript will determine the type of the variable myName

Or you can declare more closely as such

Some examples of variable declaration for other data types

 

Yes, this is an example of defining an object

Optional ? will specify the object’s properties as required or not With Typescript, we have another way to declare object as interface

Basically, the type and the interface are quite similar in terms of declaration and extensibility. But the interface is more flexible than the type because it is redefined.

JavaScript has two primitive value types that can be used for absent or undefined values, null and undefined . But unlike Javascript, Typescript allows you to customize testing of these values ​​with strictNullChecks .

If strictNullChecks off, null or undefined values ​​can still be accessed normally and may be property assigned. In contrast, with strictNullChecks enabled, when a value is null or undefined, you’ll need to check those values ​​before using it.

 

3.2 Function declaration

Similarly when declaring variables, you can also specify the type for the parameter as in the following example

or so for the parameter that accepts more than 1 data type

The rest parameter ... – rest parameter, allows you to declare the possible parameters of the function

 

You can also define the return type of data for each function

If you do not define it, the return type will default to any .

Some examples of function declaration

 

3.3 Declaring classes and object-oriented in Typescript

Here is an example of a class declaration for Typescript. But unlike Javascript, in Typescript, you can ensure whether class fields need class constructors by setting strictPropertyInitialization .

If you turn on strictPropertyInitialization , this declaration will be warned

because the exact declaration would have to be

A new concept of Typescript that I need to pay attention to is Generic Class

It allows you to customize the data type to use. Instead of declaring specifically when declaring the class, you will declare the type when using the class. This will help you optimize the code, instead of having to write many classes for many different types, you just need to write 1 class, and declare when using that class.

About object oriented

  • Typescript abstraction allows you to declare abstract classes and abstract elements with the abstract keyword
  • InheritanceYou can create a child class, inherit from a parent class by using extends

    Function super () will allow you to call the parent constructor for the child class. But unlike javascript, Typescript only warns against calling the super () function when needed.
  • Bagging calculationVisibility guarantees whether or not inheritance of subclasses from parent class is allowed.

    Supported visibility includes: public, private, protected

     

  • PolymorphismThis is an example of tribf Tyoescript polymorphism

    You can also overload the functions

    as well as overriding

  • (getter and setter)

    Note: TypeScript has some special rules for accessors:

    • If no tag does not exist, the property is automatically interpreted as a readonly property
    • The setter’s parameter type is derived from the getter’s return type
    • If the setter parameter has type comments, it must match the getter’s return type
    • Getter and setter must have the same Member Visibility

4. Evaluate the advantages and disadvantages

Advantages

  • Open source language
  • The code is easy to understand and approach, especially once you’ve learned Javascript
  • Fully featured ES6
  • Stricter and easier to optimize code than Javascript
  • Support object-oriented programming

Defect

  • Need to compile to Javascript code
  • Difficulty set up: need to make sure that Node.js server, tester and webpack can all work with TypeScript

5. Conclusion

With each of these documents, I can not conclude that about the usefulness and necessity as rumors of this trending Typescript. But to admit compared to using pure Javascript, Typescript is much stricter. However, compared to using frameworks like vue, react, …, their strictness and support library are not inferior, in general, it is necessary to do a real project to make a major comment. body.

So sorry, Title is only for sentence view =))

Hopefully the article will give you some basic information about Typescript. Thanks for reading my article and see you in the next articles.

References

Typescript Handbook

Typescript Tutorial

Share the news now

Source : Viblo