3、TypeScript 类型注解、函数参数及返回类型和数组元祖

498 阅读4分钟

一、类型注解(type annotation)、类型推断(type inferrence)

let count: Number;
count = 123;

这段代码就是类型注解,意思是: Number告诉代码,我们的count变量就是一个数字类型,这就叫做类型注解

image.png

let count1 = 123; //Number
let count2 = '123'; //String

image.png

image.png

这时候并没有显示的告诉你变量count1是一个数字类型,但是直接赋值为number类型,会发现 TypeScript 自动把变量注释为了number(数字)类型,也就是说它是有某种推断能力的,通过你的代码 TS 会自动的去尝试分析变量的类型。这就是类型推断。

二、函数参数和返回类型定义

1、函数有返回值时定义方法

function getTotal(one: number, two: number) {
    return one + two;
  }
const total = getTotal(1, 2);

这个函数看似没有什么问题,其实它有一个小坑,就是我们并没有定义getTotal的返回值类型,虽然TypeScript可以自己推断出返回值是number类型。但是如果写成return one + two + '',这时候total的值就不是number类型了,但是不会报错。

const total: Number = getTotal(1, 2); 
function getTotal(one: number, two: number): Number {
  return one + two;
}

const total = getTotal(1, 2);

以上两种方法都可以做到,但是推荐第二种,更加严谨。

2、函数无返回值时定义方法

有时候函数是没有返回值的,比如现在定义一个testLog的函数,这个函数只是简单的log打印,并没有返回值。写法如下:

function testLog():void {
    console.log("hello world");
  }

如果这时在函数中有return的话,ts就会报错。

image.png

3、never返回值类型

如果一个函数是永远也执行不完的,就可以定义返回值为never。比如执行的时候,抛出了异常,这时候就无法继续执行。如下:

function errorFuntion(): never {
    throw new Error();
    console.log("Hello World");
  }

还有死循环也是never

4、函数参数为对象(解构)时

当一个函数的参数是对象时,我们如何定义参数对象的属性类型。

  function getTotal({one, two}) {
    return one + two;
  }
  
  const total = getTotal({one:1, two:2});

很多人第一时间想到的就是下面这种写法:

  function getTotal({one:number, two:number}) {
    return one + two;
  }
  
  const total = getTotal({one:1, two:2});

ts会直接报错,说明这种写法是错误的。正确的写法如下:

  function getTotal({one, two}:{one:number, two:number}): number{
    return one + two;
  }
  
  const total = getTotal({one:1, two:2});

image.png

三、数组类型的定义

1、一般数组类型定义

  const Arr1 = [1, 2, 3]; //Arr1为number类型,类型推断得出

  const Arr2: string [] = ['1', '2', '3']; //Arr2为string类型,类型注释得出

  const Arr3: undefined[] = [undefined, undefined]; //所有数组元素必须为undefined

  const Arr4: (number | string)[] = [1, '2', 3]; //当数组中同时有多个类型时,可用 ( | )[]的形式

2、数组中对象类型定义

真实的项目中数组中一定会有对象的出现。那对于这类带有对象的数组定义就稍微麻烦点了。如下:

  const students: { name: string, age: Number }[] = [
    { name: "小明", age: 18 },
    { name: "小红", age: 17 },
  ];

当对象中参数很多时,这种写法就相对比较麻烦了,TypeScript 为我们准备了一个概念,叫做类型别名(type alias)。

定义一个类型别名,定义别名的时候要以type关键字开始。

  type studentObj = { name: string, age: Number };

  const students: studentObj[] = [
    { name: "小明", age: 18 },
    { name: "小红", age: 17 },
  ];

当然,如果用类进行定义也是可以实现的,如下:

  class studentObj { 
      name: string;
      age: Number;
    };

  const students: studentObj[] = [
    { name: "小明", age: 18 },
    { name: "小红", age: 17 },
  ];

四、元组的使用的类型约束

TypeScript 中提供了元组的概念,这个概念是JavaScript中没有的。可以把元组看成数组的一个加强,它可以更好的控制或者说规范里边的类型。

数组注解也有缺点,比如:

  const daming: (string | number)[] = ["id", "name", 28];
  const daming: (string | number)[] = ["id",28, "name"];

如果我们随意更改数组元素的位置排序,ts是不会报错的,但这可能就会影响程序中某些地方,出现一些问题。

元组就可解决上面出现的问题,写法如下:

  const daming: [string, string, number] = ["id", "name", 28];

这时改变某个参数的位置,ts就会报错。

学习日期:2021/12/28

视频参考www.bilibili.com/video/BV1qV…

文档参考jspang.com/detailed?id…

仅供个人学习和记录