Pulse Of The Blogosphere » Typescripts căn bản

HOME / Javascript / JS Cơ Bản / Typescripts căn bản

Typescripts căn bản

Author: admin - Posted: 09/08/21 - Update: 01/07/22

1 số cú pháp cần nhớ

Union type | string | number;
Intersection Types &
Optional notation ?
Angle brackets: <>
Nullish coalescing operator: ??
Generic type
Decorators: @

Cài đặt

npm i -g typescript
npx tsc --init

let myname = "Harry"

//Genenric
const gener_1 = <T>(arr: Array<T>) => arr[0];
const gener_2 = <X, Y>(x: X, y: Y) => [x, y];
const gener_3 = <X, Y>(x: X, y: Y): [X, Y] => [x, y];
const gener_4 = <X, Y = number>(x: X, y: Y): [X, Y] => [x, y];

const run_gener_1 = gener_1([1, 2, 3]);
const run_gener_2 = gener_2(123, "abc");
const run_gener_3 = gener_3(123, "abc");
const run_gener_31 = gener_3<number | boolean, string>(123, "abc");
const run_gener_4 = gener_4<string | null>("abc", 123);

//Generic Extends 
const gener_5 = (obj: { firstName: string; lastName: string }) => ({
    ...obj,
    fullname: `${obj.firstName} ${obj.lastName}`
})
const gener_6 = <T extends { firstName: string; lastName: string }>(obj: T) => ({
    ...obj,
    fullname: `${obj.firstName} ${obj.lastName}`
})
const gener_7_error = (employee: object) => ({
    ...employee,
    uid: Math.floor(Math.random() * 100),
})
const gener_8_fix = <T>(employee: T) => ({
    ...employee,
    uid: Math.floor(Math.random() * 100),
})
const run_gener_5 = gener_5({ firstName: "John", lastName: "Parker" });
const run_gener_6 = gener_6({ firstName: "John", lastName: "Parker", age: 30 });
const run_gener_7 = gener_7_error({ firstName: "John", lastName: "Parker", age: 30 });
const run_gener_8 = gener_8_fix({ firstName: "John", lastName: "Parker", age: 30 });


//Generic Interface
interface Resource<T> {
    uid: number,
    name: string,
    data: T,
}

type NumberResource = Resource<number[]>

const res1: Resource<object> = {
    uid: 1,
    name: "Jack",
    data: { order: 2 }
}
const res2: Resource<string[]> = {
    uid: 1,
    name: "Jack",
    data: ["John", "Jack"]
}
const res3: NumberResource = {
    uid: 1,
    name: "Jack",
    data: [12, 34]
}

let myname = "Harry"

//Genenric

const gener_1 = <T>(arr: Array<T>) => arr[0];

const gener_2 = <X, Y>(x: X, y: Y) => [x, y];

const gener_3 = <X, Y>(x: X, y: Y): [X, Y] => [x, y];

const gener_4 = <X, Y = number>(x: X, y: Y): [X, Y] => [x, y];

const run_gener_1 = gener_1([1, 2, 3]);

const run_gener_2 = gener_2(123, "abc");

const run_gener_3 = gener_3(123, "abc");

const run_gener_31 = gener_3<number | boolean, string>(123, "abc");

const run_gener_4 = gener_4<string | null>("abc", 123);

//Generic Extends

const gener_5 = (obj: { firstName: string; lastName: string }) => ({

...obj,

fullname: `${obj.firstName} ${obj.lastName}`

})

const gener_6 = <T extends { firstName: string; lastName: string }>(obj: T) => ({

...obj,

fullname: `${obj.firstName} ${obj.lastName}`

})

const gener_7_error = (employee: object) => ({

...employee,

uid: Math.floor(Math.random() * 100),

})

const gener_8_fix = <T>(employee: T) => ({

...employee,

uid: Math.floor(Math.random() * 100),

})

const run_gener_5 = gener_5({ firstName: "John", lastName: "Parker" });

const run_gener_6 = gener_6({ firstName: "John", lastName: "Parker", age: 30 });

const run_gener_7 = gener_7_error({ firstName: "John", lastName: "Parker", age: 30 });

const run_gener_8 = gener_8_fix({ firstName: "John", lastName: "Parker", age: 30 });

//Generic Interface

interface Resource<T> {

uid: number,

data: T,

}

type NumberResource = Resource<number[]>

const res1: Resource<object> = {

uid: 1,

data: { order: 2 }

}

const res2: Resource<string[]> = {

uid: 1,

data: ["John", "Jack"]

}

const res3: NumberResource = {

uid: 1,

data: [12, 34]

}