前言

typescript 是微软公司开发的开源编程语言 是在js的基础上添加了类型支持等 也就是 javascript 的 一种超集

超集 ： 扩展和集成了javaScript的基础上还新增了许多新类型

搭建编译环境

安装 typescript 包  -->  用于编译 ts 代码

npm i -g typescript

        在需要编译 ts 代码的文件下 执行 tsc 文件名 的方式 生成 .js 文件

使用 vite 搭建 ts 的编译环境

1. 安装 create-vite 脚手架工具 用于搭建 vite 项目

npm i -g create-vite

1. 在风水宝地中 运行命令 创建 ts 项目

create-vite 文件名

1.基础类型

ts 在 js 的基础上新增了 许多类型

ts的基本类型有 ：

类型	介绍
number	任意数字类型
string	任意字符串
boolean	布尔值 true 或者 false
any	任意类型
unknown	类似于any 比any更安全
void	空值
never	没有值
object	任意类型的js对象
array	任意类型的js数组
tuple	元素，ts新增类型，固定数组的长度
enum	枚举，ts的新增长度

类型注解

概念：类型注解指的是给变量添加类型约束，它的好处是：

1. 使变量只能被赋值为约定好的类型
2. 编写代码的过程中可以有相关的类型提示

// 类型断言
// 基本数据类型的类型断言
// 这里的类型断言是告诉编译器，我知道这个变量的类型是什么，不需要你来检查了
// 但是这里的类型断言是不会影响到变量的类型的，只是在编译阶段起作用
// 所以这里的num还是number类型，str还是string类型，bool还是boolean类型
let num: number = 1;
let str: string = '1';
let bool: boolean = true;
let nll: null = null;
let und: undefined = undefined;
let sym: symbol = Symbol();
let big: bigint = BigInt(1);


// 引用数据类型的类型断言
let arr: number[] = [1,2,3];
// 泛型的方式 Array<number>  
let arr2: Array<number> = [1,2,3];
// 联合类型
let arr3: (number | string)[] = [1,2,3,'4'];
// 泛型的方式 Array<number | string>  
let arr4: Array<number | string> = [1,2,3,'4'];
// any类型
let arr5: any[] = [1,2,3,'4', true];
// 泛型的方式 Array<any>  
let arr6: Array<any> = [1,2,3,'4', true];

类型推论

1. 声明变量并初始化

某些声明了变量没有类型注解但是赋予了初始值的时候 ts 的类型推论机制就会帮助我们提供类型

例如 let str = 'str' // 这里根据类型推断 就会赋予 string 类型

1. 决定函数返回值时

例如 const fn = (x: number, y: number) => x + y //这里的返回值就会 赋予 number 类型

类型别名 ( type )

type关键字可以理解为声明 一个 或一种 类型

// type 可以定义基本类型别名、联合类型、元组等类型
type Name = string;
type NameResolver = () => string;
type obj = {
    name: string;
    age: number;
}

// 2. type 语句中还可以使用 typeof 获取实例的 类型进行赋值
const Obj1 = { 
    name: '1',
    age: 1
}
type Obj2 = typeof Obj1; // { name: string; age: number; } 获取 obj1 的类型
const obj2: Obj2 = {
    name: '2',
    age: 2  
}
type Obj3 = keyof Obj2; // 'name' | 'age' 把 Obj2 的 key 赋值给 Obj3 其中key代表的是 Obj2 的 属性名
const obj3: Obj3 = 'name';

在vscode 上可以通过鼠标悬停来查看类型注解 的具体类型

接口 （ interface ）

概念 ： 只能定义对象类型

可选设置

从后端取回的商品数据中，一定有id，name, price，但是imgUrl是可选的。表示有些商品没有配图片

const goodList = [
  {id:1, name: '手机', price: 2999, imgUrl: 'http://w.g1.png'},
  {id:1, name: '毛巾', price: 9}  // 这里数组中的第二项数据 里没有 imgURL 类型注解时该如何注解呢
]

interface Goods {
  	id: number
    name: string
    price: number
    imgUrl?: string // 这里再 属性名后 : 号前加了一个可选标注  表示赋值时该属性可以缺失 可以传可以不传
}

const goodsItem:Array<Goods> = [
  {id:1, name: '手机', price: 2999, imgUrl: 'http://w.g1.png'},
  {id:1, name: '毛巾', price: 9}  
]

接口的继承

概念： 再平常编写接口时会遇见大多数属性时可以复用的，这个是就可以使用 extends 来复用公共属性

extends 翻译过来就是继承 的意思 所谓子承父业 extends 也是相近的

interface Person {
    name: string;
    age: number;
}

// User1 再 Person 接口的基础上 还拥有自己的属性 
interface User1 extends Person {
    hobby: string;
    love: string[];
}

const xiaohong: User1 = {
    name: '小红',
    age: 18,
    hobby: '打篮球',
    love: ['小明', '小红', '小刚']
}
  

tips⭐

👉type 和 extends 的区别

相同点

1. 都可以用来描述对象类型
2. 都能实现继承 interface 使用 extends 实现 而 type 使用 交叉类型 （& 符号）实现

不同点

1. type 除了描述对象类型 还可用来描述其他类型 例如函数类型
2. 当 interface 声明的接口同名时 会合并
3. 而 type 遇见同名情况时会报错

如果需求场景相似时 还是推荐大家使用 type , 相比较于interface type更加灵活

字面量类型

//  这两个变量的类型会是什么呢
let str1 = '123'
const str2 = '123'
// 通过TS类型推断机制，可以得出
// 变量 str1 的类型为 string  --> 因为let 声明的是变量 所以它可以是任意字符串 所以类型为 String
// 变量 str2 的类型为 123 		 --> 使用const 关键字声明的是常量 所以它只能是 123 不可以变
// 所以此处的 123 为字面量类型 ，也就是说 某个特定的值 也可以作为TS 中的类型 

实际应用场景

字面量类型 在实际应用中通常和联合类型 结合使用 ，可以提供一个精确可选的范围

any 类型

当值的类型为 any 时 ，可以对该值进行任意操作， 不会有代码提示

let obj: any = { x: 0 }  // any 就是任意类型

obj.bar = 100 //没有可能出现错误的提示
obj() // 没有可能出现错误的提示
const n: number = obj

！！！ 不推荐使用any 因为会让 TypeScript 变成 AnyScript （ 失去了 ts 类型保护的又是 ）

但是临时使用any 来暂时 避免 很长很复杂的类型

类型断言

在部分场景下 我们需要一个非常明确的值 ，这个时候就可以使用类型断言 （as） 来指定 更具体的类型

const link = document.getElementById('link') as HTMLLinkElement

1. 使用 as 关键字实现类型断言
2. 后面的类型是一个更加具体的类型 （HTMLLinkELement 是 HTMLElement 的子类型）
3. 通过 as 关键字 让 link 的类型变得更加具体， 这样就可以在使用时获得代码提示

泛型

泛型（Generics）是指在定义接口、函数等类型的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性, 使用泛型可以复用类型并且让类型更加灵活。

语法

在接口类型的名称后面使用 <T> 即可声明应该泛型参数列表 接口里的其他成员都能使用该参数的类型

通用思路：

1. 找到可变的类型部分通过泛型抽象为泛型参数（定义参数）

     2.  泛型参数相当于一个类型容器，能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)

     3. 在使用泛型的时候，把具体类型传入到泛型参数位置 （传参）

     4. 也可以理解为 vue 中的插槽

泛型-类型别名

语法：在类型别名type的后面使用<T>即可声明一个泛型参数，接口里的其他成员都能使用该参数的类型。

type User = {name: string, age: number}
type Good = {id:number, goodsName: string}
type Res<T> = {
    code: number
    msg: string
    data: T
}
// 类型别名 type 
type ResUser = Res<User>
type ResGood = Res<Good[]>

泛型-函数

语法：在函数名称的后面使用<T>即可声明泛型参数，整个函数中（参数、返回值、函数体）的变量都可以使用该参数的类型

function createArray<T>(len: number, initValue:T) : T[] {    
  let result: T[] = [];
  for (let i = 0; i < len; i++) {
    result[i] = initValue
  }
  return result
}

泛型-类型约束

作用：泛型的特点就是灵活不确定，有些时候泛型函数的内部需要访问一些特定类型的数据才有的属性，此时会有类型错误，需要通过泛型约束解决

格式

<T extends 具体类型>

可以理解为给泛型 加上一个继承的类型 达到约束效果