TypeScript có tốt như lời đồn???

Thứ Hai, 19/04/2021

Tram Ho

TypeScript là một ngôn ngữ lập trình mã nguồn mở, được công bố lần đầu tiên vào tháng 10 năm 2012 (ở phiên bản 0.8), sau hai năm phát triển nội bộ tại Microsoft. Và trong những năm gần đây, Typescript đã trở thành một trào lưu trong giới phát triển web. Vậy điều gì đã đưa Typescript trở nên phổ biến như vậy, và liệu nó có thực sự tốt như lời đồn??? Cùng mình tìm hiểu nhé

1. TypeScript là gì?

TypeScript là một ngôn ngữ mã nguồn mở được xây dựng dựa trên JavaScript bởi Microsoft.

Typescript được xây dựng trên chuẩn ES6, và được biên dịch thành mã Javascript để có thể chạy trên mọi browser.

Ví dụ đoạn code typescript sau

<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>

class Customer {

Name : string;

constructor (firstName: string, lastName: string)

{

this.Name = firstName + " " + lastName;

}

GetName()

{

return "Hello, " + this.Name;

}

sẽ được biên dịch sang mã javascript như vậy

<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>

var Customer = (function () {

function Customer(firstName, lastName) {

}

Customer.prototype.GetName = function () {

};

return Customer;

}());

Có thể nói, Typescript là một phiên bản nâng cấp của Javascript vì nó là siêu tập hợp cú pháp nghiêm ngặt (typed superset) mã Javascript, bổ sung những tùy chọn kiểu tĩnh (static typing) và các lớp hướng đối tượng.

2. Các tính năng của TypeScript

TypeScript chính là JavaScript. TypeScript được xây dựng từ mã JavaScript và được dịch thành mã JavaScript. Do vậy, bạn chỉ cần biết JavaScript thì sẽ có thể sử dụng TypeScript. Tất cả mã TypeScript sẽ được biên dịch thành JavaScript tương ứng với mục đích thực thi.
TypeScript hỗ trợ các thư viện JS: TypeScript được biên dịch có thể được sử dụng bất kỳ đoạn mã JavaScript nào vì vậy TypeScript có thể sử dụng lại tất cả các framewords, tools và thư viện hiện có của JavaScript.
JavaScript là TypeScript: Điều này có nghĩa là bất kỳ tệp .js hợp lệ nào cũng có thể được đổi tên thành .ts và được biên dịch như các tệp TypeScript khác.
TypeScript là linh động: TypeScript có thể linh động trên các trình duyệt, thiết bị và các hệ điều hành. Nó có thể chạy trên bất kỳ môi trường nào mà JavaScript có thể chạy trên đó. Không giống như các đối tác của nó, TypeScript không cần một máy ảo chuyên dụng hoặc một môi trường cụ thể để thực thi.

3. Nghịch ngợm với Typescript

3.1 Kiểu dữ liệu và khai báo biến

Typescript hỗ trợ toàn bộ các kiểu dữ liệu của ES6, bao gồm các kiểu dữ liệu nguyên thủy (string, number và boolean), array, enum,… cùng kiểu dữ liệu do người dùng tự định nghĩa.

Cú pháp khai báo biến

&lt;hoisting&gt; &lt;identifier&gt; [: &lt;type&gt;] [= &lt;value&gt;];

1 2	<hoisting> <identifier> [: <type>] [= <value>];

Trong Typescript, khi bạn khai báo một biến với hoisting (const, var hoặc let), bạn có thể thêm chú thích kiểu để chỉ định cụ thể kiểu của biến.

Nếu bạn khai báo như vậy, Typescript sẽ tự nhận định type của biến myName

<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>

// No type annotation needed -- 'myName' inferred as type 'string'

let myName = "Alice";

hoặc bạn có thể khai báo chặt chẽ hơn như vậy

<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>

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>

Một số ví dụ về khai báo biến cho các kiểu dữ liệu khác

<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>

// Khai báo biến boolean

var x : boolean = true;

// Khai báo mảng chuỗi

var strs : string[] = ['string_1', 'string_2'];

// Khai báo mảng số

var numbers : number[] = [1, 2, 3];

// Khai báo kiểu mảng any

var anyArray = any[] = ['string_1', 1, 2]

// Khai báo kiểu Tuple (biến có thể có nhiều hơn 1 kiểu dữ liệu)

var tupleVar = number | tring;

Cón đây là ví dụ về việc định nghĩa 1 object

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>

type Point = {

x: number;

y?: number;

};

Tùy chọn ? sẽ chỉ định thuộc tính của object là bắt buộc hoặc không
Với Typescript, chúng ta còn có một cách khác để khai báo object là interface

<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>

interface Point {

x: number;

y: number;

}

Về cơ bản thì type và interface đều khá giống nhau về việc khai báo và khả năng mở rộng. Nhưng interface thì linh động hơn type vì nó có thể định nghĩa lại.

JavaScript có hai kiểu giá trị nguyên thủy được sử dụng cho các giá trị vắng mặt hoặc chưa được khởi tạo là null và undefined. Nhưng khác với Javascript, Typescript cho phép bạn tùy chỉnh việc kiểm tra các giá trị này bằng strictNullChecks.

Nếu strictNullChecks tắt, các giá trị null hoặc undefined vẫn có thể được truy cập bình thường và có thể được gán thuộc tính. Ngược lại, với strictNullChecks bật , khi một giá trị là null hoặc undefined, bạn sẽ cần phải kiểm tra các giá trị đó trước khi sử dụng.

3.2 Khai báo function

Tương tự khi khai báo biến, bạn cũng có thể chỉ định kiểu cho tham số như ví dụ sau

<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>

// Parameter type annotation

function greet(name: string) {

console.log("Hello, " + name.toUpperCase() + "!!");

}

hoặc như vậy cho tham số có chấp nhận nhiều hơn 1 kiểu dữ liệu

<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>

function printId(id: number | string) {

console.log("Your ID is: " + id);

}

Tham số đặc biệt ... – rest parameter, cho phép bạn khai báo các tham số có thể có của function

<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">=&gt;</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>

function multiply(n: number, ...m: number[]) {

return m.map((x) => n * x);

}

// 'a' gets value [10, 20, 30, 40]

const a = multiply(10, 1, 2, 3, 4);

Bạn còn có thể định nghĩa kiểu trả về của dữ liệu cho mỗi function

<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>

function getFavoriteNumber(): number {

return 26;

}

Nếu bạn không định nghĩa, kiểu trả về sẽ mặc định là any.

Một số ví dụ về khai báo function

<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>

// 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ề

function f(x?: number): void;

// Khai báo 1 hàm trả về giá trị không xác định với unknow

function safeParse(s: string): unknown {

return JSON.parse(s);

}

// Khai báo một hàm không bao giờ trả về giá trị với never

function fail(msg: string): never {

throw new Error(msg);

}

3.3 Khai báo class và hướng đối tượng trong Typescript

<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>

class Point {

x: number;

y: number;

sum (): number {

return this.x + this.y;

}

const pt = new Point();

pt.x = 0;

pt.y = 0;

console.log(pt.sum());

Đây là một ví dụ về khai báo class cho Typescript. Nhưng khác với Javascript, trong Typescript, bạn có thể đảm bảo việc các trường lớp có cần định nghĩa hàm khởi tạo trong class hay không bằng cách thiết lập strictPropertyInitialization.

Nếu bạn bật strictPropertyInitialization, khai báo này sẽ bị cảnh báo

<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>

class BadGreeter {

// Property 'name' has no initializer and is not definitely assigned in the constructor.

}

vì khai báo chính xác sẽ phải như vậy

<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>

class GoodGreeter {

constructor() {

this.name = "hello";

}

Một khái niệm mới của Typescript nữa mà mình cần chú ý đó là Generic Class

<span class="token keyword">class</span> <span class="token class-name">Box</span><span class="token operator">&lt;</span>Type<span class="token operator">&gt;</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&lt;string&gt;</span>

class Box<Type> {

contents: Type;

constructor(value: Type) {

this.contents = value;

}

const b = new Box("hello!");

// ^ = const b: Box<string>

Nó cho phép bạn tùy chỉnh kiểu dữ liệu khi sử dụng. Thay vì khai báo cụ thể ngay khi khai báo class, bạn sẽ khai báo kiểu khi sử dụng class.
Điều này sẽ giúp bạn tối ưu code, thay vì phải viết nhiều class cho nhiều kiểu khác nhau thì bạn chỉ cần viết 1 class, và khai báo khi sử dụng class đó.

Về tính hướng đối tượng

Tính trừu tượng
Typescript cho phép bạn khai báo các abstract class và abstract thành phần bằng từ khóa abstract

abstract <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>

abstract class Base {

abstract getName(): string;

printName() {

console.log("Hello, " + this.getName());

}

const b = new Base();

// Cannot create an instance of an abstract class.

class Derived extends Base {

getName() {

return "world";

}

const d = new Derived();

d.printName();

Tính kế thừa

Bạn có thể tạo ra 1 class con, kế thừa từ 1 class cha bằng cách sử dụng extends

<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>

constructor() {

super();

}

Function super() sẽ cho phép bạn gọi đến hàm khởi tạo cha cho class con. Nhưng khác với javascript, Typescript chỉ cảnh báo việc gọi hàm super() khi cần thiết.

Tính bao đóng

Visibility đảm bảo việc cho phép hoặc không cho phép việc kế thừa của class con với class cha.

Các visibility được hỗ trợ bao gồm: public, private, protected

 <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>

class Greeter {

public greet() {

console.log("hi!");

}

const g = new Greeter();

g.greet();

<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>

class Greeter {

console.log("Hello, " + this.getName());

}

protected getName() {

return "hi";

}

class SpecialGreeter extends Greeter {

public howdy() {

// OK to access protected member here

console.log("Howdy, " + this.getName());

}

const g = new SpecialGreeter();

g.getName();

Property 'getName' is protected and only accessible within class 'Greeter' and its subclasses.

<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>

class Base {

private x = 0;

}

// Can't access from outside the class

console.log(b.x);

Property 'x' is private and only accessible within class 'Base'.

Tính đa hình

Đây là một ví dụ cho tính đa hình tribf Tyoescript

<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>

class Person {

age: number;

}

class Employee {

age: number;

salary: number;

}

// OK

const p: Person = new Employee();

Bạn cũng có thể overload các function

<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>

class Point {

// Overloads

constructor(x: number, y: string);

constructor(s: string);

constructor(xs: any, y?: any) {

// TBD

}

cũng như overriding

<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>

class Base {

greet() {

}

greet(name?: string) {

if (name === undefined) {

super.greet();

} else {

console.log(`Hello, ${name.toUpperCase()}`);

}

d.greet();

d.greet("reader");

(getter và setter)

<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>

class C {

_length = 0;

get length() {

return this._length;

}

set length(value) {

this._length = value;

}

Lưu ý: TypeScript có một số quy tắc đặc biệt cho accessors:
Nếu không settẻ không tồn tại, thuộc tính sẽ tự động được hiểu là một thuộc tính readonly
Kiểu tham số của setter sẽ được suy ra từ kiểu trả về của getter
Nếu tham số setter có chú thích kiểu, nó phải khớp với kiểu trả về của getter
Getter và setter phải có cùng Member Visibility

4. Đánh giá ưu điểm và nhược điểm

Ưu điểm

Là ngôn ngữ mã nguồn mở
Mã dễ hiểu và dễ tiếp cận, nhất là khi bạn đã học Javascript
Có đầy đủ tính năng của ES6
Chặt chẽ và dễ dàng tối ưu code hơn Javascript
Hỗ trợ lập trình hướng đối tượng

Nhược điểm

Cần biên dịch sang mã Javascript
Khó khăn trong việc thiết lập: cần đảm bảo rằng máy chủ Node.js, trình thử nghiệm và webpack đều có thể hoạt động với TypeScript

5. Kết luận

Với từng này tư liệu thì mình chưa thể đưa ra kết luận rằng về tính hữu dụng và cần thiết như lời đồn của trending Typescript này. Nhưng phải công nhận so với việc dùng Javascript thuần thì Typescript chặt chẽ hơn nhiều. Tuy nhiên, so với việc sử dụng các framework như vue, react,… thì tính chặt chẽ và thư viện hỗ trợ của chúng cũng không thua kém, chung quy thì phải làm dự án thật mới có thể đưa ra nhận xét chính xác.

Vì vậy, xin lỗi bạn, Tiêu đề chỉ mang tính chất câu view =))

Hi vọng bài viết sẽ cung cấp cho bạn một số thông tin cơ bản về Typescript. Cảm ơn vì đã đọc bài viết của mình và hẹn gặp lại bạn ở những bài viết tiếp theo.

Tài liệu tham khảo

Typescript Handbook

Typescript Tutorial

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

TypeScript có tốt như lời đồn???

1. TypeScript là gì?

2. Các tính năng của TypeScript

3. Nghịch ngợm với Typescript

3.1 Kiểu dữ liệu và khai báo biến

3.2 Khai báo function

3.3 Khai báo class và hướng đối tượng trong Typescript

4. Đánh giá ưu điểm và nhược điểm

5. Kết luận

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript