Web前端笔记-17、TS-类型注解1-简单、数组、联合、函数、接口、type注解对象、字面量、any类型、断言)

TS

TypeScript 是具有类型语法的 JavaScript，是一门强类型的编程语言。

1. 静态类型检查，提前发现代码错误
2. 良好的代码提示，提升开发效率

结论：TypeScript不是万能的，技术的选型不能脱离具体的业务和应用场景，TS更加适合用来开发中大型的项目，或者是通用的JS代码库，再或者是团队协作开发的场景

TypeScript编写的代码是无法直接在js引擎（浏览器/NodeJs）中运行的，最终还需要经过编译变成js代码才可以正常运行

npm create vite@latest ts-pro -- --template vanilla-ts

概念：类型注解指的是给变量添加类型约束，使变量只能被赋值为约定好的类型，同时可以有相关的类型提示

说明：:string就是类型注解，约束变量message只能被赋值为string类型，同时可以有string类型的相关提示

类型注解

1. 简单类型：number string boolean null undefined
2. 复杂类型：数组 函数
3. TS新增类型：联合类型、类型别名、接口(interface)、字面量类型、泛型、枚举、void、any等

简单类型如何进行类型注解

简单类型的注解完全按照TS的类型（全小写的格式）来书写即可。

数组类型如何注解

变量被注解为数组类型之后，有俩点好处：

• 不仅可以限制变量类型为数组而且可以限制数组成员的类型
• 编码时不仅可以提示数组的属性和方法而且可以提示成员的属性和方法

写法一：推荐

let arr: number[] = [1, 2, 3]

说明：以上代码表示变量arr只能赋值数组类型并且数组的成员必须都是number类型

写法二：泛型写法

let arr2: Array<number> = [1, 2, 3]

联合类型

概念：将多个类型合并为一个类型对变量进行注解

需求：如何注解数组类型可以让数组中既可以存放string类型的成员也可以存放number类型的成员？

let arr: (number | string)[] = [1, 2, 3, '4']

let arr: number | string[]
arr = 1
arr = ['4']

类型别名

概念：通过type关键词给写起来较复杂的类型起一个其它的名字，用来简化和复用类型

type ItemType = (number | string)[]
let arr: ItemType = [1, '2']

类型别名的命名采用规范的大驼峰格式

函数类型如何注解

概念：函数类型是指给函数添加类型注解，本质上就是给函数的参数和返回值添加类型约束

function add(a: number, b: number): number {
  return a + b
}
// 函数表达式写法1：分开注解(和普通函数写法一样)
const add1 = (a: number, b: number): number => a + b
// 函数表达式写法2：整体注解(只能用于函数表达式)
type AddFn = (a: number, b: number) => number
const add2: AddFn = (c, d) => c + d

说明：

1. 函数参数注解类型之后不但限制了参数的类型还限制了参数为必填
2. 函数返回值注解类型之后限制了该函数内部return出去的值必须满足类型要求
3. 整体注解一般用于库文件，业务中一般用分开注解

好处：

1. 避免因为参数不对导致的函数内部逻辑错误
2. 对函数起到说明的作用

函数类型-可选参数和无返回值的注解

可选参数概念：可选参数表示当前参数可传可不传，一旦传递实参必须保证参数类型正确

function buildName(firstName: string, lastName?: string):string {return ''}

可选参数必须在所有参数的末尾

无返回值void的注解：

概念：TS中的有些函数只有功能没有返回值，此时使用void进行返回值注解，明确表示函数没有函数值

注意事项：在JS中如没有返回值，默认返回的是undefined,在TS中void和undefined不是一回事，undefined在TS中是一种明确的简单类型，如果指定返回值为undefined,那返回值必须是undefined类型

function buildName(firstName: string):void {}

interface接口类型如何注解

作用：在TS中使用interface接口来描述对象数据的类型（常用于给对象的属性和方法添加类型约束)

interface Person {
  name: string
  age: number
}
const p: Person = {
  name: 'Jack',
  age: 18,
}

说明：一旦注解接口类型之后，对象的属性和方法类型都需要满足要求，属性不能多也不能少。

interface的典型场景

场景：在常规业务开发中比较典型的就是前后端数据通信的场景

1. 前端向后端发送数据：收集表单对象数据时的类型校验
2. 前端使用后端数据：渲染后端对象数组列表时的智能提示

接口的可选设置

有些属性可传可不传。

概念：通过?对属性进行可选标注，赋值的时候该属性可以缺失，如果有值必须保证类型满足要求

interface Person {
  name: string
  age?: number
}

接口的继承

概念：接口的很多属性是可以进行类型复用的，使用extends实现接口继承，实现类型复用。

interface GoodsType {
  id: string
  price: number
}
////////
interface DisGoodsType {
  id: string
  price: number
  disPrice: number
}
// 改为
interface DisGoodsType extends GoodsType {
  disPrice: number
}

interface注解对象类型

interface Data {
  title: string
  content: string
}
interface Response {
  code: number
  msg: string
  data: Data
}
let res: Response = {
  code: 200,
  msg: 'success',
  data: {
    title: '标题',
    content: '内容',
  },
}

type注解对象类型

概念：在TS中对于对象数据的类型注解，除了使用interface之外还可以使用类型别名来进行注解，作用相似。

type PersonInfo = {
  name: string
  age?: number
}
let pInfo: PersonInfo = {
  name: '111',
  age: 18,
}

type+交叉类型模拟继承

类型别名配合交叉类型（&)可以模拟继承，同样可以实现类型复用

type Goods = {
  id: string
  price: number
}
type DisGoods = Goods & {
  disPrice: number
}

interface对比type

相同点

1. 都能描述对象类型
2. 都能实现继承，interface使用extends,type配合交叉类型

不同点

1. type除了能描述对象还可以用来自定义其他类型
2. 同名的interface会合并（属性取并集，不能出现类型冲突)，同名type会报错

在注解对象类型的场景下非常相似，推荐大家一律使用type,type更加灵活

字面量类型如何注解

概念：使用S字面量作为类型对变量进行类型注解，这种类型就是字面量类型，字面量类型比普通的类型更加精确

说明：除了上面的数字字面量，JS里常用的字符串字面量，数组字面量，对象字面量等都可以当成类型使用。

let str1 = '123' // TS推断str1为string类型
const str2 = '456'// TS推断str2为字面量类型，字面量为'456'

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

场景1：性别只能是'男‘和'女‘，就可以采用联合类型配合字面量的类型定义方案

场景2：ElementUl中的el-button组件按钮的type属性

type Props = {
  type: 'primary' | 'success' | 'danger' | 'warning'
}

类型推论

概念：在TS中存在类型推断机制，在没有给变量添加类型注解的情况下，TS也会给变量提供类型。

let count = 100 // 推断为number
count = 200  // 不报错
count = true // 报错

一些小建议

1. 开发项目的时候，能省略类型注解的地方就省略
2. 刚开始学TS,建议对所有类型都加上，先熟悉
3. 鼠标放至变量上，VsCode自动提示类型

any类型

作用：变量被注解为y类型之后，TS会忽略类型检查，错误的类型赋值不会报错，也不会有任何提示。

any的使用越多，程序可能出现的漏洞越多，因此不推荐使用any类型，尽量避免使用

类型断言

作用：有些时候开发者比TS本身更清楚当前的类型是什么，可以使用断言(as)让类型更加精确和具体

需求：获取页面中的id为link的a元素，尝试通过点语法访问href属性

const link1 = document.getElementById('link')
// link1.href // 报错，link1的类型推断为HTMLElement

const link2 = document.getElementById('link') as HTMLAnchorElement
link2.href // 没报错，as精确到了HTMLAnchorElement，识别到了href属性

类型断言只能够「欺骗」TypeScript编译器，无法避免运行时的错误，滥用类型断言可能会导致运行时错误。