一、类型注解(type annotation)、类型推断(type inferrence)
let count: Number;
count = 123;
这段代码就是类型注解,意思是: Number告诉代码,我们的count变量就是一个数字类型,这就叫做类型注解。
let count1 = 123; //Number
let count2 = '123'; //String
这时候并没有显示的告诉你变量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就会报错。
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});
三、数组类型的定义
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…
仅供个人学习和记录