学习目标

TypeScript 介绍 - 了解
TypeScript 初体验 - 了解
TypeScript 常用类型 - 掌握
TypeScript 高级类型 - 掌握
TypeScript 类型声明文件 - 掌握
在 Vue3 中使用 TypeScript - 掌握

TypeScript 起步

TypeScript 介绍

了解：TS是带类型语法的JS

官方网站：www.typescriptlang.org/

~~中文官网：~~ www.tslang.cn/

TypeScript 是什么

TypeScript 简称：TS，是 JavaScript 的超集，简单来说就是：JS 有的 TS 都有

TypeScript 是一种带有类型语法的 JavaScript 语言，简单来说就是：type + js = ts

TypeScript 是微软开发的开源编程语言。可以在任何运行 JavaScript 的地方运行

注意：TS 需要编译才能在浏览器运行。

总结：

TS 是 JS 的超集，支持JS 语法。
TS自带类型系统，微软开发。

TypeScript 作用

知道：TS作用是在编译时进行类型检查提示错误

发现：

JS 存在“先天缺陷”，JS 中绝大部分错误都是类型错误（Uncaught TypeError）
这些[错误]，导致挺多的时间去定位和处理 BUG

原因：

JS 是动态类型的编程语言，动态类型特点：只能在 代码执行 期间，做类型的相关检查，所以往往发现问题时，已经晚了。

方案：

TS 是静态类型的编程语言，代码会先进行编译然后去执行，在 代码编译 期间做类型的相关检查，如果有问题编译是不通过的，也就暴露出了问题。
配合 VSCode 等开发工具，TS 可以提前到在 编写代码 的时候就能发现问题，更准确更快的处理错误。

TS 优势：

更早发现错误，提高开发效率
随时随地提示，增强开发体验
强大类型系统，代码可维护性更好，重构代码更容易
趋势：Vue3源码TS重写，React和TS完美配合，Angular默认支持TS，大中型前端项目首选。

总结：

TypeScript 属于静态类型的编程语，JavaScript 属于动态类型的编程语言。
开发效率高，开发体验好，前端流行趋势。

TypeScript 编译

知道：如何使用 tsc 编译 ts 代码

全局安装：

# npm 安装
npm i -g typescript
# yarn 安装
yarn global add typescript
# 部分mac电脑安装需要sudo权限
# sudo npm i -g typescript
# sudo yarn global add typescript

查看版本：tsc -v

编译 TS：

新建 hello.ts 文件
当前目录打开命令行窗口，执行 tsc hello.ts 命令，自动生成 hello.js 文件
执行 node hello.js 验证一下

思考：

以后我们写 ts 都是手动的编译执行吗？
- 在开发中：一般使用 webpack vite 等工具自动构建编译。

TypeScript 核心

类型注解

知道：TypeScript 类型注解

示例代码：

// 约定变量 age 的类型为 number 类型
let age: number = 18;
age = 19;

语法：代码中: number 就是类型注解，
作用：为变量提供类型约束。
解释：约定了什么类型，就只能给该变量赋值什么类型的值，否则报错。

错误演示：

let age: number = 18;
// 报错：不能将类型“string”分配给类型“number”
age = '19';

小结：

什么是类型注解？
- 变量后面，约定类型的语法，就是类型注解
类型注解作用？
- 约定类型，违反报错

原始类型

知道：ts 有哪些类型，掌握：原始类型使用

TS 常用类型：

JS 已有类型
- 简单类型：number string boolean null undefined
- 复杂类型：对象、数组、函数
TS 新增类型
- 联合类型、交叉类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any、泛型等

原始类型：

使用简单，完全按照 JS 的类型来书写即可

let age: number = 18;
let myName: string = '程序员';
let isLoading: boolean = false;
let nullValue: null = null;
let undefinedValue: undefined = undefined;

小结：

语法： let 变量名：类型注解 = 值
特点：💥类型不匹配，直接报错。
推荐：👍简单数据类型，省略注解。

数组类型

掌握：数组类型的两种写法

写法 1

let numbers: number[] = [1, 3, 5];

写法 2

let strings: Array<string> = ['a', 'b', 'c'];

推荐使用：

number[] 写法👍

联合类型

掌握：通过联合类型将多个类型合并为一个类型

需求：数组中有 number 和 string 类型，这个数组的类型如何书写？

let arr: (number | string)[] = [1, 'a', 3, 'b'];

定义：

解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

注意：

这是 TS 中联合类型的语法，只有一根竖线，不要与 JS 中的或（|| 或）混淆了

类型别名

掌握：使用类型别名语法给类型取别字

示例代码：

let arr1: ( number | string )[] = [ 1, 'a', 4]
 let arr2: ( number | string )[] = [ 2, 'b', 3]

// 类型别名: type 类型别名 = 具体类型
type CustomArr = (number | string)[];
let arr1: CustomArr = [1, 'a', 4];
let arr2: CustomArr = [1, 'a', 4];

语法:

type 类型别名 = 任意类型 基本语法
使用类型别名，与类型注解的写法一样，: 自定义类型并没

作用：创建自定义类型，复用类型

函数类型

基本使用

掌握：给函数指定类型

给函数指定类型，其实是给 参数 和 返回值 指定类型。
两种写法：
- 在函数基础上 分别指定 参数和返回值类型
- 使用类型别名 同时指定 参数和返回值类型

示例代码 1：分别指定

// 函数声明
function add(num1: number, num2: number): number {
  return num1 + num2;
}

// 箭头函数
const add = (num1: number, num2: number): number => {
  return num1 + num2;
};

示例代码 2：同时指定

type AddFn = (num1: number, num2: number) => number;

const add: AddFn = (num1, num2) => {
  return num1 + num2;
};

注意：同时指定，类似箭头函数的语法。同时指定，只适用于 函数表达式。

void 类型

掌握：void 函数返回值类型

如果函数没有返回值，定义函数类型时返回值类型为 void

const say = (): void => {
  console.log('hi');
};

如果函数没有返回值，且没有定义函数返回值类型的时候，默认是 void

const say = () => {
  console.log('hi');
};

注意：

在 JS 中如果没有返回值，默认返回的是 undefined
但是 void 和 undefined 在 TypeScript 中并不是一回事
如果指定返回值类型是 undefined 那返回值必须是 undefined

const add = (): undefined => {
  return undefined;
};

小结：

函数没有返回值，使用👍void表示返回空，不推荐使用undefined👎

可选参数

掌握：使用 ? 将参数标记为可选

如果函数的参数，可以传也可以不传，这种情况就可以使用 可选参数 语法，
语法：参数后加 ? 即可

const fn = (n?: number) => {
  // ..
};
fn();
fn(10);

练习，模拟 slice 函数，定义函数参数类型

const mySlice = (start?: number, end?: number) => {
  console.log('起始Index:', start, '结束Index:', end);
};
mySlice();
mySlice(1);
mySlice(1, 2);

注意：必选参数不能位于可选参数后 (start?: number, end: number) 这样是不行的

总结：

可选参数：参数名称后有?
必选参数：参数名称后没有?
可选参数，只能出现在必选参数后

对象类型

基本使用

掌握：对象类型语法

TS 的对象类型，其实就是描述对象中的 属性 方法 的类型，因为对象是由属性和方法组成的。

// 空对象
let person: {} = {};

// 有属性的对象
let person: { name: string } = {
  name: '同学',
};

// 换行写可以省略 ; 符号
let person: {
  name: string;
  sayHi(): void;
} = {
  name: 'jack',
  sayHi() {},
};

小结：

描述对象结构？:{}
属性怎么写类型？属性名: 类型
方法怎么写类型? 方法名(): 返回值类型

扩展用法

掌握：对象类型中，函数使用箭头函数类型，属性设置可选，使用类型别名。

使用类型别名👍

// {} 会降低代码可阅读性，建议对象使用类型别名
// const axios = (config: { url: string; method?: string }) => {};
type Config = {
  url: string;
  method: string;
};
const axios = (config: Config) => {};

对象属性可选

type Config = {
   url: string;
-  method: string;
+  method?: string;
};
const axios = (config: Config) => {};

函数使用箭头函数类型

type Person = {
  sayHi: (name: string) => void
  sayHello(name: string) : void
}

let zs: Person = {
  sayHi(name) {
    console.log(name)
  }
}

小结：

对象的方法使用箭头函数类型怎么写？{sayHi:()=>void}
对象的可选参数怎么设置？{name?: string}
对象类型会使用 {} 如何提供可阅读性？类型别名

接口 interface

基本使用

掌握：使用 interface 声明对象类型

接口声明是命名对象类型的另一种方式

// 通过interface定义对象类型
interface Person {
  name: string
  age: number
  sayHi: () => void
}
// 使用类型
let person: Person = {
  name: 'jack',
  age: 19,
  sayHi() {},
};

小结：

interface 后面是接口名称，和类型别名的意思一样。
指定 接口名称 作为变量的类型使用。
接口的每一行只能有 一个 属性或方法，每一行不需要加分号。

interface 继承

掌握：使用 extends 实现接口继承，达到类型复用

思考：

有两个接口，有相同的属性或者函数，如何提高代码复用？

interface Point2D {
  x: number;
  y: number;
}
interface Point3D {
  x: number;
  y: number;
  z: number;
}

继承：

相同的属性或展示可以抽离出来，然后使用 extends 实现继承复用

interface Point2D {
  x: number;
  y: number;
}
// 继承 Point2D
interface Point3D extends Point2D {
  z: number;
}
// 继承后 Point3D 的结构：{ x: number; y: number; z: number }

小结：

接口继承的语法：interface 接口A extends 接口B {}
继承后 接口A 拥有 接口B 的所有属性和函数的类型声明

type 交叉类型

掌握：使用 交叉类型 实现接口的继承效果

实现 Point2D 与 {z: number} 类型合并得到 Ponit3D 类型

// 使用 type 来定义 Point2D 和 Point3D
type Point2D = {
  x: number;
  y: number;
};

// 使用 交叉类型 来实现接口继承的功能：
// 使用 交叉类型 后，Point3D === { x: number; y: number; z: number }
type Point3D = Point2D & {
  z: number;
};

let o: Point3D = {
  x: 1,
  y: 2,
  z: 3,
};

小结：

使用 & 可以合并连接的对象类型，也叫：交叉类型

interface vs type

了解：interface 和 type 的相同点和区别

类型别名和接口非常相似，在许多情况下，可以在它们之间自由选择。
接口的几乎所有特性都以类型的形式可用，关键的区别在于不能重新打开类型以添加新属性，而接口总是可扩展的。

interface	type
支持：对象类型	支持：对象类型，其他类型
复用：可以继承	复用：交叉类型

不同的点：

type 不可重复定义

type Person = {
  name: string;
};
// 标识符“Person”重复  Error
type Person = {
  age: number;
};

interface 重复定义会合并

interface Person {
  name: string;
}
interface Person {
  age: number;
}
// 类型会合并，注意：属性类型和方法类型不能重复定义
const p: Person = {
  name: 'jack',
  age: 18,
};

小结：

它们都可以定义对象类型
它们都可以复用，interface 使用 extends , type 使用 &
type 不能重复定义，interface 可以重复会合并

类型推断

知道：TS 的的类型推断机制作用

在 TS 中存在类型推断机制，在没有指定类型的情况下，TS 也会给变量提供类型。

发生类型推断的几个场景场景：

声明变量并初始化时

// 变量 age 的类型被自动推断为：number
let age = 18;

决定函数返回值时

// 函数返回值的类型被自动推断为：number
const add = (num1: number, num2: number) => {
  return num1 + num2;
};

建议：

推荐👍：能省略类型注解的地方就省略（偷懒，充分利用TS类型的推论，提升开发效率）
技巧🔔：如果你不知道类型怎么写，可以把鼠标悬停变量上，可以通过 VScode 提示看到类型
在你还没有熟悉 ts 类型的时候建议都加上类型，比如今天第一次写 ts 最好都写上

字面量类型

字面量类型介绍

知道：什么是字面量类型

思考：这两个变量的类型是什么？

let str1 = 'Hello TS';
const str2 = 'Hello TS';

通过类型推断发现，str1 类型是 string ， str2 类型是 Hello TS

解释：

str1 是一个变量，它的值可以是任意字符串，所以类型为string
str2 是常量，常量的值不能改，值只能是 Hello TS，所以类型是 Hello TS

总结：

字面量类型：值被作为类型。
任意的 JS 值（比如，对象、数字等），都可以作为类型使用

字面量类型应用

知道：字面量类型的应用场景

使用模式：字面量类型配合联合类型一起使用
使用场景：用来表示一组明确的取值范围

需求：性别只能是男和女，不会出现其他值。

// let gender = '男'
// gender = '女'
// ------------------------
type Gender = '男' | '女'
let gender: Gender = '男'
gender = '女'

解释：参数 direction 的值只能是 up/down/left/right 中的任意一个
优势：相比于 string 类型，使用字面量类型更加精确、严谨

例子：

在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，会有类型提示：
changeDirection('up')

小结：

语法：字面量+联合类型
场景：表示一组明确的取值范围
技巧：🔔
- VScode会自动提示字面量的值
- ctrl + i 开关提示

枚举 - 特殊

枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值
枚举：定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个

// 创建枚举
enum Direction { Up, Down, Left, Right }

// 使用枚举类型
function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection(Direction.Up)

解释:

使用 enum 关键字定义枚举
约定枚举名称以大写字母开头
枚举中的多个值之间通过 ,（逗号）分隔
定义好枚举后，直接使用枚举名称作为类型注解

枚举-数字枚举

问题：我们把枚举成员作为了函数的实参，它的值是什么呢?
解释：通过将鼠标移入 Direction.Up，可以看到枚举成员 Up 的值为 0
注意：枚举成员是有值的，默认为：从 0 开始自增的数值
我们把，枚举成员的值为数字的枚举，称为：数字枚举
当然，也可以给枚举中的成员初始化值

// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 10, Down, Left, Right }

enum Direction { Up = 2, Down = 4, Left = 8, Right = 16 }

字符串枚举

字符串枚举：枚举成员的值是字符串
注意：字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

any 类型👎

知道：any 类型的作用是逃避 TS 的类型检查

显式any情况：当变量的类型指定为 any 的时候，不会有任何错误，也不会有代码提示，TS会忽略类型检查

let obj: any = { age: 18 }
obj.bar = 100
obj()
const n: number = obj

以上的代码虽然没有报错提示，但是将来是可能出现错误的。

隐式any的情况：声明变量不给类型或初始值，函数参数不给类型或初始值

// 声明变量不给类型或初始值
let a;
// 函数参数不给类型或初始值
const fn = (n) => {}

小结：

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

类型断言

有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。比如

// aLink 的类型 HTMLElement，该类型只包含所有标签公共的属性或方法
// 这个类型太宽泛，没包含 a 元素特有的属性或方法，如 href
const aLink = document.getElementById('link')

但是我们明确知道获取的是一个 A 元素，可以通过 类型断言 给它指定一个更具体的类型。

const aLink = document.getElementById('link') as HTMLAnchorElement

解释:
1. 使用 as 关键字实现类型断言
2. 关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）
3. 通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了

例如：

const img = document.getElementById('img') as HTMLImageElement
// 如果不知道标签的类型：document.querySelector('div') 鼠标摸上去就可以看见

typeof

众所周知，JS 中提供了 typeof 操作符，用来在 JS 中获取数据的类型

console.log(typeof 'Hello world') // ?

实际上，TS 也提供了 typeof 操作符：也用来在 JS 中获取数据的类型
使用场景:根据已有变量的值，获取该值的类型，来简化类型书写

let p = { x: 1, y: 2 }
function formatPoint(point: { x: number; y: number }) {}
formatPoint(p)

function formatPoint(point: typeof p) { }

解释:
1. 使用 typeof 操作符来获取变量 p 的类型，结果与第一种（对象字面量形式的类型）相同
2. typeof 出现在类型注解的位置（参数名称的冒号后面）所处的环境就在类型上下文(区别于 JS 代码)
3. 注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数的调用）

案例

使用 TS 实现访问历史记录功能

需求：

刷新页面后，展示访问历史记录，记录包含：次数和时间。

步骤：

封装格式化时间函数，支持 string 格式的时间，可选参数，转换成功 10:10:10 时分秒
定义访问记录单项对象类型，定义访问记录列表类型，需要存储在本地的 key 字面量类型
封装获取访问历史记录函数，返回类型是记录列表
封装修改访问历史记录函数
封装一个展示访问历史记录函数，且调用

代码：

// 需求1. 封装格式化时间函数，string 格式的时间，转换成功 `10:10:10` 时分秒
// 要求：
//     1. formatTime()  返回 当前时分秒，如： 18:18:10
//     2. formatTime('2023-02-01 10:10:10')  返回 时分秒，如： 10:10:10
const formatTime = () => {
 
};


// 需求：去掉所有的any
const KEY = "ts-demo-data";


const render = () => {
  // 读取缓存
  const str: any = localStorage.getItem(KEY);
  const list =  JSON.parse(str) ;
  
  // 新增一条访问记录
  const lastItem = list[list.length - 1];
  list.push({
    // 要求：🔔 conut拼错了，要求报错，改为count
    conut: lastItem ? lastItem.count + 1 : 1,
    time: formatTime(),
  });

  // 存入缓存
  localStorage.setItem(KEY, JSON.stringify(list));
  
  // 渲染到界面中
  const app = document.querySelector("#app") as any;
  app.innerHTML = list
    .map((item) => `次数：${item.count}，时间：${item.time}`)
    .join("<br/>");
};

render();

TypeScript进阶

泛型

TIP

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
在TypeScript中，泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用，而是能被多种类型复用。类似于参数的作用，泛型是一种用以增强类型（types）、接口（interfaces）、函数类型等能力的非常可靠的手段。

泛型函数

掌握：泛型函数基本使用，保证函数内类型复用，且保证类型安全

// 函数的参数是什么类型，返回值就是什么类型
function getId<T>(id: T): T {
  return id
}

let id1 = getId<number>(1)
let id2 = getId('2')
// TS会进行类型推断，参数的类型作为泛型的类型 getId<string>('2')

小结

泛型函数语法？
- 函数名称后加上 <T> ， T是类型参数，是个类型变量，命名建议遵循大驼峰即可。
T 什么时候确定？
- 当你调用函数的时候，传入具体的类型，T 或捕获到这个类型，函数任何位置均可使用。
泛型函数好处？
- 让函数可以支持不同类型（复用），且保证类型是安全的。
调用函数，什么时候可以省略泛型？
- 传入的数据可以推断出你想要的类型，就可以省略。

// 我需要的类型 { name: string, age?: number } 但是推断出来是 { name: string}
let id2 = getId({name:'jack'})

泛型别名

掌握：泛型别名基本使用，实现类型复用

// 对后台返回的数据进行类型定义
type User = {
  name: string;
  age: number;
}

type Goods = {
  id: number;
  goodsName: string;
}

type Data<T> = {
  msg: string;
  code: number;
  data: T
}

// 使用类型
const user: Data<User> = {
  code: 200, msg: "响应成功", 
  data: {name: "zs", age: 18}
}
// 使用类型
const goods: Data<Goods> = {
  code: 200, msg: "响应成功", 
  data: {id: 1001, goodsName: "car"}
}

小结：

泛型：定义类型别名后加上<类型参数> 就是泛型语法，使用的时候传入具体的类型即可
<T> 是一个变量，可以随意命名，建议遵循大驼峰即可。
和类型别名配合，在类型别名后加上泛型语法，然后类型别名内就可以使用这个类型参数
泛型可以提高类型的复用性和灵活性

泛型接口

掌握：泛型接口基本使用，实现类型复用，了解内置泛型接

// 对象，获取单个ID函数，获取所有ID函数，ID的类型肯定是一致的，但是可能是数字可能是字符串
interface User  {
  name: string;
  age: number;
}

interface Goods {
  id: number;
  goodsName: string;
}

interface Data<T>  {
  msg: string;
  code: number;
  data: T
}

// 使用类型
const user: Data<User> = {
  code: 200, msg: "响应成功", 
  data: {name: "zs", age: 18}
}
// 使用类型
const goods: Data<Goods> = {
  code: 200, msg: "响应成功", 
  data: {id: 1001, goodsName: "car"}
}

在接口名称的后面添加 <类型变量>，那么，这个接口就变成了泛型接口，接口中所有成员都可以使用类型变量。

内置的泛型接口：

const arr = [1, 2, 3];
// TS有自动类型推断，其实可以看做：const arr: Array<number> = [1, 2, 3]
arr.push(4);
arr.forEach((item) => console.log(item));

可以通过 Ctrl + 鼠标左键(Mac：Command + 鼠标左键) 去查看内置的泛型接口

泛型工具

泛型工具: TS 内置了一些常用的工具类型，来简化 TS 中的一些常见操作
说明:它们都是基于泛型实现的(泛型适用于多种类型，更加通用)，并且是内置的，可以直接在代码中使用。这些工具类型有很多，主要学习以下几个:

Partial<Type>
1. 属性转可选
Readonly<Type>
1. 属性转只读
Pick<Type, Keys>
1. 选取属性
Omit<Type>
1. 删除属性

Partial

Partial<T> 用来构造(创建)一个类型，将 Type 的所有属性设置为可选。

type Props =  {
  id: string
  children: number[]
}

type PartialProps = Partial<Props>

解释:构造出来的新类型 PartialProps 结构和 Props 相同，但所有属性都变为可选的。

Readonly

Readonly<Type> 用来构造一个类型，将 Type 的所有属性都设置为 readonly(只读)

type Props =  {
  id: string
  children: number[]
}

type ReadonlyProps = Readonly<Props>

解释:构造出来的新类型 ReadonlyProps 结构和 Props 相同，但所有属性都变为只读的。

let props: ReadonlyProps = { id: '1', children: [] }
// 错误演示
props.id = '2'

当我们想重新给 id 属性赋值时，就会报错:无法分配到 "id" ，因为它是只读属性。

Pick

Pick<Type, Keys> 从 Type 中选择一组属性来构造新类型。

interface Props {
  id: string
  title: string
  children: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>

解释:
1. Pick 工具类型有两个类型变量:1 表示选择谁的属性 2 表示选择哪几个属性。 2. 其中第二个类型变量，如果只选择一个则只传入该属性名即可。
2. 第二个类型变量传入的属性只能是第一个类型变量中存在的属性。
3. 构造出来的新类型 PickProps，只有 id 和 title 两个属性类型。

Omit

Omit<K,T> 类型让我们可以从另一个对象类型中剔除某些属性，并创建一个新的对象类型：

K：是对象类型名称，T：是剔除K类型中的属性名称

type Props {
	name: string
	age: number
	hobby: string
	sex: “男" | "女"
}

// 如果我不希望有hobby和sex这两个属性，可以这么写
type NewProps = Omit<Props, "hobby" | "sex">
// 等价于
type NewProps  {
  name: string
  age: number
}

TypeScript类型声明文件

TIP

typescript 类型声明文件相关知识

知道：TS类型声明文件是什么以及作用

项目中安装的第三方库里面都是打包后的JS代码，但是我们使用的时候却有对应的TS类型提示，这是为什么呢？

在第三方库中的JS代码都有对应的 TS类型声明文件

什么是类型什么文件？

通俗地来讲，在 TypeScript 中以 .d.ts 为后缀的文件，我们称之为 TypeScript 类型声明文件。它的主要作用是描述 JavaScript 模块内所有导出成员的类型信息。

TS中的两种文件类型

TS 中有两种文件类型：1.ts 文件 2.d.ts

.ts 文件:
1. 既包含类型信息又可执行代码
2. 可以被编译为 .js 文件，然后，执行代码
3. 用途：编写程序代码的地方
.d.ts 文件:
1. 只包含类型信息的类型声明文件
2. 不会生成 .js 文件，仅用于提供类型信息,在.d.ts文件中不允许出现可执行的代码，只用于提供类型
3. 用途：为 JS 提供类型信息

小结：

.ts 是 implementation 代码实现文件
.d.ts 是 declaration 类型声明文件
如果要为 JS 库或者模块提供类型，就需要类型声明文件

使用-内置类型声明文件

知道：什么是内置的类型什么文件

发现，在使用数组时，数组所有方法都会有相应的代码提示以及类型信息:

const strs = ['a', 'b', 'c']
// 鼠标放在 forEach 上查看类型
strs.forEach

内置类型声明文件： TS为 JS 运行时可用的所有标准化内置 API 都提供了声明文件。

可以通过 Ctrl + 鼠标左键(Mac：Command + 鼠标左键)来查看内置类型声明文件内容
- 查看 forEach 的类型声明，在 VSCode 中会自动跳转到 lib.es5.d.ts 类型声明文件中
- 像 window、document 等 BOM、DOM API 也都有相应的类型声明文件 lib.dom.d.ts

使用-第三方库类型声明文件

掌握：给第三方库添加对应的类型声明文件

首先，常用的第三方库都有相应的类型声明文件，只是使用的方式不同而已。

第三方库的类型声明文件，有两种存在形式：

库自带类型声明文件
DefinitelyTyped提供

情况1：库本身自带类型声明文件：比如：axios。

解释：导入 axios 后，TS会加载该库的自带类型文件，以提供该库的类型声明。

情况2：由 DefinitelyTyped 提供

DefinitelyTyped 是一个 github 仓库，用来提供高质量 TypeScript 类型声明
比如：jquery，安装后导入，提示：需要安装 @types/jquery 类型声明包
当安装 @types/* 类型声明包后，TS 也会自动加载该类声明包，以提供该库的类型声明

小结：

第三方库，存在两种方式的类型声明文件：1库自带。 2DefinitelyTyped提供。
库自带，直接用，无需任何处理。
DefinitelyTyped提供，下载 @types/库名称

自定义类型声明文件

创建自己的类型声明文件：1. 项目内共享类型。2.为已有JS文件提供类型声明。

共享类型(重要)

掌握：使用类型声明文件提供需要共享的TS类型

需求：如果多个 .ts 文件中都用到同一个类型，此时可以创建 .d.ts 文件提供该类型，实现类型共享。

操作步骤:

创建 index.d.ts 类型声明文件。
创建需要共享的类型，并使用 export 导出(TS 中的类型也可以使用 import/export 实现模块化功能)。
在需要使用共享类型的 .ts 文件中，通过 import 导入即可(.d.ts 后缀导入时，直接省略)。

src/types/data.d.ts

export type Person = {
  id: number;
  name: string;
  age: number;
};

User.ts

import { Person } from './types/data'
const p: Person = {
  id: 100,
  name: 'jack',
  age: 19
}

给JS文件提供类型

了解：使用类型声明文件给JS文件添加类型

说明：

.ts文件中，也可以使用.js文件。
在.ts文件中导入 .js 文件时，TS 会自动加载与 .js 同名的 .d.ts 文件，以提供类型声明。

语法：declare 关键字

解释：为js文件中已存在的变量，声明类型，而不是定义一个新的变量。

规则：

对于TS 独有的关键字，可以省略 declare 关键字。如 type interface 等。
对于TS、JS都有的关键字，使用 declare 关键字。如let function等。

add/index.js

const addFn = (a, b) => {
  return a + b;
};

const pointFn = (p) => {
  console.log('坐标：', p.x, p.y);
};

export { addFn, pointFn }

add/index.d.ts

declare const addFn: (a: number, b: number) => number;

type Position = {
  x: number;
  y: number;
};

declare const pointFn: (p: Position) => void;
// 💥 注意要导出
export { addFn , pointFn};

main.ts

import { addFn , pointFn} from './add';

addFn(3, 10)

pointFn({x: 100, y: 200})

扩展-给第三方模块，提供类型

使用关键字module

定义同名类型声明文件：包名称.d.ts
使用 declare module "包名称" {} 定义模块类型

说明：TS会自动加载：包名称.d.ts中的类型

代码：

定义同名类型声明文件：jquery.d.ts

declare module "jquery" {
  // 注意：module范围内，不需要再使用declare关键字
  function $(tagName: "div" | "span"): any
  export default $
}

main.ts中导入jquery，观察效果

import $ from 'jquery';

$("span")

注意：

module范围内，不需要再使用declare关键字
类型声明文件名称，module名称，与模块包同名

TypeScript 应用

创建 vue-ts 项目

创建一个基于 ts 的 vue 项目，来学习 ts 语法

# npm 6.x
npm create vite@latest my-vue-ts-app --template vue-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-ts-app -- --template vue-ts

# yarn
yarn create vite my-vue-ts-app --template vue-ts

# pnpm
pnpm create vite my-vue-ts-app --template vue-ts

在基于 vite 的项目中可以直接验证 ts 代码结果，因为已经配置好了 ts 环境。

① TypeScript与Vue

TIP

typescript 配合 Vue3 composition-api 使用

staging-cn.vuejs.org/guide/types…

前提：script 加上 lang="ts" 才能写ts代码

<script setup lang="ts"></script>

defineProps的TS写法

defineProps 的基本使用：

const props = defineProps({
  money: {
    type: Number,
    required: true
  },
  car: {
    type: String,
    required: false,
    default: '宝马车'
  }
})
console.log(props.money) // number
console.log(props.car) // string | undefined

2.defineProps 通过泛型参数来定义 props 的类型通常更直接

// 👎
const props = defineProps<{
  money: number
  car?: string
}>()

// 👍 推荐
interface Props {
  money: number
  car?: string
}

const props = defineProps<Props>()

如果需要给 props 设置默认值，👎需要使用 withDefaults 函数：

const props = withDefaults(defineProps<Props>(),{
  car: '宝马车'
})

上面写法太笨拙，可以使用响应式语法糖解构 + defineProps 就行：

const { money, car = "宝马车" } = defineProps<Props>();

注意：目前需要显式地选择开启，因为它还是一个实验性特性

// vite.config.ts
export default defineConfig({
  plugins: [
    vue({
      reactivityTransform: true,
    }),
  ],
});

扩展-了解TS中函数的调用签名

// 普通函数的写法
type MyFn = (name: "changeNum" | "changeStr", value: number | string ) => void

const fn: MyFn = (name, value) => {};

fn("changeNum", "1");
fn("changeNum", 1);
fn("changeStr", "1");

扩展：TS语法调用签名

JS中万物皆对象，函数也属于对象类型

interface MyFn {
  (name: "changeNum", value: number): void;
  (name: "changeStr", value: string): void;
}

const fn: MyFn = (name, value) => {};

fn("changeNum", "1"); // ❌会报错
fn("changeMsg", 1); // ❌会报错

fn("changeNum", "1"); // ✅
fn("changeMsg", 1); // ✅

defineEmits的TS写法

defineEmits 的JS用法：

const emit = defineEmits(['changeMoney', 'changeCar'])

defineEmits 通过泛型参数来定义，可以实现更细粒度的校验：

// 👎·
const emit = defineEmits<{
  (e: 'changeMoney', money: number): void
  (e: 'changeCar', car: string): void
}>()

// 👍·
interface Emits  {  
  (e: 'changeMoney', money: number): void
  (e: 'changeCar', car: string): void
}
const emit = defineEmits<Emits>()

ref的TS写法

ref() 会隐式的依据数据推导类型

如果是简单类型，推荐使用类型推导：

// const money = ref<number>(10)

const money = ref(10)

如果是复杂类型，推荐指定泛型：

type Todo = {
  id: number
  name: string
  done: boolean
}
const list = ref<Todo[]>([])

setTimeout(() => {
  list.value = [
    { id: 1, name: '吃饭', done: false },
    { id: 2, name: '睡觉', done: true }
  ]
}, 1000)

复杂数据一般是后台返回数据，默认值是空，无法进行类型推导。

小结：

简单数据类型，省略泛型
复杂数据类型，完整写法

reactive的TS写法

reactive() 也会隐式的依据数据推导类型

默认值属性是固定的，推荐使用类型推导：

// 推导得到的类型：{ title: string }
const book = reactive({ title: 'Vue3 在线医疗' })

根据默认值推导不出我们需要的类型，推荐使用接口或者类型别名给变量指定类型：

// 我们想要的类型：{ title: string, year?: number }
type Book = {
  title: string
  year?: number
}
const book: Book = reactive({ title: 'Vue3 在线医疗' })
book.year = 2022

computed和TS

computed() 会从其计算函数的返回值上推导出类型：

import { ref, computed } from 'vue'

const count = ref(100);
const doubleCount = computed(() => count.value * 2);

可以通过泛型参数显式指定类型：

const doubleMoney = computed<string>(() => (count.value * 2).toFixed(2));

事件处理与TS

不加类型，event默认是any，类型不安全：

<script setup lang="ts">
// 提示：参数“event”隐式具有“any”类型。  
const handleChange = (event) => {
  console.log(event.target.value)
}
</script>

<template>
  <input type="text" @change="handleChange" />
</template>

处理类型：

// `event` 隐式地标注为 `any` 类型，如何指定：event 类型?
// 1. @change="handleChange($event)"" 查看$event类型
// 2. 鼠标悬停事件 @change 查看类型
const handleChange = (event: Event) => {
  // `event.target` 是 `EventTarget | null` 类型，如何指定具体类型？
  // document.querySelector('input') 查看返回值类型
  console.log((event.target as HTMLInputElement).value)
}

Template Ref与TS

模板 ref 需要通过一个显式指定的泛型参数，建议默认值 null

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const el = ref<HTMLInputElement | null>(null)

onMounted(() => {
  el.value?.focus()
})
</script>

<template>
  <input ref="el" />
</template>

注意为了严格的类型安全，有必要在访问 el.value 时使用可选链或类型守卫。
这是因为直到组件被挂载前，这个 ref 的值都是初始的 null，并且在由于 v-if 的行为将引用的元素卸载时也可以被设置为 null。

非空断言

处理类型可能是 null 或 undefined 的值，下面的属性或函数的访问赋值：

可选链

<script setup lang="ts">
import { onMounted, ref } from 'vue';


const input = ref< HTMLInputElement | null >(null)

onMounted(()=>{
  // 可选链：只能访问，不能赋值
  // input.value?.value = "123" ❌
  console.log(input.value?.value);
})

</script>

<template>
  <div>App组件</div>
  <input type="text" ref="input" value="abc">
</template>

逻辑判断

// 逻辑判断， 类型守卫
  if (input.value) {
    console.log(input.value.value)
    input.value.value = '123'
  }

非空断言

// 一定要确定不为空！！！
  console.log(input.value!.value)
  input.value!.value = '123'

TypeScript教程

学习目标

TypeScript 起步

TypeScript 介绍

TypeScript 是什么

TypeScript 作用

TypeScript 编译

TypeScript 核心

类型注解

原始类型

数组类型

联合类型

类型别名

函数类型

基本使用

void 类型

可选参数

对象类型

基本使用

扩展用法

接口 interface

基本使用

interface 继承

type 交叉类型

interface vs type​

类型推断

字面量类型

字面量类型介绍

字面量类型应用

枚举 - 特殊

枚举-数字枚举

字符串枚举

any 类型👎

类型断言

typeof

案例

TypeScript进阶

泛型

泛型函数

泛型别名​

泛型接口

泛型工具

Partial

Readonly

Pick

Omit

TypeScript类型声明文件

TS中的两种文件类型

使用-内置类型声明文件

使用-第三方库类型声明文件

自定义类型声明文件

共享类型(重要)

给JS文件提供类型

扩展-给第三方模块，提供类型

TypeScript 应用

创建 vue-ts 项目

① TypeScript与Vue

defineProps的TS写法

扩展-了解TS中函数的调用签名

defineEmits的TS写法

ref的TS写法

reactive的TS写法

computed和TS

事件处理与TS

Template Ref与TS

非空断言

interface vs type

泛型别名