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
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">class</span> <span class="token class-name">Customer</span> <span class="token punctuation">{</span> Name <span class="token operator">:</span> string <span class="token punctuation">;</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">firstName <span class="token operator">:</span> string <span class="token punctuation">,</span> lastName <span class="token operator">:</span> string</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> Name <span class="token operator">=</span> firstName <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> lastName <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">GetName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello, "</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> Name <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
will be compiled into the same javascript code
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">var</span> Customer <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">function</span> <span class="token function">Customer</span> <span class="token punctuation">(</span> <span class="token parameter">firstName <span class="token punctuation">,</span> lastName</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> Name <span class="token operator">=</span> firstName <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> lastName <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token class-name">Customer</span> <span class="token punctuation">.</span> prototype <span class="token punctuation">.</span> <span class="token function-variable function">GetName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello, "</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> Name <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> Customer <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
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
1 2 | <hoisting> <identifier> [: <type>] [= <value>]; |
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
1 2 3 | <span class="token comment">// No type annotation needed -- 'myName' inferred as type 'string'</span> <span class="token keyword">let</span> myName <span class="token operator">=</span> <span class="token string">"Alice"</span> <span class="token punctuation">;</span> |
Or you can declare more closely as such
1 2 | <span class="token keyword">let</span> myName <span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">"Alice"</span> <span class="token punctuation">;</span> |
Some examples of variable declaration for other data types
1 2 3 4 5 6 7 8 9 10 11 | <span class="token comment">// Khai báo biến boolean</span> <span class="token keyword">var</span> x <span class="token operator">:</span> boolean <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token comment">// Khai báo mảng chuỗi</span> <span class="token keyword">var</span> strs <span class="token operator">:</span> string <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'string_1'</span> <span class="token punctuation">,</span> <span class="token string">'string_2'</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token comment">// Khai báo mảng số</span> <span class="token keyword">var</span> numbers <span class="token operator">:</span> number <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token comment">// Khai báo kiểu mảng any</span> <span class="token keyword">var</span> anyArray <span class="token operator">=</span> any <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'string_1'</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">]</span> <span class="token comment">// Khai báo kiểu Tuple (biến có thể có nhiều hơn 1 kiểu dữ liệu)</span> <span class="token keyword">var</span> tupleVar <span class="token operator">=</span> number <span class="token operator">|</span> tring <span class="token punctuation">;</span> |
Yes, this is an example of defining an object
1 2 3 4 5 6 | type Point <span class="token operator">=</span> <span class="token punctuation">{</span> x <span class="token operator">:</span> number <span class="token punctuation">;</span> y <span class="token operator">?</span> <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
Optional ?
will specify the object’s properties as required or not With Typescript, we have another way to declare object as interface
1 2 3 4 5 | <span class="token keyword">interface</span> <span class="token class-name">Point</span> <span class="token punctuation">{</span> x <span class="token operator">:</span> number <span class="token punctuation">;</span> y <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
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
1 2 3 4 5 | <span class="token comment">// Parameter type annotation</span> <span class="token keyword">function</span> <span class="token function">greet</span> <span class="token punctuation">(</span> <span class="token parameter">name <span class="token operator">:</span> string</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello, "</span> <span class="token operator">+</span> name <span class="token punctuation">.</span> <span class="token function">toUpperCase</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"!!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
or so for the parameter that accepts more than 1 data type
1 2 3 4 | <span class="token keyword">function</span> <span class="token function">printId</span> <span class="token punctuation">(</span> <span class="token parameter">id <span class="token operator">:</span> number <span class="token operator">|</span> string</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Your ID is: "</span> <span class="token operator">+</span> id <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
The rest parameter ...
– rest parameter, allows you to declare the possible parameters of the function
1 2 3 4 5 6 | <span class="token keyword">function</span> <span class="token function">multiply</span> <span class="token punctuation">(</span> <span class="token parameter">n <span class="token operator">:</span> number <span class="token punctuation">,</span> <span class="token operator">...</span> m <span class="token operator">:</span> number <span class="token punctuation">[</span> <span class="token punctuation">]</span></span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> m <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">x</span> <span class="token punctuation">)</span> <span class="token operator">=></span> n <span class="token operator">*</span> x <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// 'a' gets value [10, 20, 30, 40]</span> <span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token function">multiply</span> <span class="token punctuation">(</span> <span class="token number">10</span> <span class="token punctuation">,</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token number">4</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
You can also define the return type of data for each function
1 2 3 4 | <span class="token keyword">function</span> <span class="token function">getFavoriteNumber</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">:</span> number <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token number">26</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
If you do not define it, the return type will default to any
.
Some examples of function declaration
1 2 3 4 5 6 7 8 9 10 11 | <span class="token comment">// Khai báo 1 hàm f() có thể nhận vào 1 param kiểu number (hoặc không) và không có dữ liệu trả về</span> <span class="token keyword">function</span> <span class="token function">f</span> <span class="token punctuation">(</span> <span class="token parameter">x <span class="token operator">?</span> <span class="token operator">:</span> number</span> <span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">;</span> <span class="token comment">// Khai báo 1 hàm trả về giá trị không xác định với unknow</span> <span class="token keyword">function</span> <span class="token function">safeParse</span> <span class="token punctuation">(</span> <span class="token parameter">s <span class="token operator">:</span> string</span> <span class="token punctuation">)</span> <span class="token operator">:</span> unknown <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token constant">JSON</span> <span class="token punctuation">.</span> <span class="token function">parse</span> <span class="token punctuation">(</span> s <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Khai báo một hàm không bao giờ trả về giá trị với never </span> <span class="token keyword">function</span> <span class="token function">fail</span> <span class="token punctuation">(</span> <span class="token parameter">msg <span class="token operator">:</span> string</span> <span class="token punctuation">)</span> <span class="token operator">:</span> never <span class="token punctuation">{</span> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span> <span class="token punctuation">(</span> msg <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
3.3 Declaring classes and object-oriented in Typescript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">class</span> <span class="token class-name">Point</span> <span class="token punctuation">{</span> x <span class="token operator">:</span> number <span class="token punctuation">;</span> y <span class="token operator">:</span> number <span class="token punctuation">;</span> <span class="token function">sum</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">:</span> number <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> x <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> y <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> pt <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Point</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> pt <span class="token punctuation">.</span> x <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> pt <span class="token punctuation">.</span> y <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> pt <span class="token punctuation">.</span> <span class="token function">sum</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
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
1 2 3 4 5 | <span class="token keyword">class</span> <span class="token class-name">BadGreeter</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> string <span class="token punctuation">;</span> <span class="token comment">// Property 'name' has no initializer and is not definitely assigned in the constructor.</span> <span class="token punctuation">}</span> |
because the exact declaration would have to be
1 2 3 4 5 6 7 8 | <span class="token keyword">class</span> <span class="token class-name">GoodGreeter</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> string <span class="token punctuation">;</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> <span class="token string">"hello"</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
A new concept of Typescript that I need to pay attention to is Generic Class
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">class</span> <span class="token class-name">Box</span> <span class="token operator"><</span> Type <span class="token operator">></span> <span class="token punctuation">{</span> contents <span class="token operator">:</span> Type <span class="token punctuation">;</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">value <span class="token operator">:</span> Type</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> contents <span class="token operator">=</span> value <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Box</span> <span class="token punctuation">(</span> <span class="token string">"hello!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// ^ = const b: Box<string></span> |
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
keyword1234567891011121314151617181920abstract <span class="token keyword">class</span> <span class="token class-name">Base</span> <span class="token punctuation">{</span>abstract <span class="token function">getName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">:</span> string <span class="token punctuation">;</span><span class="token function">printName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello, "</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">getName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Base</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token comment">// Cannot create an instance of an abstract class.</span><span class="token keyword">class</span> <span class="token class-name">Derived</span> <span class="token keyword">extends</span> <span class="token class-name">Base</span> <span class="token punctuation">{</span><span class="token function">getName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token string">"world"</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Derived</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>d <span class="token punctuation">.</span> <span class="token function">printName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> - InheritanceYou can create a child class, inherit from a parent class by using
extends
123456<span class="token keyword">class</span> <span class="token class-name">Derived</span> <span class="token keyword">extends</span> <span class="token class-name">Base</span> <span class="token punctuation">{</span><span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">super</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
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
12345678<span class="token keyword">class</span> <span class="token class-name">Greeter</span> <span class="token punctuation">{</span><span class="token keyword">public</span> <span class="token function">greet</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"hi!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token keyword">const</span> g <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Greeter</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>g <span class="token punctuation">.</span> <span class="token function">greet</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>1234567891011121314151617181920<span class="token keyword">class</span> <span class="token class-name">Greeter</span> <span class="token punctuation">{</span><span class="token keyword">public</span> <span class="token function">greet</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello, "</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">getName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">protected</span> <span class="token function">getName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token string">"hi"</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token keyword">class</span> <span class="token class-name">SpecialGreeter</span> <span class="token keyword">extends</span> <span class="token class-name">Greeter</span> <span class="token punctuation">{</span><span class="token keyword">public</span> <span class="token function">howdy</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">// OK to access protected member here</span>console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Howdy, "</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">getName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token keyword">const</span> g <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SpecialGreeter</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>g <span class="token punctuation">.</span> <span class="token function">greet</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// OK</span>g <span class="token punctuation">.</span> <span class="token function">getName</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>Property <span class="token string">'getName'</span> is <span class="token keyword">protected</span> and only accessible within <span class="token keyword">class</span> <span class="token string">'Greeter'</span> and its subclasses <span class="token punctuation">.</span>12345678<span class="token keyword">class</span> <span class="token class-name">Base</span> <span class="token punctuation">{</span><span class="token keyword">private</span> x <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Base</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token comment">// Can't access from outside the class</span>console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> b <span class="token punctuation">.</span> x <span class="token punctuation">)</span> <span class="token punctuation">;</span>Property <span class="token string">'x'</span> is <span class="token keyword">private</span> and only accessible within <span class="token keyword">class</span> <span class="token string">'Base'</span> <span class="token punctuation">.</span> - PolymorphismThis is an example of tribf Tyoescript polymorphism1234567891011121314<span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>name <span class="token operator">:</span> string <span class="token punctuation">;</span>age <span class="token operator">:</span> number <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">class</span> <span class="token class-name">Employee</span> <span class="token punctuation">{</span>name <span class="token operator">:</span> string <span class="token punctuation">;</span>age <span class="token operator">:</span> number <span class="token punctuation">;</span>salary <span class="token operator">:</span> number <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment">// OK</span><span class="token keyword">const</span> p <span class="token operator">:</span> Person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Employee</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
You can also overload the functions
123456789<span class="token keyword">class</span> <span class="token class-name">Point</span> <span class="token punctuation">{</span><span class="token comment">// Overloads</span><span class="token function">constructor</span> <span class="token punctuation">(</span> x <span class="token operator">:</span> number <span class="token punctuation">,</span> y <span class="token operator">:</span> string <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token function">constructor</span> <span class="token punctuation">(</span> s <span class="token operator">:</span> string <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">xs <span class="token operator">:</span> any <span class="token punctuation">,</span> y <span class="token operator">?</span> <span class="token operator">:</span> any</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">// TBD</span><span class="token punctuation">}</span><span class="token punctuation">}</span>as well as overriding
1234567891011121314151617181920<span class="token keyword">class</span> <span class="token class-name">Base</span> <span class="token punctuation">{</span><span class="token function">greet</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"Hello, world!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token keyword">class</span> <span class="token class-name">Derived</span> <span class="token keyword">extends</span> <span class="token class-name">Base</span> <span class="token punctuation">{</span><span class="token function">greet</span> <span class="token punctuation">(</span> <span class="token parameter">name <span class="token operator">?</span> <span class="token operator">:</span> string</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">if</span> <span class="token punctuation">(</span> name <span class="token operator">===</span> <span class="token keyword">undefined</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">greet</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">Hello, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> name <span class="token punctuation">.</span> <span class="token function">toUpperCase</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Derived</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>d <span class="token punctuation">.</span> <span class="token function">greet</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>d <span class="token punctuation">.</span> <span class="token function">greet</span> <span class="token punctuation">(</span> <span class="token string">"reader"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> - (getter and setter)12345678910<span class="token keyword">class</span> <span class="token class-name">C</span> <span class="token punctuation">{</span>_length <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span><span class="token keyword">get</span> <span class="token function">length</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _length <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">set</span> <span class="token function">length</span> <span class="token punctuation">(</span> <span class="token parameter">value</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">this</span> <span class="token punctuation">.</span> _length <span class="token operator">=</span> value <span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
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