+ TypeScript mở rộng thêm những thứ khác:: any(bất cứ thứ gì), unknown(đảm bảo là một kiểu gì đó), never(không thể xảy ra kiểu này), void(một hàm trả về undefined or không giá trị trả về), enum

Composing Types

+ Các kiểu đơn giản hơn, có 2 loại:: Unions, generics

Unions (khai báo 1 kiểu trong nhiều kiểu)

type MyBool = true | false; (khai báo kiểu)

type isModal = ‘open’ | ‘closed’ (khai báo giá trị)

getLength(obj: string | string[])

Generics (cung cấp các biến cho các loại)

type StringArray = Array<string>;

type ObjectWithNameArray = Array<{ name: string }>;

+ Có thể khai báo theo cách riêng

interface Backpack<Type> {

add: (obj: Type) => void;

get: () => Type;

}

declare const backpack: Backpack<string>;

Interface

Giống như class, interface có lợi điểm như sau:

+ Interface khi biên dịch sang javascript thì nó sẽ được ẩn đi, không chiếm dung lượng

+ Còn class thì không, vì nó sẽ sinh ra 1 Javascript contruct, class kia sẽ là 1 function -> do vậy chiếm dung lượng

~~~~~

—————————————————————————————————————

❤️Everyday Types

Type Aliases

+ Định nghĩa loại

type Point = { x: number; y: number; }

+ A type alias can name a union type (1 kiểu bí danh được đặt cho 1 kiểu liên hợp)

type ID = number | string;

Interfaces

+ Cách đặt tên cho 1 kiểu đối tượng

interface Point { x: number; y: number; }

Differences Between Type Alias and Interfaces

+ Type alias và interface giống nhau, trong nhiều TH, ta có thể lựa chọn giữa chúng

+ Quan trọng là sự mở rộng cấu trúc::

interface Animal { // Interfaces

}

interface Bear extends Animal { // Dùng extends để kế thừa

honey: boolean

}

type Animal = { // Type alias

}

type Bear = Animal & { // Dùng toán tử ‘&’ để kế thừa

honey: boolean

}

~~~~~~~~~~

interface Window { // Interfaces

title: string

}

interface Window { // Có thể tạo trùng tên, và đó là cách add fields

ts: TypeScriptAPI

}

-> Interface có thể merge còn Type thì không. Đối tới type sẽ bị lỗi

Type Ass

❤️Type Manipulation

Generics

+ keyof type operator:: nhận kiểu object, tạo ra chuỗi or liên hợp chữ số của các key, có dạng ‘x’ | ‘y’;

-> interface a { x: string; y: string }; type b = keyof a ~ ‘x’ | ‘y’; const c:b[] = [‘x’, ‘y’];

—————————————————————————————————————

✅ Phân biệt any và unknown type

~ Unknown: Miêu tả 1 dữ liệu mà ta chưa hề biết kiểu dữ liệu của nó

~ Any: Cũng miêu tả 1 dữ liệu mà ta chưa hề biết về kiểu dữ liệu cảu nó. Tuy nhiên

+ any thì truy cập được thuộc tính mặc dù nó ko tồn tại

+ còn unknown thì không truy cập được thuộc tính -> nó sẽ báo lỗi ko hiểu.

—————————————————————————————————————

❤️ Class

class c implements a{

b: string = 'ere' //overi lại, nếu ko thì báo lỗi

e: string = '2ee'

}

//class extends class -> được hiểu như 2 thành 1, có thể truy cập all

❤️ Transform type to no required

Syntax: Partial<T>

→ Pass qua tất cả những property required.

→ Muốn skip 1 property làm required → use Pick<T, ‘prop’>

→ Useful cases:: function, class

~~~

***CONCEPTS ~ Những khái niệm ❤️✅

+ Javascript vừa là trình thông dịch vừa là trình biên dịch

+ Typescript là trình biên dịch sang Javascript để chạy

—————————————————————————————————————

Khởi tạo abstract::

+ Tạo 1 class abstract

+ Khi use in comp: cần tạo 1 class extends abstract, để use ~ tạo instance của class đã extends {newInstance = new class()}

~> Không thể tạo instance of abstract vì thế cần tạo class extends

—————————————————————————————————————

RxJS::

concatMap(data => {})

Sử dụng khi mình cần lấy data từ response trước đó, sau đó dùng cho api sau

—————————————————————————————————————

:: Generic types

~ Dùng để viết hàm chung với any types.

~ Syntax:

function identity<T>(arg: T): T {

return arg;

}

-> Định nghĩa type xuyên xuất từ đầu vào đến đầu ra

—————————————————————————————————————

***TIP ~ ❤️✅

✅Loại bỏ null & undefined

Syntax::

type myType = number | string | null | undefined;

type newType = NonNullable<myType>

//log -> type newType = number | string;

→ Use key NonNullable<type>

*Types✅

//Lấy type từ 1 biến;

const a = "jon"

type b = typeof a //-> string

const a = {

b: "1",

c: "2"

}

type d = typeof a //-> type d = {b: string;c: string;}

type d = keyof typeof a

//-> type d = "b" | "c"

//Lấy type từ 1 function

const fn = () => {

const val = "string";

return val;

};

type Return = ReturnType<typeof fn>; //-> type Return = string;

//Nếu async fn -> Awaited<ReturnType<typeof fn>> //-> type Return = string

//Gộp type✅

interface MainType {

age: number;

}

type NestedType = MainType & {

isDev: boolean;

}

type Prettify<T> = {✅

[K in keyof T]: T[K];

}

type Idk = Prettify<NestedType>

//-> type Idk = {

age: number;

isDev: boolean;

}

//Loại bỏ 1 đối tượng✅

type Shapes = | {type: 'circle', name: string} | {type: 'aquare', name: string}

type Omitted = Exclude<Shapes, {type: 'circle'}>

//-> type Omitted = {type: 'aquare', name: string}

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.