「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」

写在前面: vue3 + ts 可谓是如日中天,第一波红利各个都想吃,不学不行,记录一下关于typescript的基础语法,便于翻看复习.

事关我对于Vue3项目里ts的笔记

1.基础类型

• symbol(唯一值),void(空值),any(任意),never(永不存在)

---

2. 类型注解

1. let a :number = 1024;包括函数注解:function(a :number,b :string){};
2. let a :bumber | string;(给变量同时赋予多种合法类型,但在赋值时会确定类型)
3. let a = "abc" (给变量赋具体值TS会自动判断赋予类型)

---

3. 接口(interface)

(用于定义类型规则,比如函数类型,数组元组类型可以被注解(const people : Person),也可以继承于别的接口)

interface 不可多传,不能少传,不能传错

一.给对象的形状进行注解

interface Porson {
    readonly id: 123, //只读属性,不可修改赋值
    age ?: number, //可选属性,可传入,可不传入
    [propName string]: any, //任意属性值, 但限制属性名,必须为string类型
    name : string, //类型注解
}

二.对类的部分行为

interface Array{
    [index : number] : any,//定义下标类型
    length: number,//定义长度类型
    cassee : function,//定义回调函数类型
}

---

4. 枚举(enum)

用来管理一个对象的不同形态.

enum Status_Type{
    pengding:"等待中",
    success:"成功",
    error:"失败",
}	

---

5. 元组和数组(Array)

数组的数据是不限长度的,元组是限定长度的数组,TS里才有元组,JS不存在所谓元组,只是一个固定长度的数组.

//已有数组

let arr :number[] = [1,2,3];
let arr2 = new Array<number>(3);

interface NumberArray{
    [index : number]:number,
}
let arr3 :NumberArray = [1,2,3];

//类数组
function num(){
    let args = IArguments = arguments;
}

//元组
// let arrAny :any[] = [1 , "测试"]
let tuplel : [number,string,boolean] = [1,"数字",false]

6. 函数类型(type)

自定义的函数类型,用来描述复杂数据类型的规范 可以用来定义函数的参数类型 , 并且可以嵌套使用泛型,而且还可以使用type和interface进行组合扩展.

---

7. 函数(function)

1. 函数的参数可以被类型注解 , 有可选参数(a?:string) , 默认参数(a:string = 3)和剩余参数(...arg:string[]).TS可选参数必须在必选参数之后,JS的可选参数随意 , 但不填时需要用undefined占位
2. 函数可以用接口来进行注解
3. let add = (a1:number , a2:number) :number(返回值类型) => a1 + a2;
4. 函数重载就是同一个函数名 , 根据传入参数个数的不同执行不同的代码 , 进而返回不同的结果.函数重载只能用function来定义 , 不能使用type或者interface

---

8. 泛型

在定义函数或者接口的时候使用<T>来替代类型注解 , 这样就能在调用的时候使用<number>来传入实际的类型 , T会被解析为number类型,更为灵活

9. 断言

type C = {name:"Bob"};
console.log(b as C).name;
//断言表示武断的下结论,TS并不知道数据的类型,断言是程序员在不知道数据类型的情况下,武断的告诉TS给数据确定类型.

10.空值区分

//let a :any = '0';
    any表示任何类型都可以
//let a :unknow = '0';
    unknow表示我一开始不知道什么类型,但用的时候会指定类型
//void表示一个函数没有返回值.

End