TypeScript+Vue3.0笔记
一、什么是TypescriptJavaScript的超集，可以编译为JavaScript，添加了类型系统的JavaScript，可以适用与任何规模的项目。TypeScript特性类型系统从TypeScript的名字就可以看出来， [类型] 是其最核心的特性。我们知道，JavaScript是一门非常灵活的编程语言：它没有约束类型，一个变量可能初始化时是字符串类型，过一会又被赋值为数字类型由于隐式类型
TS已更完——5.15
文章目录
一、什么是Typescript
JavaScript的超集，遵循最新的 ES6、Es5 规范。TypeScript 扩展了 JavaScript的语法，可以编译为JavaScript，添加了类型系统的JavaScript，可以适用与任何规模的项目。
TypeScript 是由微软开发的一款开源的编程语言。TypeScript 更像后端 java、C#这样的面向对象语言可以让 JS开发大型企业项目。
谷歌也在大力支持 Typescript 的推广，谷歌的 angular2.x+就是基于 Typescript 语法。
最新的 Vue 、React 也可以集成 TypeScript。
TypeScript特性
类型系统
从TypeScript的名字就可以看出来， [类型] 是其最核心的特性。
我们知道，JavaScript是一门非常灵活的编程语言：
- 它没有约束类型，一个变量可能初始化时是字符串类型，过一会又被赋值为数字类型
- 由于隐式类型转化的存在，有的变量很难在运行前就确定
- 基于原型的的面向对象编程，使得原型上的属性或方法可以在运行时被修改。
- 函数是JavaScript中的一等公民，可以赋值给变量，也可以当做参数或返回值
这种灵活性就像一把双刃剑，一方面使得JavaScript蓬勃发展，无所不能，从2013年开始就一直蝉联最普遍使用的编程语言排行榜冠军；另一方面也使得的代码质量参差不齐，维护成本高，运行错误多。
而TypeScript的 类型 系统，很大程度弥补JavaScript的缺点。
TypeScript是静态类型
类型系统按照 [类型检查的时机] 来分类，可以分为动态类型和静态类型。
动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。JavaScript是一门解释型语言，没有编译阶段，所以他是动态类型，以下这段代码在运行时才会报错：
let foo = 1；
foo.split(' ');
//Uncaught TypeError: foo.split is not a function
//运行时报错：foo.split不是一个函数，造成线上bug
静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。TypeScript在运行前需要先编译为JavaScript，而在编译阶段就会进行类型检查，所以 TypeScript是静态类型 ，这段TypeScript代码在编译阶段就会报错：
let foo = 1；
foo.split(' ');
//Property 'split' does not exist on type 'number'
//编译时报错：数字没有split方法，无法通过编译
你可能会奇怪，这段TypeScript代码看上去和JavaScript没有什么区别呀。
没错！大部分JavaScript代码都只需要经过少量的修改（或者完全不用修改）就变成了TypeScript的代码，这得益于TypeScript强大的 类型推论，即使不去手动声明变量 foo 的类型，也能在变量初始化的时候自动推论出他是一个 number 类型。
完整的TypeScript代码是这样的：
let foo: number = 1;
foo.split(' ');
//Property 'split' does not exist on type 'number'
//编译时报错：数字没有split方法，无法通过编译
TypeScript是弱类型
类型系统按照 [是否允许隐式类型转换] 来分类，可分为强类型和弱类型。
以下这段代码不管是在JavaScript还是TypeScript中都是正常运行的，运行时数字1会被隐式类型转化为字符串 ‘1’ ，加号 ‘+’ 被识别为字符串拼接，打印结果为 ‘11’:
console.log(1 + '1');
//打印字符串 '11'
TypeScript是完全兼容JavaScript的，他不会修改JavaScript运行时的特性，他们都是 弱类型语言。
二、安装并编译TypeScript
安装TypeScript需要NodeJS环境，如果电脑没有npm命令，可以去官网下载并安装NodeJS
官网地址：Node.js (nodejs.org)
TypeScript安装命令
npm install -g typescript
# 通过tsc --version可以查看版本号以确保是否安装成功
安装以后编译ts文件很简单，我们在电脑上新建一个目录code，新建一个文件index.ts,然后在当前目录下输入：
tsc index.ts
编译完之后会在当前目录下输出一个index.js文件，则编译成功。如果想指定输出目录：
tsc --outFile ./js/index.js index.ts
三、基本的数据类型
布尔值
布尔值是最基础的数据类型，在TypeScript中，使用boolean定义布尔值类型：
let isDone:boolean = false;
数值
使用number定义数值类型：
let mynum:number = 1;
字符串
使用string定义字符串类型：
let mystring:string = 'TypeScript字符串'
//模板字符串,要用反引号括起来
let sentence:string = `Hello,This is ${mystring}.`;
//也可以使用js的加号 + 语法
let sentence2:string = 'Hello,This is'+mystring;
空值
JavaScript没有空值(void)的概念，在TypeScript中，用void表示没有任何返回值的函数：
function alertName():void{
alert('my name is tom');
}
声明一个void类型的变量没有什么用，因为你只能将它赋值为undefined和null
let unsable:void = undefined;
Null和Undefined
在TypeScript中，默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。可以使用null和undefined来定义这两个原始数据类型：
let n:null = null;
let u:undefined = undefined
数组
TypeScript像JavaScript一样可以操作数组元素。有两种方式定义数组。
第一种是元素类型后加 []
let list:number[] = [1,2,3];
第二种是使用数组泛型，Array<元素类型>
let list:Array<number> = [1,2,3];
元组
元组（Tuple）类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。但定义变量时类型的顺序要一致。
let x : [string,number];
x = ['hello',10];
//正常运行
x = [20,'HELLO'];
//报错：不能将类型“number”分配给类型“string”。ts(2322)；不能将类型“string”分配给类型“number”。ts(2322)
当访问一个已知索引的元素，会得到正确的类型：
console.log(x[0].substr(1)); // 正常运行
console.log(x[1].substr(1)); // 报错： 'number' does not have 'substr'
当访问越界元素时：
x[3] = 'World';
//报错：不能将类型“"World"”分配给类型“undefined”。ts(2322)长度为 "2" 的元组类型 "[string, number]" 在索引 "2" 处没有元素。ts(2493)
Object
object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
使用object类型，就可以更好的表示像Object.create这样的API。例如：
declare function create(o:object|null):void;
create({pro:0});
create(null);
create(undefined);
create();//报错：应有 1 个参数，但获得 0 个。ts(2554)
create(42);//报错：类型“number”的参数不能赋给类型“object”的参数。ts(2345)
create("string"); //报错： 类型“string”的参数不能赋给类型“object”的参数。ts(2345)
create(false); //报错：类型“boolean”的参数不能赋给类型“object”的参数。ts(2345)
四、任意值(Any)
任意值(Any)用来表示允许赋值为任意类型。
如果是一个普通类型，在赋值过程中改变类型是不被允许的：
let myFavoriteNum:string = 'seven';
myFavoriteNum = 7;
//报错：不能将类型“number”分配给类型“string”。ts(2322)
但如果是any类型，则允许被赋值为任意类型。
let myFavoriteNum:any = 'seven';
myFavoriteNum = 7;
在任意值上访问任何属性都是允许的：
let anything: any = 'hello';
console.log(anything.Myname);
console.log(anything.myname.length);
也允许调用任何方法:
let anything:any = 'heloo'
anything.setName('Tom');
anything.setName('Allen').sayHello();
anything.Myname.setFirstName('Cat');
所以，声明一个任意值(any)变量后，对它的任何操作，返回的内容的类型都是任意值。
五、类型推论
如果没有明确的指定类型，那么TypeScript会依照类型推论（Type Inference）的规则推断出一个类型。
以下代码虽然没有指定类型，但在编译时会出错：
let myFavoriteNum = 'seven';
myFavoriteNum = 7;
//报错：不能将类型“number”分配给类型“string”。ts(2322)
事实上，它等价于：
let myFavoriteNum:string = 'seven';
myFavoriteNum = 7;
//报错：不能将类型“number”分配给类型“string”。ts(2322)
TypeScript在没有明确指定变量类型时，会对变量的类型进行推测，这就是类型推论。
如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any类型而完全不被类型检查：
let myFavoriteNum;
myFavoriteNum = 'seven';
myFavoriteNum = 7;
六、联合类型
联合类型(Union Types)表示取值可以为多种类型中的一种。
举个例子
let myFavoriteNum:string|number;
myFavoriteNum = 'seven';
myFavoriteNum = 7;
从代码可以看出来联合类型使用 |来分隔每一个类型。
这里的 let myFavoriteNum:string|number;的含义是允许myFavoriteNum为string和number类型，而不能是其他类型。
比如下面这个就会报错：
let myFavoriteNum:string|number;
myFavoriteNum = true;
//报错：不能将类型“boolean”分配给类型“string | number”。ts(2322)
联合类型的属性或方法
当TypeScript不确定一个联合类型的变量到底是哪个类型的时候，我们 只能访问此联合类型的 共有属性或共有方法。
function getLength(something:number|string):number{
return something.length;
}
//报错:类型“string | number”上不存在属性“length”。类型“number”上不存在属性“length”。ts(2339)
上例中，因为number类型不存在length属性，所以会报错，正确的使用可以这样：
function getLength(something:number|string):string{
return something.toString();
}
//`toString()`方法是number和string类型的共有方法。
联合类型变量在被赋值的时候，会根据类型推论的推断变量的类型：
let myFavoriteNum:number|string;
myFavoriteNum = 'seven';
console.log(myFavoriteNum.length);
//正常运行
myFavoriteNum = 7;
console.log(myFavoriteNum.length);
//报错：类型“number”上不存在属性“length”。ts(2339)
上例中，第二行的myFavoriteNum被推断成了 string型，访问 length属性就不会报错
而第四行的myFavoriteNum被推断为number型，访问length属性就会报错
七、接口
在TypeScript中，我们使用 interface 来定义一个接口类型的对象。
什么是接口
在面向对象语言中，接口是一个重要的概念，它是对行为的抽象，而具体的行为则需要类去实现。
typesc的核心原则之一是对之所具有的结构进行类型检查。有时候被称作“鸭式辨型法”或者“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
举个例子
interface Person{
name:string;
age:number;
sex:string;
};
let Allen:Person = {
name:'Allen',
age:28,
sex:'male'
};
//正常运行
上面例子中，我们定义一个接口Person，接着定义一个变量 Allen，他的类型是Person。这样，我们就约束了Allen的形状必须是和接口Person一致，如果少了XX属性就会报错，同理，多了未定义的XX属性也会报错：
interface Person{
name:string;
age:number;
sex:string;
};
let Tom:Person = {
name:'Tom',
age:18,
};
//Tom报错：类型 "{ name: string; age: number; }" 中缺少属性 "sex"，但类型 "Person" 中需要该属性。ts(2741) index.ts(23, 2): 在此处声明了 "sex"。
//原因是Tom少了sex属性
let Ketty:Person = {
name:'Ketty',
age:20,
sex:'female',
grade:12
}
//报错：不能将类型“{ name: string; age: number; sex: string; grade: number; }”分配给类型“Person”。对象文字可以只指定已知属性，并且“grade”不在类型“Person”中。ts(2322)
//原因是Ketty多了grade属性
定义Tom变量却少了sex属性就会报错，同理，多了未定义的grade属性也会报错。
可见，赋值的时候，变量的结构必须和接口的结构保持一致。
可选属性
有时候我们希望不要完全匹配一个接口的所有结构，那么我们可以用可选属性(在定义接口时，属性后加上 ?关键字)：
interface Person{
name:string;
age:number;
sex?:string; //可选属性 sex
};
let Allen:Person = {
name:'Allen',
age:28,
sex:'male'
};
//正常运行
let Tom:Person = {
name:'Tom',
age:18,
};
//正常运行
任意属性
有时候我们希望一个接口允许有任意的属性，可以用 [属性名:类型名]定义任意属性
interface Person{
name:string;
age?:number;
[propName:string]:any;
};
let Allen: Person = {
name:'Allen',
gender:'female' //添加gender属性是允许的
};
let Tom:Person = {
name:'Tom',
gender:'male',
gender2:'male',
ID:123,
123:'asdasd',
isDone:false
}
//添加任意多个属性且类型不一致也是允许的，有点违背接口的初衷
使用 [propName:string]:any;定义了任意属性取string类型的值。
任意属性有点违背接口的初衷，既然已经定义了接口的结构，就不能任意去增加修改他的结构了
只读属性
有时候我们希望对象中一些字段只能在创建时被赋值，后续只能可读不可写，那么可以用 readonly关键字定义只读属性：
interface Person{
readonly id:number;
name:string;
age:number;
};
let Tom:Person = {
id:12345,
name:'Tom',
age:19
}
Tom.age = 29 //不报错
Tom.id = 12345//报错：无法分配到 "id" ，因为它是只读属性。ts(2540)
上述例子中id属性被设置为只读属性，当再次赋值时就会报错。
八、数组
数组是存放多个元素的集合
最简单的方法是使用 [ 类型 + 方括号] 来表示数组：
let fibonacci:number[] = [1,1,2,3,5,8,13];
数组中的项不允许出现其他的类型：
let fibonacci:number[] = [1,'1',2,3,5,8,13];
//报错：不能将类型“string”分配给类型“number”。ts(2322)
数组的一些方法的参数也会根据数组在定义时约定的类型进行限制：
let fibonacci:number[] = [1,1,2,3,5,8,13];
fibonacci.push(21);
//正常运行
fibonacci.push('34');
//报错：类型“string”的参数不能赋给类型“number”的参数。ts(2345)
//原因是push()方法只允许传入number类型的参数，而'34'是字符串字面量类型，后续章节会介绍
也可以指定一个 any 类型数组：
let list:any[] = ['Tom',18,'male',true,{website:'https://wangwangyz.site'}];
九、函数01
函数声明
在JavaScript中，有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expression)：
//函数声明(Function Declaration)
function sum(x,y){
return x+y;
}
//函数表达式(Function Expression)
let mySum = function (x,y){
return x+y;
};
一个函数有输入和输出，要在TypeScript中对其进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义比较简单：
function sum(x:numebr,y:number):number{
return x+y;
}
注意，输入多余(或少于)、类型不匹配的参数，是不被允许的：
function sum(x:numebr,y:number):number{
return x+y;
}
sum(1,2,3)//报错：应有 2 个参数，但获得 3 个。ts(2554)
sum(1)//报错：应有 2 个参数，但获得 1 个。ts(2554)
sum('srt',1)//报错：类型“string”的参数不能赋给类型“number”的参数。ts(2345)
函数表达式
如果我们现在写一个对函数表达式(Function Expression)的定义，可能会写成这样：
let mysum = function(x:number,y:number):number{
return x + y;
};
这是可以通过编译的，不过事实上，上面的代码只对 等号右侧的匿名函数进行了类型定义，而等号左边的mysum，是通过赋值操作进行类型推论而推断出来的。如果需要我们手动给mysum添加类型，则是这样：
//这里用的是类型推断
//let mysum = function(x:number,y:number):number{
// return x + y;
//};
//如果是手动指定类型，应该是这样
let mysum:(x:number, y:number) => number = function (x:number,y:number):number{
return x + y;
};
注意不要混淆了TS中的 => 和ES6中的 =>.
在TypeScript的类型定义中，=>用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。
在ES6中，=>叫做箭头函数，应用十分广泛，可以参考ES6的箭头函数：参考链接：阮一峰ES6箭头函数教程
用接口定义函数的形状
我们也可以使用接口的方式来定义一个符合某个形状的函数：
interface SearchFunc{
(source:string,subString:string):boolean;
}
let mySearchFunc:SearchFunc;
mySearchFunc = function(source:string,subString:string){
return source.search(subString) !== -1;
}
let mySearchFunc1:SearchFunc;
mySearchFunc1 = function(source:number,subString:string){
return 1==1;
}//报错：不能将类型“(args1: number, args2: string) => boolean”分配给类型“SearchFunc”。参数“args1”和“source” 的类型不兼容。不能将类型“string”分配给类型“number”。ts(2322)
let mySearchFunc2:SearchFunc;
mySearchFunc2 = function(source:string,subString:string){
return 1;
}//报错：不能将类型“(args1: string, args2: string) => number”分配给类型“SearchFunc”。不能将类型“number”分配给类型“boolean”。ts(2322)
采用函数表达式接口定义函数的方式是，对等号左侧进行类型限制，可保证以后对函数名赋值时保证 参数个数、参数类型、返回值类型 不变。
十、函数02
可选参数
前面提到，多余的(或者少于要求的)参数，是不允许的。那么如何定义可选的参数呢？
与接口中的可选属性类似，我们用关键字 ?表示可选的参数：
function buildName(firstName:string, lastName?:string){
if(lastName){
return firstName + " " + lastName;
}else {
return firstName;
}
}
let tomcat = buildName("Tom", "cat");
let tom = buildName(undefined, "Tom");
需要注意的是，可选参数必须接在必须参数的后面，换句话说，可选参数后面不允许再出现必须参数了。(这一点和Python很像)
function buildName(firstName?:string, lastName:string){//报错：必选参数不能位于可选参数后。ts(1016)
if(lastName){
return firstName + " " + lastName;
}else {
return firstName;
}
}
let tomcat = buildName("Tom", "cat");
let tom = buildName(undefined, "Tom");
参数默认值
在ES6中，我们允许给函数的参数添加默认值，TypeScript会将添加了默认值的参数识别为可选参数：
function buildName(firstName:string, lastName:string = 'Cat'){
return firstName + " " + lastName;
}
let tomcat = buildName("Tom", "ccccat");
let tom = buildName("Tom");
此时就不受 [可选参数必须接在必需参数后面] 的限制了：
function buildName(firstName:string = 'Tom', lastName:string){
return firstName + " " + lastName;
}
let tomcat = buildName("Tom", "cat");
let tom = buildName(undefined, "Tom");
十一、函数03
ES6中，可以使用 ...rest 的方式获取函数中的剩余参数(rest参数):
function push(array, ...items){//参数 "array" 隐式具有 "any" 类型
items.forEach(function(item){
array.push(item);
});
}
let a :any[] = [];
push(a,1,2,3,4);
事实上，items 是一个数组，所以我们可以用数组的类型来定义它：
function push(array:any[], ...items:any[]){
items.forEach(function(item){
array.push(item);
});
}
let a = [];
push(a,1,2,3,4);
注意，rest参数只能是最后一个参数，关于rest参数，可以参考：阮一峰ES6 rest参数详解
重载
重载允许一个函数接收不同数量或类型的参数，并做不同处理。
比如，我们需要实现一个函数reverse，输入数字123的时候，输出反转的数字321，输入字符串hello的时候，输出反转的字符串olleh。
利用联合类型，我们可以这么做：
function reverse(x: number|string):number | string | void{
if(typeof x === 'number'){
return Number(x.toString().split('').reverse().join(''));
}else if (typeof x === 'string'){
return x.split('').reverse().join('');
}
然而这样有个缺点，就是不能够精确地表达，输入为数字的时候，输出应该也为数字，输入为字符串的时候，输出也应该为字符串。
这时，我们可以使用 重载 定义多个 reverse的函数类型：
function reverse(x:number):number;
function reverse(x:string):string;
function reverse(x:number|string):number|string|void{
if(typeof x === 'number'){
return Number(x.toString().split('').reverse().join(''));
}else if (typeof x === 'string'){
return x.split('').reverse().join('');
}
}
reverse(123) // function reverse(x: number): number (+1 overload)
reverse('12345') // function reverse(x: number): number (+1 overload)
上例中，我们重复定义了多次函数reverse，前两次都是函数定义，最后一次是函数实现。在编辑器的代码提示中，可以正确看到前两个提示。
注意，TypeScript中会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。
十二、类型断言01
基本语法、将一个联合类型断言为其中一个类型。
类型断言(Type Assertion)可以用来手动指定一个值的类型
通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。
——————引自基础类型 · TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)
基本语法
有两种表达：
值 as 类型
<类型>值
在tsx语法中（React的jsx语法的ts版）中必须使用 值 as 类型表示类型断言。
故建议大家在使用类型断言时，统一使用 值 as 类型这样的语法。
将一个联合类型断言为其中一个类型
之前提过，当TypeScript中不确定一个联合类型的变量到底是哪个类型的时候，我们 只能访问联合类型所有类型的共有属性或方法：
interface Cat{
name:string;
run():void;
}
interface Fish{
name:string;
swim():void;
}
function getName(animal:Cat|Fish):string{
return animal.name;
//正常运行
}
function getName(animal:Cat|Fish):string{
return animal.run();
//报错：类型“Cat | Fish”上不存在属性“run”。类型“Fish”上不存在属性“run”。ts(2339)
}
而有时候，我们确实需要在还不确定类型的时候就访问其中一个类型的属性或者方法，比如：
interface Cat{
name:string;
run():void;
}
interface Fish{
name:string;
swim():void;
}
function isFish(animal:Cat|Fish):boolean{
if(typeof animal.swim === 'function'){
return true;
}
return false;
}
//报错：类型“Cat | Fish”上不存在属性“swim”。类型“Cat”上不存在属性“swim”。ts(2339)
上述例子中，获取 animal.swim时会报错，
此时可以使用类型断言，将animal断言为Fish：
function isFish(animal:Cat|Fish):boolean{
//将animal断言为Fish
if(typeof (animal as Fish).swim === 'function'){
return true;
}
return false;
}
这样就可以解决访问animal.swim时的报错问题了。
不过需要注意的是，类型断言只能够 ’欺骗‘TypeScript编译器，无法避免运行时的错误，滥用类型断言反而会导致运行时错误：
function swim(animal:Cat|Fish):void{
(animal as Fish).swim();
}
const tom:Cat = {
name:'Tom',
run(){ console.log("I'm running...");}
};
swim(tom)
//编译时不报错，运行时报错：TypeError：animal.swim is not a function
上面例子中，编译时不会报错，但是运行时会报错，当我们执行 tsc命令编译时会看到输出的文件无内容。
原因是因为 (animal as Fish).swim() 这段代码隐藏了 animal可能为 Cat 的情况，将 animal 直接断言为 Fish了，而TypeScript编译器信任了我们的断言，故在调用 swim()时编译没有错误。
总之，使用断言一定要格外小心，尽量避免断言后调用方法或引用深层属性。以减少不必要的 运行时错误。
十三、类型断言02
将一个父类断言为具体的子类
当类之间有继承关系时，类型断言也是很常见的：
class ApiError extends Error{
code:number = 0;
}
class HttpError extends Error{
statusCode:number = 200;
}
function isApiError(myError:Error){
if(typeof (myError as ApiError).code === 'number'){
return true;
}
return false;
}
上述例子中，我们声明了函数isApiError，它用来判断传入的参数是不是ApiError类型，为了实现这样一个函数，它的参数类型肯定得是比较抽象的父类Error，这样的话这个函数就能接受Error或他的子类作为参数了。
但是由于父类Error中没有code属性，故直接获取myError.会报错：类型“Error”上不存在属性“code”。这时候需要使用类型断言获取(myError as ApiError).code。
大家可能会注意到，在这个例子中会有一个更合适的方式来判断是不是ApiError，那就是使用instaceof：
class ApiError extends Error{
code:number = 0;
}
class HttpError extends Error{
statusCode:number = 200;
}
function isApiError(myError:Error){
if(myError instanceof ApiError){
return true;
}
return false;
}
上面的例子中，用instanceof确实是一个很好的方式，因为ApiError是一个JavaScript的类，能够通过instanceof判断是否是它的实例。
但是有的情况下ApiError和HttpError不是一个真正的类，而只是一个TypeScript接口，接口是一个类型，不是一个真正的值，它在编译结果中会被删除，当然就无法用instanceof来判断：
interface ApiError extends Error{
code:number;
}
interface HttpError extends Error{
statusCode:number;
}
function isApiError(myError:Error){
if(myError instanceof ApiError){
return true;
}
return false;
}
//报错：“ApiError”仅表示类型，但在此处却作为值使用
此时就只能用类型断言，通过判断是否存在 code 属性来判断传入的参数是否为 ApiError了：
interface ApiError extends Error{
code:number;
}
interface HttpError extends Error{
statusCode:number;
}
function isApiError(myError:Error){
if(typeof (myError as ApiError).code === 'number'){
return true;
}
return false;
}
十四、类型断言03
将任何一个类型断言为 any
理想情况下，TypeScript的类型系统运转良好，每个值的类型都具体而精确。
当我们引用一个在此类型上不存在的属性或方法时，会报错：
const foo: number = 1;
console.log(foo.length);
//报错：类型“number”上不存在属性“length”。ts(2339)
上面例子中，数字类型的变量foo上是没有length属性的，故TypeScript编译时给出了错误提示。
这种错误提示显然是很有用的。
但有的时候，我们非常确定这段代码不会出错，比如：
window.foo = 1;
//报错：类型“Window & typeof globalThis”上不存在属性“foo”。ts(2339)
上面的例子中，我们需要将window上添加一个foo属性，但是TS会给我们报错，提示window不存在属性foo。
此时我们可以使用as any临时将window断言为any类型：
(window as any).foo = 1;
在 any 类型中，访问任何属性都是可以的。
需要注意的是，将一个变量断言为any可以说是解决TypeScript中类型问题的最后一个手段。
但是它极有可能真正掩盖了类型错误，如果不是十分确定，就不要使用 as any。
总之，一方面不要滥用 any类型，另一方面也不要忽略他带来的作用。我们需要在类型的严格性和开发的方便性之间平衡利弊，才能发挥TypeScript最大的价值。
十五、类型断言04
将any类型断言为一个具体的类型
在日常的开发中，我们不可避免的需要处理any类型的变量，它们可能是由于第三方库未能定义好自己的类型，也可能是历史遗留的或其它人编写的烂代码，还可能是受到TypeScript类型系统的限制而无法精确定义类型的场景。
遇到。any类型的变量时，我们可以选择无视他，任由他滋生更多的any类型
我们可以选择改进它，通过类型断言及时地吧any断言为精确的类型，亡羊补牢，使我们的代码向着可维护性高的目标发展。
举例来说，历史遗留的代码中有个getCacheData函数，它的返回值是any:
function getCacheData(key:string):any{
return (window as any).cache[key];
}
那么我们在使用这个getCacheData函数的时候，最好能够将调用了getCacheData之后的返回值断言为一个精确的类型，这样就方便了后续的操作：
function getCacheData(key:string):any{
return (window as any).cache[key];
}
interface Cat{
name:string;
run():void;
}
const tom = getCacheData('tom') as Cat;
tom.run();
上面例子中，我们调用完getCacheData之后，立即将她断言为Cat类型，这样的话明确了tom的类型，后续对tom的访问时就有了代码补全，提高了代码的可维护性。
题外话
个人认为在遇到较多any类型变量时，尽量在接下来少用或者不用
any类型，根据IDE给出的提示将类型规范化，能减少项目80%的潜在bug。解决any出现次数过次的问题
复杂类型的类型定义
细拆出重复定义的公共项，使用extents 关键字或者 & 交叉运算符来进行整合，提高利用率；
例1：1. // bad interface Person { firstName: string; lastName: string; } interface PersonWithBirthDate { firstName: string; lastName: string; birth: Date; } // good interface Person { firstName: string; lastName: string; } interface PersonWithBirthDate extends Person { birth: Date; }例2：
export type List = { creatTime: number | string; creator: string; desc: string; id: string; modifier: string; token: string; updateTime: number | string; }; export type ProjectList = { id: string; projectName: string; [key: string]: any; } & List; export type TaskList = { name: string; [key: string]: any; } & List;新的问题：如果很多字段要打问号怎么办？下面会讲到
使用typeof定义一个类型匹配初始值（常见的使用场景之一：固定的Schema配置适用）
const INIT_OPTIONS= { width: 640, height: 480, color: "#00FF00", label: "VGA", }; interface Options { width: number; height: number; color: string; label: string; } // 快速获取配置对象的形状 type Options = typeof INIT_OPTIONS;使用Ts 内置类型来解决？号太多的问题
- Utility Types
- 充分利用lib.es5.d.ts中的Partial, Pick , Extract, Omit等方法，扩展第三方、或已存在的类型，不要重复定义完全一样的字段。
十六、类型断言05
类型断言的限制
从上面的例子可以总结出：
联合类型可以被断言为其中一个类型
父类可以被断言为子类
任何类型都可以被断言为
any
any可以被断言为任意类型
那么类型断言有没有什么限制呢？是不是任何一个类型都可以被断言为任何另一个类型呢？
答案是否定的——并不是任何一个类型都可以被断言为任何另一个类型。
具体来说，若A、B两者具有共同的属性或者方法，那么A能够被断言为B，B也能够断言为A。
下面我们通过一个简化的例子，来理解类型断言的限制：
//两者是有共同的属性或者方法，比如Animal和Cat都有name
interface Animal{
name:string;
}
interface Cat{
name:string;
run():void;
}
function testAnimal(animal: Animal){
return (animal as Cat);
}
function testCat(cat : Cat){
return (cat as Animal);
}
上述例子中是可以断言的，我们再看看下面的例子：
//两者没有有共同的属性或者方法，
interface Animal{
name:string;
}
interface Cat{
// name:string;
run():void;
}
function testAnimal(animal: Animal){
return (animal as Cat); //报错：类型 "Animal" 中缺少属性 "run"，但类型 "Cat" 中需要该属性。ts(2352)
}
function testCat(cat : Cat){
return (cat as Animal);//报错：类型 "Cat" 中缺少属性 "name"，但类型 "Animal" 中需要该属性。ts(2352)
}
这时候会报错，两者不能充分重叠，这意味着要想断言成功，需要具备一个条件：
- 要使得A和B能够被 互相断言，就要A兼容B或者B兼容A
十七、类型断言06
双重断言
既然：
- 任何类型都可以被断言为any
- an可以被断言为任何类型
那么我们是不是可以使用双重断言 as any as foo 来将任何一个类型断言为另一个类型呢？
interface Cat{
run():void;
}
interface Fish{
swim():void;
}
function testCat(cat : Cat){
return (cat as any as Fish);
}
上述例子中，若直接使用 cat as Fish 会报错：类型 “Cat” 中缺少属性 “swim”，但类型 “Fish” 中需要该属性。因为Cat和Fish都互不兼容。
但是若使用双重断言，则可以打破 [要使得A能都断言B ,就要A兼容B或者B兼容A] 的限制，将任何一个类型断言为任何另一个类型。
若你使用了这种双重断言，那么十有八九都是非常错误。他很可能会导致运行时错误。
除非迫不得已，否则千万别用双重断言。（咋迫不得已？基本不用吧？）
十八、类型断言07
类型断言VS类型转换
类型断言只会影响TypeScript编译时的类型，类型断言语句会在编译结果中被删除：
function toBoolean(something:any):boolean{
return something as boolean;
}
toBoolean(1);
//返回值为1
在上面的例子中，将something断言为boolean可以通过编译，但是并没有什么用，代码在编译后会变成：
function toBoolean(something) {
return something;
}
toBoolean(1);
//返回值为1
所以类型断言不是类型转换，他不会真的影响到变量的类型。
若要进行类型转化，需要直接调用类型转换的方法：
function toBoolean(something:any):boolean{
return Boolean(something);
}
toBoolean(1);
//返回值为true
十九、类型断言08
类型断言VS类型声明
在这个例子中：
function getCacheData(key:string):any{
return (window as any).cache[key];
}
interface Cat{
name:string;
run():void;
}
const tom = getCacheData('tom') as Cat;
tom.run();
我们使用 as Cat将any类型断言为了Cat类型。
但实际上还有其他方式可以解决这个问题：
function getCacheData(key:string):any{
return (window as any).cache[key];
}
interface Cat{
name:string;
run():void;
}
const tom:Cat = getCacheData('tom');
tom.run();
上面的例子中，我们通过类型声明的方式，将tom声明为Cat，然后再将any类型的getCacheData(‘tom’)赋值给Cat类型的tom。
这和类型断言是非常相似的，而且产生的结果也几乎是一样的——tom在接下来的代码中都变成了Cat类型。
他们的区别，可以通过这个例子来理解：
interface Animal{
name:string;
}
interface Cat{
name:string;
run():void;
}
const animal: Animal = {
name:'tom'
}
let tom = animal as Cat;
上述例子中，由于Animal兼容 Cat，故可以将 animal 断言为 Cat赋值给tom。
但是若直接声明tom为Cat类型：
interface Animal{
name:string;
}
interface Cat{
name:string;
run():void;
}
const animal: Animal = {
name:'tom'
}
let tom: Cat = animal;
//报错：类型 "Animal" 中缺少属性 "run"，但类型 "Cat" 中需要该属性。ts(2741)
则会报错，不允许将Cat类型的tom赋值为animal。
我们可以得出结论：
- A断言为B时
- A声明为B时，A必须具备B的所有属性和方法
知道了他们的核心区别，就知道了类型声明是比类型断言更加严格的。
所以为了增加代码的质量我们最好优先使用类型声明，这也比类型断言的 as语法更有优势。
二十、类型断言09
类型断言VS泛型
这是一个例子：
function getCacheData(key:string):any{
return (window as any).cache[key];
}
interface Cat{
name:string;
run():void;
}
const tom = getCacheData('tom') as Cat;
tom.run();
我们还有第三种方式可以解决这个问题，那就是泛型：
function getCacheData<T>(key:string):T{
return (window as any).cache[key];
}
interface Cat{
name:string;
run():void;
}
const tom = getCacheData<Cat>('tom');
tom.run();
通过给getCacheData函数添加一个泛型 ,我们可以更加规范的实现对getCacheData返回值的约束，这也同时去除掉了代码中的any，是最优的一个解决方式。
关于泛型
是一种把明确类型的工作推迟到创建对象或者调用方法的时候才去明确的特殊的类型。
泛型的定义
主要有以下两种：
不论使用哪个定义，泛型的参数在真正使用泛型时都必须作出指明。
二一、type关键字
使用type关键字定义类型别名和字符串字面量类型
我们来看一个方法：
function getName(n:string|(() => string)):string{
if(typeof n === 'string'){
return n;
}else{
return n();
}
}
type关键字作为类型别名用来给一个类型起个新名字
type Name = string;
type NameResolver = ()=> string;
type NameOrResolver = Name | NameResolver;
function getName(n:NameResolver):Name{
if (typeof n === 'string'){
return n;
}else{
return n();
}
}
上述例子中，我们使用type关键字创建类型别名。
类型别名常用语联合类型。
字符串字面量类型用来约束取值只能是某几个字符串中的一个
type EventsName = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele:Element | null,event:EventsName){
//do something
}
handleEvent(document.getElementById('hello'),'click');
//正常运行
handleEvent(document.getElemnetById('world'),'dbclick');
//报错：类型“"dbclick"”的参数不能赋给类型“EventsName”的参数。ts(2345)
二二、元组
数组合并了相同类型的对象，而元组(Tuple)合并了不同类型的对象。
元组起源与函数编程语言(如F#，Python也有元组的概念)，这些语言中会频繁使用元组。
举个例子，定义一对值分别为 string和 number的元组：
let tom:[string,number] = ['Tom',15];
当赋值或访问一个已知索引的元素时，会得到正确的类型：
let tom:[string,number];
tom[0] = 'Tom';
tom[1] = 15;
也可以赋值其中一项：
let tom:[string,number];
tom[0] = 'Tom';
但是当直接对元组进行初始化赋值操作时，需要提供所有元组类型指定的项
let tom:[string,number];
tom = ['Tom',18];
下面这样就不行了：
let tom:[string,number];
tom = ['Tom'];
//报错：不能将类型“[string]”分配给类型“[string, number]”。源具有 1 个元素，但目标需要 2 个。ts(2322)
越界元素
当添加越界元素时，他的类型会被限制为元组中每个类型的联合类型：
let tom:[string,number];
tom = ['Tom',18];
tom.push('male');//可以添加stirng，此时tom为['Tom',18,'male']
tom.push(true);//不可以添加boolean
//报错：类型“boolean”的参数不能赋给类型“string | number”的参数。ts(2345)
二三、枚举
枚举(Enum)类型用于取值被限定在一定范围的场景，比如一周只能有七天，颜色限定为红绿蓝等。
枚举使用enum关键字来定义：
enum Days{Sun, Mon, Tue, Wed, Thu, Fri, Sat};
枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：
enum Days{Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days['Sun'] === 0);//true
console.log(Days['Mon'] === 1);//true
console.log(Days['Wed'] === 3);//true
console.log(Days['Thu'] === 4);
//console.log(Days['Sun'] === 4);//false,且不能通过编译，IDE提示：此条件将始终返回 "false"，因为类型 "Days.Sun" 和 "4" 没有重叠。
console.log(Days[0] === 'Sun');//true
console.log(Days[1] === 'Mon');//true
console.log(Days[3] === 'Wed');//true
console.log(Days[4] === 'Sun');//false，IDE不进行提示
上面的例子会被编译为JS代码：
var Days;
(function (Days) {
Days[Days["Sun"] = 0] = "Sun";
Days[Days["Mon"] = 1] = "Mon";
Days[Days["Tue"] = 2] = "Tue";
Days[Days["Wed"] = 3] = "Wed";
Days[Days["Thu"] = 4] = "Thu";
Days[Days["Fri"] = 5] = "Fri";
Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));
;
console.log(Days['Sun'] === 0); //true
console.log(Days['Mon'] === 1); //true
console.log(Days['Wed'] === 3); //true
console.log(Days['Thu'] === 4);
// console.log(Days['Sun'] === 4);//false,IDE提示：此条件将始终返回 "false"，因为类型 "Days.Sun" 和 "4" 没有重叠。
console.log(Days[0] === 'Sun'); //true
console.log(Days[1] === 'Mon'); //true
console.log(Days[3] === 'Wed'); //true
console.log(Days[4] === 'Sun'); //false，IDE不进行提示
TS第二篇笔记（typora放太多笔记在同一个md文件里太卡了，干脆分为两篇）：https://blog.csdn.net/weixin_51245887/article/details/124708170
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)