【TypeScript】函数与接口

这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战

函数

（1）定义

函数类型：定义函数类型时，需要为形参添加类型注解，需要为函数返回值添加类型注解
- 如果没有返回值，则返回值类型为void
```
// 命名函数
function fun1(x: number, y: number): number {
  return x + y
}

// 匿名函数
let fun2 = function(x: number, y: number): number { 
  return x + y
}
```
- 所以fun2是没有类型的，它的类型是由右侧函数返回值推断出来的，所以可以手动添加类型
  
  =>表示：左边是输入函数的输入类型，右边表示函数的输出类型
```
let fun2: (x: number, y: number) => number = function(x: number, y: number): number => {
    return x + y
}
```

（2）参数

可选参数：可以在参数名后面添加?标识符来标识这个参数是可选的
默认参数：可以直接为参数赋值，让其有一个默认值

剩余参数：可以通过省略号...来接收剩余参数，表示没有接收的参数数组

剩余参数的参数名是...后面的名字，可以指定，它表示一个数组，可以在函数内使用这个数组

// firstName的默认值为 A ， lastName参数是可选的
function buildName(first: string = 'R', last?: string): string {
    if (last) {
        return first + '-' + last
    } else {
        return first
    }
}

// 剩余参数 ... 
function info(x: string, ...args: string[]): void {
    console.log(x, args)
}

（3）函数重载

函数重载是指：函数名相同，而参数类型不同、参数个数不同，相应的，函数内部的处理也不同

即，提供多个函数类型定义，当传入不同参数时，在函数重载列表中去查找对应的函数定义，并执行函数内响应的方法

/* 
	函数重载: 函数名相同, 而形参不同的多个函数
	需求: 我们有一个add函数，它可以接收2个string类型的参数进行拼接，也可以接收2个number类型的参数进行相加 
*/

// 重载函数声明
function add (x: string, y: string): string
function add (x: number, y: number): number
// 定义函数实现： 函数实现放在最后一个
function add(x: string | number, y: string | number): string | number {
    // 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 x + y
    if (typeof x === 'string' && typeof y === 'string') {
        return x + y
    } else if (typeof x === 'number' && typeof y === 'number') {
        return x + y
    }
}

console.log(add(1, 2))
console.log(add('a', 'b'))
// console.log(add(1, 'a')) // error

关于`{}`、`object`、`Object`

{}表示非null、非undefined的任意类型

let obj: {}

obj = 24
obj = 'Ruovan'

// 报错
obj = null
obj = undefined

object表示常规的JavaScript对象类型，非基础类型

let obj: object

obj = {}
obj = []

// 报错
obj = 24
obj = 'Ruovan'
obj = null
obj = undefined

Object表示同{}表现一致，区别是 Object 类型会对 Object 原型内置的方法（toString/hasOwnPreperty）进行校验
```
let obj: Object

obj = 24
obj = 'Ruovan'

// 报错
obj = null
obj = undefined
```

接口

（1）概念

使用接口interface来定义对象的类型
接口是对象的状态（属性）和行为（方法）的抽象（描述）

（2）写法

接口的首字母大写

定义的变量的属性类型必须和接口一致，否则就会报错

// 定义一个接口，通常接口首字母大写
interface Person {
    name: string;
    age: number;
}

// 定义一个变量，变量类型是 Person，且必须和 Person 内的类型一致
let person1: Person = {
    name: 'Ruovan',
    age: 24
}

（3）属性

当然，和接口不一致也是可以的，但是需要再对接口作一些额外的配置

确定属性：不需要添加标识符，且该属性必须有
可选属性：使用?标识符来定义可选属性，表示当前属性可有可无
只读属性：使用readonly标识符来定义只读属性，表示当前属性只能在创建时赋值，且赋值后不可更改

任意属性：使用[propName: string]定义任意属性，表示可以传递任何属性

其中属性key类型为string，值value类型可以定义为any
即：[propName: string]: any，可以接受任意类型的参数

注意：值value的类型需要同时符合确定属性和可选属性的类型，所以最好用any定义类型

// 定义接口： 属性名:类型
interface Person {
    name: string // 确定属性
    sex?: string // 可选属性 ?
    readonly idCard: number // 只读属性 readonly
    [propName: string]: any // 任意属性 [propName]
}

// 创建实例
// 类型检查器会查看对象内部的属性是否与Person接口描述一致, 如果不一致就会提示类型错误
const person1: Person = {
    name: 'ruovan', // 必须有
    sex: 'male', // 可有可无
    idCard: 123, // 只读，无法更改
    age: 24, // 任意属性
    isDead: false,
    address: 'earth'
}

（4）函数类型

接口也可以描述函数类型，需要给接口定义一个调用签名

这个签名是一个只有参数列表和返回值类型的函数定义
参数列表里的每个参数都需要名字和类型

// 函数接口
interface SearchFunc {
    (source: string, subString: string): boolean
}

// 使用接口
const mySearch: SearchFunc = function (source: string, sub: string): boolean {
    return source.search(sub) > -1
}

console.log(mySearch('abcd', 'bc'))

~~本人前端小菜鸡，如有不对请谅解~~