1. Generic
Trong ví dụ dưới đây, ta viết một hàm có thể nhận vào array các number hoặc string và trả về biến đầu tiên, khi đó biến x trả về sẽ có type là any và không phải number hay string dựa theo input
Ta có thể dùng generic để giải quyết vấn đề này
const firstItem = <T>(arr: T[]) => { return arr[0];};const x = firstItem([1, 2, 3]);// type trả về của x là numberconst y = firstItem(["a", "b", "c"]);// type trả về của y là string// ta có thể overwrite giá trị truyền vào mặc định cho genericconst z = firstItem<any>([true, 1, "b"]);
Tìm hiểu thêm về generic trong video này
2. Intersection type
Ta có thể lấy được intersection của các property trong các type hoặc interface
interface Client { username: string; photoURL: string;}interface Admin { username: string; token: string;}type User = Client & Admin;/*type User = { username: string; photoURL: string; token: string;}*/
3. Return type
Ta có thể lấy được cái type sẽ return của function
type ConvertType = (str: string) => number;const convertToNumber: ConvertType = (str) => { return +str;};type Return1 = ReturnType<typeof convertToNumber>; // type numbertype Return2 = ReturnType<ConvertType>; // type number
4. Parameters type
Khi lấy parameters của một function ta sẽ nhận về type là một tuple (một array được định sẵn độ dài)
type ConvertType = (num: number) => string;const convert: ConvertType = (num) => { return `${num}`;};type Params1 = Parameters<typeof convert>; // type [number]type Params2 = Parameters<ConvertType>; // type [number]
5. Template literal type
Khi truyền một union vào template literal type ta sẽ được tất cả các trường hợp mà union đó thay thế vào template
type Gender = "male" | "female";type Message = `I'm ${Gender}`;// "I'm male" | "I'm female"
6. keyof
Dùng keyof để lấy tất cả các key trong object / interface dưới dạng một string union
interface User { username: string; password: string; email: string;}type UserKeys = keyof User;// type "username" | "password" | "email"
7. Conditional type
Ta có thể dùng extends để viết condition cho type
interface User { username: string;}interface Admin { username: string; role: string;}type MyType1 = Admin extends User ? string : null; // stringtype MyType2 = unknown extends User ? string : null; // null
Kết luận
Và đó là những khái niệm trong typescript nâng cao phổ biến mà mình muốn chia sẻ. Chúc bạn áp dụng thành công vào dự án của mình.
