TypeScript实用技巧

1. is关键字

is关键字可用来判断并限定值的类型，比如：

function user0(name: any): name is string {
   
  return name === 'lili'
}
function user1(name: any): boolean {
    
  return name === 'lili'
}
function getUserName(name: string | number) {
   
  if(user0(name)) {
   
    console.log(name)
    console.log(name.length)
    /**
     * 若换成user1(name) boolean就会报错
     * Property 'length' does not exist on type 'string | number'.
     * Property 'length' does not exist on type 'number'.
     */
  }
}
getUserName('lili')

is关键字和boolean的区别大概就在于is可以限定值的类型，类似于boolean+类型断言的作用

2. 可辨识联合类型

为可辨识的特征创建适合的联合类型

interface Info {
   
    username: string
}
// bad
interface UserAction {
   
    id?: number
    action: 'create' | 'delete'
    info: Info
}

// good
type UserAction = {
   
    id: number
    action: 'delete'
    info: Info
} |
{
   
    action: 'create'
    info: Info
}
const UserReducer = (userAction: UserAction) => {
   
    switch (userAction.action) {
   
        case 'delete':
            console.log(userAction