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 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数的调用）

泛型

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名称，与模块包同名

在vue3中使用ts

定义变量

//原始类型：三种方式均可，如果变量类型后期不会改变则可以省略，如果会改变，则不能省略
//可省略
const money = ref<number>(50)
const money = ref(50)
//不能省略
const _money = ref<number | string>(50)
_money.value = '20'

// 对象
interface UserInfo {
  name: string
  age: number | string
  isMan: boolean
}
const userInfo = ref<UserInfo>({
  name: 'jack',
  age: 20,
  isMan: true
})
userInfo.value.age = '30'

// 数组
const list = ref<UserInfo[]>([])
list.value.push({
  name: 'jack',
  age: 20,
  isMan: true
})

计算属性

// 一般可以省略，如果返回值不确定，则不能省略
const listLength = computed<number>(() => {
  return list.value.length
})

事件处理

const btnAdd = (e: MouseEvent) => {}
const KeyUp = (e: KeyboardEvent) => {}

组件传值

父：
<script setup lang="ts">
const money = ref(50)
const add = (val: number) => {
  console.log('val -->', val)
  money.value += val
}
</script>

<Children ref="childrenRef"  :money="money" car="宝马" @add="add"></Children>

子：
interface CarType {
  money: number
  car: string
  speed?: number
}
const props = defineProps<CarType>()

// 如果需要定义 props 的默认值
// 'withDefaults' 是 Vue 3 Composition API 中提供的一个函数，用于为组件的 props 添加默认值。它可以在 defineProps 之后使用，为 props 设置默认值，以便在使用组件时，如果没有传递相应的 prop，就会使用默认值。
const props = withDefaults(defineProps<CarType>(), {
  money: 0,
  car: '五菱',
  speed: 100
})

// 事件
const emit = defineEmits<{
  (e: 'add', value: number): void
}>()

模版ref

// 父组件
const childrenRef = ref<InstanceType<typeof Children> | null>(null)
onMounted(() => {
  if (childrenRef.value) {
    const aaa = childrenRef.value.aaa
  }
})

// 子组件
const aaa = ref('123456')
defineExpose({
  aaa,
  handleBtn
})

后台接口数据

// 在 TypeScript 中，import type 是一种导入类型的方式，用于仅导入类型而不引入实际的运行时代码。这可以帮助减小生成的代码大小，并在某些情况下提高性能。使用 import type 可以确保你的导入语句只引入类型信息，而不会在实际运行时加载不必要的模块，从而减小代码体积。
import type { ResObject, TaskTypeFather, TaskType } from '@/type'

// 模拟接口
const getData = (): Promise<ResObject<TaskTypeFather>> => {
  return new Promise<ResObject<TaskTypeFather>>((resolve, reject) => {
    setTimeout(() => {
      resolve(res)
    }, 1000)
  })
}

const data = ref<TaskType[]>([])
const pages = ref<number | string>(0)

const getDataFn = async () => {
  const res = await getData()
  const { result } = res
  
  pages.value = result.pages
  data.value = result.records

  // 出现代码提示
  console.log(data.value[0])
}
getDataFn()

export interface ResObject<T> {
    success: boolean
    message: string
    code: number
    bizCode?: any
    result: T
    timestamp: number
    errCode?: any
}

export interface TaskTypeFather {
    records: TaskType[];
    total: number;
    size: number;
    current: number;
    orders?: any[];
    optimizeCountSql?: boolean;
    searchCount?: boolean;
    countId?: any;
    maxLimit?: any;
    pages: number;
}
export interface TaskType {
    trainTaskId: string;
    planSubId: any;
    sysOrgCode: string;
    taskTeamId: string;
    trainTime: string;
    planSubName: string;
    taskHours: string;
    teacher: string;
    trainTarget: string;
    inComeNum: number;
    reallyComNum: number;
    trainRate: string;
    examStatus: number;
    examPassRate: string;
    taskState: number;
    isPlan: string;
    remarks: any;
    examStatus_dictText: string;
    taskState_dictText: string;
}

1小时搞定TypeScript，轻松应对90%的业务需求

TypeScript 核心​

类型注解​

原始类型​

数组类型​

联合类型​

类型别名​

函数类型​

基本使用​

void 类型​

可选参数​

对象类型​

基本使用​

扩展用法​

接口 interface​

基本使用​

interface 继承​

type 交叉类型​

interface vs type​

类型推断​

字面量类型​

字面量类型介绍​

字面量类型应用​

枚举 - 特殊​

枚举-数字枚举​

字符串枚举​

any 类型👎​

类型断言​

typeof​

泛型​

泛型函数​

泛型别名​

泛型接口​

泛型工具​

Partial​

Readonly​

Pick​

Omit​

TypeScript类型声明文件​

基本介绍​

TS中的两种文件类型​

使用-内置类型声明文件​

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

自定义类型声明文件​

共享类型(重要)​

给JS文件提供类型​

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

在vue3中使用ts

定义变量

计算属性

事件处理

组件传值

模版ref

后台接口数据

TypeScript 核心

类型注解

原始类型

数组类型

联合类型

类型别名

函数类型

基本使用

void 类型

可选参数

对象类型

基本使用

扩展用法

接口 interface

基本使用

interface 继承

type 交叉类型

interface vs type

类型推断

字面量类型

字面量类型介绍

字面量类型应用

枚举 - 特殊

枚举-数字枚举

字符串枚举

any 类型👎

类型断言

typeof

泛型

泛型函数

泛型别名

泛型接口

泛型工具

Partial

Readonly

Pick

Omit

TypeScript类型声明文件

基本介绍

TS中的两种文件类型

使用-内置类型声明文件

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

自定义类型声明文件

共享类型(重要)

给JS文件提供类型

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