TypeScript(九) 为函数和函数参数定义类型

为函数和函数参数定义类型

函数类型

函数类型分成三种, 可选参数,默认参数和剩余参数

为函数定型

(1) 为函数类型定义

function add(arg1: number, arg2: number): number {
  return arg1 + arg2
}
//或者
const add = (arg1: number, arg2: number): number => {
  return arg1 + arg2
}

这里我们规定 arg1 和 arg2 都是数值类型的,最后相加得到结果也是数值类型的

如果忽略参数的类型,Typescript 会默认这个参数就是 any 类型,如果省略返回值类型,那 Typescript 会自己推断出返回类型,如果函数无返回值,那么 Typescript 会默认函数返回值为 void 类型

(2) 完整的函数类型

一个函数的定义包括 函数名,参数,逻辑和返回值。我们为一个函数定义类型时,完整的定义应该包括参数类型和返回值类型。

let add: ({ x: number, y: number }) => number
add = (arg1: number, arg2: number): number => arg1 + arg2
add = (arg1: string, arg2: string): string => arg1 + arg2 //error

(3) 使用接口定义函数类型

interface Add{
   (x:number,y:number):number
   //他里面就是个函数返回值是number
}
let add:Add = ((arg1:string,arg2:string)):string=> arg1+arg2; //erroe类型不对

我们通过接口的形式定义函数类型,而这个接口 Add 定义了这个结构是一个函数,这两个参数都是 number 类型,返回值也是 number 类型,当我们指定变量 add 类型为 add 时,再给 add 赋值就必须是一个函数,而且参数类型和返回值都要满足 Add,显然上面不满足,所以报错了

(4) 使用类型别名

type Add = (x: number, y: number) => number
let add: Add = (arg1: string, arg2: string): string => arg1 + arg2 //error

使用 type 关键字可以为原始值,元祖,以及任何类型起一个别名.

参数

(1) 可选参数

必选参数必须要放到可选参数之后

type Add = (x:number,y:number) = >number;
let add:Add = (arg1:number,arg2:number):number = >arg1+arg2;

add(1,2); //right
add(1,2,3); //error应该有两个参数,但实际上传了3个参数
add(1); //error应该有两个参数,但实际获得1个

有的时候参数不是必要的,所以会出现可选参数,这里和可选属性一样,只不过位置不一样

必填的参数必须要在可选参数的前面

type Add = (x: number, y?: number) => number //这样才对

如果顺序错了

type Add = (x?: number, y: number) => number //直接报错误

(2) 默认参数

Typescript 会自动识别参数的类型,要是不符合,则会报错误

const add = (x: number, y = 2) => {
  return x + y
}
add(1, '2') //这样会直接报错,因为默认值类型是数字

也可以显视给 Y 设置类型

const add = (x: number, y: number = 2) => {
  return x + y
}

(3) 剩余参数

也可以为剩余参数指定类型

const handleData = (arg1: number, ...arg: number[]) => {}

handleData(1, 'a') //error直接报错

函数重载

在 TypeScript 中重载通过一个函数指定多个函数类型定义:从而对函数调用的返回值进行检查.

function handleData(x:string):string[];
// 这就是重载指定类型为 string时,返回值为string类型的元素构成的数组
function handleData(x:number):string;
//当指定的参数类型为number时,返回值是string
function handleData(x: any): any { // 这个就是重载的内容了,他是实体函数,不算做重载的部分
  if (typeof x === "string") {
    return x.split("");
  } else {
    return x
      .toString()
      .split("")
      .join("_");
  }
}
handleData("abc").join("_");
handleData(123).join("_"); // error 类型"string"上不存在属性"join"
handleData(false); // error 类型"boolean"的参数不能赋给类型"number"的参数。

第二个之所以错 是因为他调用了数组里面的 join 方法。而字符串无法调用这个方法

总结

1.基本类型 2.接口类型 3.类型别名 4.可选参数 5.默认参数 6.剩余参数 可以用…参数名来获取任意多个参数,获取的是一个数组


文章作者: 雾烟云
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 雾烟云 !
  目录