Typescript基础

Coding

1.1 ts基本类型及用法

1
2
3
4
5
6
7
8
const flag: boolean = true;

const flag: number[] = true;

enum colors {
    red = 0,
    blue = 1
}

1.2 ts特殊类型及用法

  • any: 任意类型，TS忽略类型检查，应当避免使用。
  • unknown: 所有类型都可以分配给unknown，必须判断类型后才可以继续使用。
  • never:用于永远不可能的场景， 用于错误检查或者收敛条件类型。

unknown用法

1
2
3
4
5
6
7
8
9
10
11
12
// eg1
const a: unknown = 1;
const a2: number = a;   //error: Type 'unknown' is not assignable to type 'number'.
const a3: number = typeof a === 'number' ? a : 0;

// eg2
function getEval(){
    return 'eval'
}
const eval: unknown = getEval();
(eval as string).toString();
(eval as string).toLowerCase();

1.3 断言

断言关键字有 !、 as、 <>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// eg: !
let num: number;
const init = () => num = 1;
init();
console.log( num * 2 ) //error: fixed by `let num!: number`
console.log( num! * 2 )

// eg: as
const box = document.querySelector('checkbox') as HTMLInputElement;
console.log(box.checked);

const start = { code: 200 } as const;
start.code = 300; // error: cannot assign to 'code' because it is a read-only property

// eg: <>
const button = document.querySelector('button');
console.log(<HTML>)

1.4 类型守卫

is关键字

1
2
3
4
5
6
7
class A {}
class B {}
const list = [new A(), new B(), new B()];
function isA(item: A|B): item is A {
    return item instanceof A
}
cosnt result = list.filter(item => isA(item))

查找类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface initProps{
    id: number;
    name: string;
}

interface user extends initProps{
    age: number;
    unit: string;
    grade: number;
}

interface student {
    name: user['name'],
    grade: user['grade'],
}

in操作符

1
2
3
4
5
6
7
8
interface User {
    age: number;
    name: string;
}

type keyInUser = {
    [k in 'name' | 'age']: User[k];
}

typeof & keyof 关键字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const option = {
    time: '2018-03',
    value: 77
}

// eg: typeof
type OptionValueType = typeof option;
const otherOption: OptionValueType = {
    time: '2012-03',
    value: 23
}

// eg: keyof
type OptionKeyType = keyof typeof option;

function getOptionVal<T extends OptionKeyType>(key: T): typeof option[T] {
    return option[key]
}
const getOptionVal2 = <T extends OptionKeyType>(key: T): typeof option[T]{
    return option[key]
}

type Validator<T> = {
    [K in keyof T]?: null extends T[K]? someFunc<T[K] | null | undefined> : someFunc<T[K]>
}

type ValTypeToString<T> = {
    [key in keyof T]: string
}

const optionString: ValTypeToString<OptionValueType> = {
    time: '2012-03',
    value: '23'
}

2.1 泛型常用命名

  • T(Type): 最常用类型参数
  • K(Key): 对象的键类型
  • V(Value): 对象的值类型
  • P(Property): 对象的属性类型
  • R(Result): 类型推导的结果类型

2.2 泛型常用关键字及操作符用法

  • & 表示类型交集
  • | 表示类型并集
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
interface PersonType {
    age: number;
    address: string;
}

interface UserType<T> {
    unit: string;
    profile: T;
}

const user: UserType<PersonType>  = {
    unit: '北极研究所',
    profile: {
        age: 23,
        address: '北极'
    }
}

type UserType1 = Pick<UserType<PersonType>, 'unit'> 
// 等于 ： type UserType1 = {
//     unit: string;
// }

type UserType2 = Partial<UserType<PersonType>>
// 等于 ： type UserType2 = {
//     unit?: string;
//     married?: boolean;
//     hasChild?: boolean;
//     profile?: PersonType;
// }

type UserType3 = Omit<UserType2, 'unit' | 'married'>
// 等于 ： type UserType3 = {
//     hasChild?: boolean;
//     profile?: PersonType;
// }

type UserType4 = Exclude<'unit' | 'married' | 'hasChild' | 'profile', 'unit' | 'married'>
// 等于 ： type UserType4 = "hasChild" | "profile"


type UserType5 = Extract<'unit' | 'married' | 'hasChild' | 'profile', 'unit' | 'married'>
// 等于 ： type UserType5 = "unit" | "married"