前端【TS】05-typescript【基础】【简单类型】【联合类型】【类型别名】【函数类型】【可选参数、无返回值】【接口类型】【对象类型】【字面量类型】【断言类型】【泛型】【TS内置类型Omit和Pick】【typeof、keyof】

一、介绍

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

　　

 带来的好处

① 静态类型检查，提前发现代码错误

　　

② 良好的代码提示，提升开发效率

　　

 什么时候用

　　以下是来自社区的一些建议：
　　1. 你做的是一个大型的应用吗？
　　2. 是否是团队协作开发模式？ 多一句没有，少一句不行，用更短时间，教会更实用的技术！
　　3. 是否在编写通用的代码库？（Vue3 / ElementPlus...）
　　结论：TypeScript不是万能的，技术的选型不能脱离具体的业务和应用场景，TS更加适合用来开发中大型的项目，或 者是通用的JS代码库，再或者是团队协作开发的场

为什么需要编译环境？

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

　　

 搭建手动编译环境

1. 全局安装 typescript 包（编译引擎）-> 注册 tsc 命令
npm install -g typescript                 
2. 新增 hello.ts 文件，  执行 tsc hello.ts 命令生成hello.js文件
3. 执行 node hello.js 运行js文件查看效果

搭建工程化下的自动编译环境

　　基于工程化的TS开发模式（webpack / vite），TS的编译环境已经内置了，无需手动安装配置，通过以下命令即可创 建一个最基础的自动化的TS编译环境

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

// 命令说明：
1. npm create vite@latest       创建vue3项目 使用最新版本的vite创建项目
2. ts-pro   自定义的项目名称
3. -- --template vanilla-ts     创建项目使用的模板为原生ts模板

 

二、语法

TS支持的常用类型注解

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

注解简单类型

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

let age: number = 100;
let name: string = '张三';
let isLoading: boolean = true;
let unllValue: null = null;
let undefinedValue: undefined = undefined;

注解数组类型

// 注解数组的方式1：推荐
let ageArr: number[] = [12, 18, 20]; // 表示变量ageArr只能赋值数组类型并且数组的成员必须都是number类型

// 注解数组的方式2：泛型
let nameArr: Array<string> = ['张三', '李四']

注解联合类型

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

// 联合类型
// (string | number)  表示arr是数组，并且其中的成员既可以是string类型也可以是number类型
let arr: (string | number)[] = ['jack', 20]

// 去掉小括号，含义就变了，表示arr可以是string类型，也可以是number[]类型
let arr: string | number[] = ['jack', 20]

类型别名

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

// 定义类型别名
type twoType = (string | number)[]
// 使用类型别名
let arr2: twoType = ['jack', 20]
let arr3: twoType = ['jack', 50, '老王']

函数类型

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

说明：

　　1. 函数参数注解类型之后不但限制了参数的类型还限制了参数为必填

　　2. 函数返回值注解类型之后限制了该函数内部return出去的值必须满足类型要求

好处：

　　1. 避免因为参数不对导致的函数内部逻辑错误

　　2. 对函数起到说明的作用

// 函数类型
// 限制参数个数、类型以及返回值类型
function add(a: number, b: number): number {
  return a + b
}

函数表达式（箭头函数）

// 方式1、参数和返回值分开注解
const addFunction = (a: number, b: number): number => a + b

// 方式2、函数整体注解（只针对于函数表达式）
// 函数类型别名
type addFunType = (a: number, b: number) => number
// 使用函数整体注解
const addFunction2: addFunType = (a, b) => a + b

可选参数

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

/**
 * 可选参数
 * lastName?: string  就是一个可选参数，调用函数的时候可以传可以不传
 */
function buildName(firstName: string, lastName?: string): string {
  if (lastName) {
    return `${firstName} - ${lastName}`
  } else {
    return firstName
  }
}

console.log(buildName('张三'))
console.log(buildName('张三', '李四'))

无返回值 - void

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

/**
 * 无返回值的函数，类型使用void
 */
function printArr(arr: number[]): void {
  arr.forEach((item) => console.log(item))
}

printArr([1, 2, 3, 4])

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

interface接口类型

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

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

/**
 * 接口类型
 */
interface Person {
  name: string,
  age: number
}

let p1: Person = {
  name: '张三',
  age: 20
}
console.log(p1)

interface的典型场景

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

　　1. 前端向后端发送数据：收集表单对象数据时的类型校验

　　2. 前端使用后端数据：渲染后端对象数组列表时的智能提示

　　

接口的可选设置

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

/**
 * 接口类型
 */
interface Person {
  name: string,
  age?: number   // 设置age为可选属性, 也就是在赋值的时候，可以传也可以不传，但是传了就必须为定义的number类型
}

// 传可选字段age
let p1: Person = {
  name: '张三',
  age: 20
}
console.log(p1)

// 不传可选字段age
let p2: Person = {
  name: '张三'
}
console.log(p2)

接口的继承

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

/**
 * 1、分开定义不同类型
 */
// 商品类型
interface GoodsType {
  goodsName: string,  // 商品名称
  goodsPrice: number  // 商品价格
}

// 打折商品类型
interface DisGoodsType {
  goodsName: string,    // 商品名称
  goodsPrice: number,   // 商品价格
  goodsDisPrice: number // 商品打折价格
}

/**
 * 2、通过继承定义这两个类型
 */
interface GoodsType {
  goodsName: string,  // 商品名称
  goodsPrice: number  // 商品价格
}

// 继承GoodsType定义的属性和类型
interface DisGoodsType extends GoodsType {
  goodsDisPrice: number // 商品打折价格
}

let disGoods: DisGoodsType = {
  goodsName: "气球",
  goodsPrice: 20,
  goodsDisPrice: 5
}

type注解对象

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

// 使用type注解对象
type GoodsType = {
  goodsName: string,  // 商品名称
  goodsPrice: number  // 商品价格
}
let goods: GoodsType = {
  goodsName: "气球",
  goodsPrice: 20,
}
console.log(goods)

type + 交叉类型模拟继承

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

type GoodsType = {
  goodsName: string,
  goodsPrice: number
}
// 使用类型别名 配合 &  模拟继承(实现类型复用)
type DisGoodsType = GoodsType & {
  goodsDisPrice: number
}

let disGoods: DisGoodsType = {
  goodsName: "气球",
  goodsPrice: 20,
  goodsDisPrice: 5
}
console.log(disGoods)

interface 对比 type

相同点

　　1. 都能描述对象类型 多一句没有，少一句不行，用更短时间，教会更实用的技术！

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

不同点

　　1. type除了能描述对象还可以用来自定义其他类型

　　2. 同名的interface会合并（属性取并集，不能出现类型冲突），同名type会报错

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

① 同名的interface会取并集

/**
 * 同名的interface会取并集
 */
interface Item {
  name: string
}

interface Item {
  age: number
}

// 此时定义Item类型，就必须name和age都传并且类型不能错
let item: Item = {
  name: '张三',
  age: 20
}
console.log(item)

② type定义的类型重名，会直接报错

　　

 

什么是字面量类型

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

　　

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

字面量类型的实际应用

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

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

　　

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

　　

字面量类型与const

　　思考一下下面的 str1 和 str2，TS推断出来的类型分别是什么？

　　

 说明：const声明的变量称之为常量，常量是不可以进行重新赋值的，所以str2推断出来的是字面量类型而不是string 类型

类型推论

　　在 TS 中存在类型推断机制，在没有给变量添加类型注解的情况下，TS 也会给变量提供类型，以下是发生类型 推断的几个场景

1. 声明变量并赋值时，如果已经赋值，会根据赋的值推到其类型，一旦赋值推到完类型，后面就不能在赋值其他类型

　　

2. 决定函数返回值时

　　

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

any类型

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

let obj: any = { age: 19 }
obj.bar = 100         // 当obj类型为any时，给他不存在的属性赋值也不会报错
obj()                 // 当obj类型为any时，把它当作一个函数也不会报错，但是运行会报错
const n: number = obj // 将obj赋值给一个类型为number的变量，也不会报错，因为obj为any类型

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

断言类型

类型断言的基本使用

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

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

const link1 = document.getElementById('link')
// 报错提示
// 1、'link1' is possibly 'null'    变量link1可能为null
// 2、Property 'href' does not exist on type 'HTMLElement' 
// console.log(link1.href)  


const link2 = document.getElementById('link') as HTMLAnchorElement
link2.href  // 此时不会提示报错，但是当运行时，如果link2为null还是会报错

类型断言的注意事项

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

说明：利用断言把foo变量的类型指定为精确的number，但是传参的时候还是可以传递number类型或者string类型 均满足类型要求，但是传递string会导致运行时错误

function log(a: number | string): void {
  // 断言a为number类型，这样就可以使用number类型的方法，但是一旦传入的a为其他类型，没有toFixed方法就会报错
  console.log((a as number).toFixed(2))
}

log(100)      // 不报错，运行时也不报错
log('11111')  // 不报错，运行时会报错

泛型

什么是泛型

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

泛型接口

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

通用思路：

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

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

interface User {
  name: string,
  age: number
}
interface UserData {
  code: number,
  msg: string,
  data: User
}


interface Goods {
  id: number,
  goodsName: string
}
interface GoodsData {
  code: number,
  msg: string,
  data: Goods
}

/**
 * 抽取泛型，泛型接口
 */
interface Data<T> {
  code: number,
  msg: string,
  data: T
}

// User泛型
let result1: Data<User> = {
  code: 200,
  msg: '响应成功',
  data: {
    name: '张三',
    age: 20,
  }
}
// Goods泛型
let result2: Data<Goods> = {
  code: 200,
  msg: '响应成功',
  data: {
    id: 10000,
    goodsName: '牙膏',
  }
}

泛型别名

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

interface User {
  name: string,
  age: number
}

interface Goods {
  id: number,
  goodsName: string
}

/**
 * 泛型别名
 */
type Data<T> = {
  code: number,
  msg: string,
  data: T
}

// User泛型
let result1: Data<User> = {
  code: 200,
  msg: '响应成功',
  data: {
    name: '张三',
    age: 20,
  }
}
// Goods泛型
let result2: Data<Goods> = {
  code: 200,
  msg: '响应成功',
  data: {
    id: 10000,
    goodsName: '牙膏',
  }
}

泛型函数

　　语法：在函数名称的后面使用即可声明一个泛型参数，整个函数中（参数、返回值、函数体）的变量都可以使用该 参数的类型
　　需求：设置一个函数 createArray，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值(多种类型)

// 需求：设置一个函数 createArray，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值(多种类型)

function createArray<T>(length: number, value: T) {
  let result = []
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}
// 调用泛型函数, 指定泛型
createArray<number>(10, 100) // 创建一个类型为number的数组，长度为10，默认每个元素为100
createArray<string>(10, '张三') // 创建一个类型为string的数组，长度为10，默认每个元素为'张三'

泛型约束

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

function logLen<T>(obj: T) {
  console.log(obj.length)   // 当使用了泛型函数，直接这么访问特定类型才有的属性时，会报错
}

//  引入泛型约束 ↓↓↓

// 定义接口类型
interface LengthObj {
  length: number
}

// 使用泛型约束，泛型T必须继承了接口LengthObj，这样就继承到接口中的length属性
function logLen<T extends LengthObj>(obj: T) {
  console.log(obj.length)
}

 综合案例

// TS CODE
export { }

// 综合案例

// 时间处理函数
function formatTime(): string {
  const _date = new Date()
  const h = _date.getHours()
  const m = _date.getMinutes()
  const s = _date.getSeconds()
  return `${h}:${m}:${s}`
}

console.log(formatTime())

// 基于localStorage封装存取函数
type DataItem = {
  count: number
  time: string
}
const KEY = 'ts-key'
function setData(data: DataItem[]) {
  localStorage.setItem(KEY, JSON.stringify(data))
}

function getData(): DataItem[] {
  return JSON.parse(localStorage.getItem(KEY) || '[]')
}

// setData([{ count: 1, time: '10:10:10' }])
// console.log(getData())

// 核心业务处理函数
function updateData() {
  // 1. 获取当前的列表
  const list = getData()
  // 2. 取到上一条记录
  const lastItem = list[list.length - 1]
  // 3. 基于上一条记录count自增，然后把新数据添加到列表末尾
  list.push({
    count: lastItem ? lastItem.count + 1 : 1,
    time: formatTime(),
  })
  // 4. 把最新的列表存入本地
  setData(list)
}

updateData()

 

Omit排除指定字段

export type User = {
  /** token令牌 */
  token: string
  /** 用户ID */
  id: string
  /** 用户名称 */
  account: string
  /** 手机号 */
  mobile: string
  /** 头像 */
  avatar: string
}

// login登录register注册changeMobile更换手机号forgetPassword找回密码,bindMobile绑定三方登录
export type CodeType =
  | 'login'
  | 'register'
  | 'changeMobile'
  | 'forgetPassword'
  | 'bindMobile'

type OmitUser = Omit<User, 'token'>
export type UserInfo = OmitUser & {
  /** 关注 */
  likeNumber: number
  /** 收藏 */
  collectionNumber: number
  /** 积分 */
  score: number
  /** 优惠券 */
  couponNumber: number
  orderInfo: {
    /** 待付款 */
    paidNumber: number
    /** 待发货 */
    receivedNumber: number
    /** 待收货 */
    shippedNumber: number
    /** 已完成 */
    finishedNumber: number
  }
}

// Omit Pick TS的内置类型
// type Person = {
//   name: string
//   age: number
//   gender: 0 | 1
// }
// // Omit 是从对象中排出一些属性，得到对象类型
// type OmitPerson = Omit<Person, 'age' | 'gender'>  排除一些属性
// // Pick 是从对象中摘取一些属性，得到对象类型
// type PickPerson = Pick<Person, 'gender' | 'age'>  摘取保留一些属性

// 家庭档案-患者信息
export type Patient = {
  /** 患者ID */
  id?: string
  /** 患者名称 */
  name: string
  /** 身份证号 */
  idCard: string
  /** 0不默认  1默认 */
  defaultFlag: 0 | 1
  /** 0 女  1 男 */
  gender: 0 | 1
  /** 性别文字 */
  genderValue?: string
  /** 年龄 */
  age?: number
}

// 家庭档案-患者信息列表
export type PatientList = Patient[]

 

tyoeof

import CpNavBar from '@/components/CpNavBar.vue'
import CpIcon from '@/components/CpIcon.vue'
import CpRadioBtn from '@/components/CpRadioBtn.vue'
import CpPaySheet from '@/components/CpPaySheet.vue'

declare module 'vue' {
  interface GlobalComponents {
    // 添加组件类型
    CpNavBar: typeof CpNavBar    // typeof 拿到对象的类型
    CpIcon: typeof CpIcon
    CpRadioBtn: typeof CpRadioBtn
    CpPaySheet: typeof CpPaySheet
  }
}

keyof

type Key = keyof PartialConsult  // 拿到对象的所有字段的联合类型
onMounted(() => {
  // 生成订单需要的信息不完整的时候需要提示
  const validKeys: Key[] = [
    'type',
    'illnessType',
    'depId',
    'illnessDesc',
    'illnessTime',
    'consultFlag',
    'patientId'
  ]
  const valid = validKeys.every((key) => store.consult[key] !== undefined)  // 遍历，使用其中的key，去stroe.consult中取指定字段的值，如果不为undefined，则认为校验通过