TS入门014ts高级类型下

可识别联合

  • a
  • TS可以通过一个特征值来区分类型
    • 在 Redux 的 Action 中经常用到

我们需要 N 选一

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
interface Props {
    action:'create'|'update';
    id?:number;
    name:string
}

// 创建的时候 
{
    action:'create',
    // 创建时没id
    name:'aaa'
}

// 更新的时候 
{
    action:'update',
    // 更新时必须有id
    id:1,
    name:'bbb'
}

// 此时你可以这样

type Props2 = {
    action:'create';
    name:string;
} | {
    action:'update';
    id:number;
    name:string;
}

function fn(a:Props2){
    if(a.action === 'create'){
        console.log(a.name)
    }else{
        console.log(a.id)
    }
}

可识别联合的前置条件

  • 必须有一个或多个共有字段 如上面的 action
  • 共有类型必须是可以穷举的

Redux 的 Actoin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
type Action = {
    type:'add',payload:number;
} | {
    type:'delete',payload:string;
} | {
    type:'update',payload:Date;
}


function reducer(state:any,actoin:Action){
    switch(actoin.type){
        case 'add':
            console.log(actoin.payload) // number
            break
        case 'delete':
            console.log(actoin.payload) // string
            break
        case 'update':
            console.log(actoin.payload) // Date
            break
    }
}

参考代码 ts014