TypeScript笔记

Posted 2023-02-03 往事，只是隔岸的风景

注解函数

函数需要注解的部分其实只有 参数值 和 返回值

let checkFunc = (str: string): boolean => 
    return str[\'includes\'](\'a\')

checkFunc(\'abc\')

 

使用接口注解函数

使用接口定义函数类型，描述的是一个参数列表 和 返回值类型， 参数列表里每个参数都需要名字和类型

interface CheckFuncConfig 
    // 参数列表    // 返回值
    (str: string): boolean


let checkFunc: CheckFuncConfig = (str) => 
    return str[\'includes\'](\'a\')

checkFunc(\'abc\')

 

可选参数

就像接口中可选属性一样，函数也存在可选参数

let people: (name: string, age?: number) 
    // ...

 

参数名和接口定义的可以不一样

对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配，但是会逐个检查，要求对应位置上的参数类型是一样的。

就像下面代码块，上面接口定义的字段是str，但也可以接受成其他字段，比如sss

interface CheckFuncConfig 
     // 参数列表    // 返回值
    (str: string): boolean


let checkFunc: CheckFuncConfig = (sss) => 
    return sss[\'includes\'](\'a\')

checkFunc(\'abc\')

 

重载

在 js 里，函数时常会有这种场景：根据传入不同的参数而返回不同类型的数据。

看一下如下例子：传入的如果是字符串，返回参数在名称列表的索引；传入的如果是数字，返回名称列表这个索引位置的数据

let nameList = [\'Jane\', \'Sasa\', \'Aba\']

function getName(name): any
    if(typeof name === \'number\')
        return nameList[name]
     else if(typeof name === \'string\')
        return nameList.indexOf(name)
    


console.log(getName(\'Sasa\')) // 1
console.log(getName(1)) // Sasa

接下来讨论怎么能在类型系统中，表现这种情况：

类型推断更适用于 参数只有一种类型的情况

在这个例子中，参数有多种参数类型。这时需要用到 函数重载。下面使用这种方法重写上面的例子：

let nameList = [\'Jane\', \'Sasa\', \'Aba\']

function getName(name: string): number
function getName(name: number): string
function getName(name): any
    if(typeof name === \'number\')
        return nameList[name]
     else if(typeof name === \'string\')
        return nameList.indexOf(name)
    


console.log(getName(\'Sasa\')) // 1
console.log(getName(1)) // Sasa

上面多了两行代码。为getName函数提供两个函数类型定义，每个函数类型定义就是一个重载，这样组成了一个重载列表，编译器会在其中寻找匹配的类型注解。