(二)typescript之类型检查

当前位置:

首页 > temp > JavaScript教程 >

(二)typescript之类型检查

一、基本类型检查

1.类型约束可以约束变量、函数参数、函数返回值

1 let age: number = 18;
2 age = 19;
3 function sum(a: number, b: number): number {
4   return a+b;
5 }
6 let num:number = sum(3, 4);

tips：使用快捷键f2可以重新命名函数，快捷键f12可以快速跳转至函数定义

2.基本数据类型和引用数据类型的类型约束

 1 // 数字类型
 2 let age: number = 18;
 3 // 布尔类型
 4 let flag: boolean = true;
 5 // 字符串类型
 6 let name: string = 'pengyuyan';
 7 // null
 8 let nullValue: null = null;
 9 // undefined
10 let undefinedValue: undefined = undefined;
11 // object
12 let obj: object = {};
13 // 数组类型
14 let nums1: number[] = [1,2,3];
15 let nums2: Array<number> = [3,4,5];

tips: undefined和null默认可以赋值给任意类型，若需要使用更严格的空类型检查，需要在tsconfig添加配置：strictNullChecks: true

3.其他常用类型

 1 // 联合类型
 2 let name: string | undefined = undefined;
 3 // void 约束函数返回值，表示该函数没有任何返回
 4 function print(): void {
 5   console.log(111)
 6 }
 7 // never 约束函数返回值，表示该函数永远不可能结束
 8 function throwError(msg: string): never {
 9   throw new Error(msg);
10 }
11 // 字面量类型 使用一个值进行约束
12 let gender: "男" | "女";
13 gender = "男";
14 let user: {
15   name: string
16   age: number
17 }
18 // 元祖类型（Tuple) 一个固定长度的数组，并且数组中的每一项的类型确定
19 let tu: [string, number];
20 tu = ["3", 4];
21 // any类型 any类型可以绕过类型检查，any类型的数据可以赋值给任意类型。
22 let data: any = "asaass";
23 let num: number = data;

4.函数相关约束

（1）定义函数类型

1 type GetUsernameFunction = (x:string,y:string)=>string;
2 let getUsername:GetUsernameFunction = function(firstName,lastName){
3   return firstName + lastName;
4 }

（2）函数重载

对于上图中的result1，我们理想得到的结果应该是这样的：如果两个参数都是数字类型，那么推断出的返回结果也应该是数字类型；两个参数是字符串时，同理。
但两个参数都是数字类型时，图中推断的返回值却是string | number类型，怎样让它能正确推断出返回值是number类型呢？这就需要借助函数重载来实现啦

 1 // 表示两个参数都是number类型时，返回值为number类型
 2 function combine(a: number, b: number): number;
 3 // 表示两个参数都是string类型时，返回值为string类型
 4 function combine(a: string, b: string): string;
 5 function combine(a: number | string, b: number | string)
 6 : number | string {
 7   if (typeof a === 'number' && typeof b === 'number') {
 8     return a * b;
 9   } else if (typeof a === 'string' && typeof b === 'string') {
10     return a + b;
11   }
12   throw new Error('a和b必须是相同的类型');
13 }
14 // 这样的话result1就推断出是number类型，result2则是string类型的
15 const result1 = combine(3, 3);
16 const result2 = combine('3', '3');

（3）可选参数

1 // 表示第2、3个参数可填可不填，且必须在参数列表的末尾
2 function sum(a: number, b?:number, c?:number) {
3 }
4 sum(1, 2, 3);
5 sum(1);

二、扩展类型

1.类型别名

 1 // type关键字 + 名字 = xxx
 2 type Gender = "男" | "女"
 3 type User = {
 4   name: string
 5   age: number
 6   gender: Gender
 7 }
 8 function getUsers(g:Gender):User[] {
 9   return [];
10 }
11

2.枚举

枚举通常用于约束某个变量的取值范围

字面量和联合类型配合使用，也可以达到同样的目标

但是使用字面量类型时会有以下的问题：

1 // 类型约束的位置，会产生重复的代码
2 let gender: 'man' | 'female'
3 gender = 'man';
4 function getUsers(g: 'man' | 'female') {
5    // do()
6 }

可使用类型别名解决以上问题

1 type Gender = 'man' | 'female'
2 let gender: Gender = 'man';
3 function getUsers(g: Gender) {
4  // do()
5 }
6

但是类型别名也会有另外的问题

问题一：逻辑名称和真实的值产生了混淆，会导致当修改真实值的时候，产生大量的修改

1 // man和female可能还会有很多种不同的取值，比如“男”“女”，“帅哥”“美女”，但它们的
2 // 逻辑含义其实都是一样的，但是赋值的时候只能赋真实的值，所以一旦真实值换种写法，
3 // 就会导致大量的真实值的更改
4 type Gender = 'man' | 'female'
5 let gender: Gender = 'man';
6 let gender1: Gender = 'man';
7 let gender2: Gender = 'female';

1 type Gender = '男' | '女'
2 let gender: Gender = '男';
3 let gender1: Gender = '男';
4 let gender2: Gender = '女';

问题二：类型不会进入编译结果无法查看Gender的具体值有哪些

可使用枚举解决以上问题

 1 // 修改真实值，只需要修改枚举值，不用修改大量真实值
 2 enum Gender {
 3   male = "男",
 4   female = "女",
 5 }
 6 let gender: Gender = Gender.male;
 7 let gender1: Gender = Gender.male;
 8 let gender2: Gender = Gender.female;
 9 // 可以直接访问枚举值
10 console.log('Gender: ', Gender);

枚举的规则

（1）枚举的值可以为字符串或者数字

 1 // 若第一个枚举值为数字，后面的值会自动自增
 2 enum Level {
 3   level1 = 2,
 4   level2,
 5   level3,
 6 }
 7 let l2: Level = Level.level2;
 8 let l3: Level = Level.level3;
 9 console.log('l2: ', l2);// 3
10 console.log('l3: ', l3);// 4
11 // 若没有设置值，则第一个默认值为0，后面值依次递增
12 enum Level {
13   level1, // 0
14   level2, // 1
15   level3, // 2
16 }
17

（2）字符串枚举和数字枚举的编译结果不同

 1 // 字符串枚举
 2 enum Gender {
 3   male = "男",
 4   female = "女",
 5 }
 6 console.log('Gender: ', Gender);
 7 // 数字枚举
 8 enum Level {
 9   level1 = 2,
10   level2,
11   level3,
12 }
13 console.log('Level: ', Level);

打印结果为：

使用枚举时需要注意：

尽量不要再一个枚举中既出现字符串字段，又出现数字字段

1 // ❌ 不建议
2 enum Level {
3   level1 = 2,
4   level2 = "a",
5 }

使用枚举时，尽量使用枚举的名称，而不使用真实的值

1 function getUsers(l: Level.level1) {
2 
3 }
4 getUsers(Level.level1);

来源：https://www.cnblogs.com/zhengrongbaba/p/14973655.html

栏目列表