【TypeScript】TS全解
文章目录
- 一、TypeScript 介绍
- (一)TypeScript
- (二)优势
- 二、TypeScript 使用准备
- (一)安装编译 TS 的工具包
- (二)编译并运行 TS 代码
- (三)简化运行 TS 的步骤
- 三、TypeScript 常用类型
- (一)类型注解
- 1、类型注解
- 2、类型别名 type
- (二)常用基础类型
- 1、JS 已有类型
- (1)原始类型
- (2)数组类型
- (3)对象类型
- (4)函数类型
- 2、TS 新增类型
- (1)联合类型
- (2)自定义类型/类型别名
- (3)接口
- (4)元组
- (5)字面量类型
- (6)枚举(了解)
- (7)void 类型
- (8)any 类型(不推荐)
- (三)TS 类型方法
- 1、类型推论
- 2、类型断言
- 3、typeof
- 四、TypeScript 高级类型
- (一)泛型
- 1、创建泛型函数
- 2、调用泛型函数
- 3、泛型约束
- (1)指定更加具体的类型
- (2)添加约束
- 4、keyof
- 5、泛型接口
- 6、泛型工具类型
- (1)Partial
- (2)Readonly
- (3)Pick
- (4)Omit
- (二)索引签名类型
- 数组索引类型签名
- (三)映射类型
- 根据对象创建
- 内置映射类型实现分析
- 索引访问类型
- 同时查询多个索引的类型
- 五、在原有项目使用 TS
- 创建新项目
- tsconfig 文档介绍
- (一)typescript 声明文件
- 1、TS 两种文件类型
- 2、类型声明文件使用说明
- (1)内置类型声明文件
- (2)第三方库的类型声明文件
- (3)创建自己的类型声明文件
- (4)类型声明文件的使用说明
- (二)在现有项目中添加 TS
一、TypeScript 介绍
- TS 官方文档
- TS 中文参考 - 不再维护
(一)TypeScript
- 背景:JS 属于
弱类型
语言,易产生类型错误 ,项目开发时增加了查改 Bug 的时间,影响效率 - 定义:TypeScript 简称 TS,是 JavaScript 的超集,包含所有 JS 功能且延伸
类型支持
功能 - 区别
- JavaScript:动态类型,
执行
期做类型检查,代码执行时
发现错误 - TypeScript:静态类型,
编译
期做类型检查,代码执行前
发现错误;配合 VSCode,代码编写时
发现错误
- JavaScript:动态类型,
(二)优势
- 程序中随时有
代码提示
,减少查改 Bug 时间,提升开发效率 - 强大的类型系统提升了代码的可维护性,使得
重构代码更加容易
- 支持最新的 ECMAScript 语法,优先体验最新语法
- TS 类型推断机制,不需要在代码中的每个地方都显示标注类型
二、TypeScript 使用准备
(一)安装编译 TS 的工具包
- 背景:Node.js / 浏览器,仅识别 JS 代码,需要先将 TS 转为 JS 代码才能运行
- 安装命令:
npm i -g typescript
- TS 包:编译 TS 代码的包,提供
tsc
命令实现 TS => JS - 查看版本:tsc –v
- TS 包:编译 TS 代码的包,提供
(二)编译并运行 TS 代码
- 创建 TS:新建 .ts 文件
- 编译 TS:在终端中输入命令
tsc file.ts
- 执行 JS:在终端中输入命令
node file.js
- 所有合法 JS 代码都是 TS 代码,JS 基础上只学习 TS 类型即可
- 由 TS 编译生成同级 JS 文件,代码中不含类型信息
(三)简化运行 TS 的步骤
- 简化方式:使用
ts-node
包,在 Node.js 中执行 TS 代码 - 安装命令:
npm i -g ts-node
- 使用方式:
ts-node file.ts
- ts-node 不生成 js 文件
三、TypeScript 常用类型
- 类型系统:TS 是 JS 的超集,提供 JS 所有功能并额外增加
类型系统
- JS 代码都是 TS 代码
- JS 类型不检查变化,TS 检查变量类型变化
- 主要优势:可以显示标记出代码中的意外行为,从而降低了发生错误的可能性
(一)类型注解
1、类型注解
- 体现:
: number
- 作用:
为变量添加类型约束
let age: number = 18
2、类型别名 type
- 特点:支持所有类型创建类型别名,一般用于复杂数据类型
// 创建类型别名
type Person = {name: stringsayHi(): voidgreet(name: string): void // 普通函数带参数的方法类型meet: (name: string) => void // 箭头函数带参数的方法类型
}// 使用类型别名作为对象的类型
let person: Person = {name: 'jack',sayHi() {}greet(name) {console.log(name)}meet(name) {console.log(name)}
}
(二)常用基础类型
1、JS 已有类型
(1)原始类型
- 特点:简单类型,按 JS 类型名称书写
- 包含:number / string / boolean / null / undefined / symbol
let age: number = 18
let myName: string = '老师'
let isLoading: boolean = false
let nu: null = null
let un: undefined = undefined
let smb: symbol = symbol
(2)数组类型
- 写法一:
arrType[]
(推荐) - 写法二:
Array<arrType>
// 写法一:
let numbers: number[] = [1, 3, 5]
// 写法二:
let strings: Array<string> = ['a', 'b', 'c']
(3)对象类型
- JS 中的对象由属性和方法构成,而 TS 对象类型就是
描述对象结构
- 使用
{}
描述对象结构 - 属性采用
key:type
形式 - 方法采用
fn():type
形式
- 使用
// 空对象
let person: {} = {}// 有属性的对象
let person: { name: string } = {name: '同学'
}// 既有属性又有方法的对象
let person: {name: stringsayHi(): void
} = {name: 'jack',sayHi() {}
}
- 对象可选属性
- 定义:对象的属性或方法,可以为可选
- 语法:使用
?
表示
type Config = {url: stringmethod?: string
}function myAxios(config: Config) {console.log(config)
}
(4)函数类型
- 特点:约束
函数参数
和返回值
的类型 - 单独指定
// 函数声明
function add(num1: number, num2: number): number {return num1 + num2
}// 箭头函数
const add = (num1: number, num2: number): number => {return num1 + num2
}
- 同时指定
- 特点:
函数表达式
可以通过类箭头函数的语法为函数添加类型,声明函数不支持
- 特点:
type AddFn = (num1: number, num2: number) => number // 使用 typeconst add: AddFn = (num1, num2) => {return num1 + num2
}
- 函数可选参数
- 特点:参数不固定情况下,函数参数指定类型为
可选参数
- 语法:在不固定参数名称后面添加
?
- 注意:可选参数只能出现在参数列表的最后,也就是说可选参数后面不能再出现必选参数
- 特点:参数不固定情况下,函数参数指定类型为
function mySlice(start?: number, end?: number): void {console.log('起始索引:', start, '结束索引:', end)
}
2、TS 新增类型
(1)联合类型
- 定义:由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种
- 语法:使用
|
联合
let arr: (number | string)[] = [1, 'a', 3, 'b']
(2)自定义类型/类型别名
- 定义:为
任意类型
起别名 - 语法:使用
type
声明别名,别名推荐使用大写字母开头 - 场景:当同一类型(复杂)被多次使用时,可以通过类型别名,简化该类型的使用
type CustomArray = (number | string)[]let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]
(3)接口
- 定义:为
对象类型
添加接口 - 语法:使用
interface
声明,接口名称推荐以I
开头 - 场景:当对象类型被多次使用,可用接口描述对象类型,达到复用目的
interface IPerson {name: stringage: numbersayHi(): void
}let person: IPerson = {name: 'jack',age: 19,sayHi() {}
}
- interface vs type
- 相同:可以给对象指定类型
- 不同
- 接口:仅为对象指定类型,有继承性
- 类型别名:不仅为对象指定类型,支持任意类型指定类型
// 为对象类型提供类型接口
interface IPerson {name: stringage: numbersayHi(): void
}// 为对象类型创建类型别名
type IPerson = {name: stringage: numbersayHi(): void
}// 为联合类型创建类型别名
type NumStr = number | string
- 接口继承
- 语法:使用
extends
继承
- 语法:使用
interface Point2D { x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {z: number
}
(4)元组
- 特点:确定数组中
元素类型
和元素个数
- 语法:元组
Tuple
// 普通数组,不确定元素个数
let position: number[] = [116.2317, 39.5427]// 元祖,确定元素类型和个数
let position: [number, number] = [39.5427, 116.2317]
(5)字面量类型
- 定义:任意 JS 字面量(如对象、数字等)可以作为 TS 中的类型
let str1 = 'Hello TS' // let 定义 str1 是变量
let str1: string = 'Hello TS'const str2 = 'Hello TS' // const 定义 str2 是常量
const str2: 'Hello TS' = 'Hello TS'
- 使用模式和场景
- 特点:配合联合类型使用,表示一组
明确的可选值列表
- 优势:相比 string 类型,字面量类型更精确、严谨
- 特点:配合联合类型使用,表示一组
// 比如在贪吃蛇游戏中,游戏的方向可选值只能是上、下、左、右
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'function changeDirection(direction: Direction) {console.log(direction)
}// 调用函数时,会有类型提示:
changeDirection('up')
(6)枚举(了解)
- 特点:类似字面量类型 + 联合类型组合,也可以表示一组
明确的可选值
,还支持直接使用枚举名称
作为类型注解 - 语法:使用
enum
关键字定义枚举- 约定枚举名称以大写字母开头
- 支持使用枚举名称作为类型注解
// 创建枚举
enum Direction { Up, Down, Left, Right }// 使用枚举类型
function changeDirection(direction: Direction) {console.log(direction)
}// 调用函数时,通过点(.)语法访问枚举 Direction 成员
changeDirection(Direction.Up)
- 数字枚举
- 特点:枚举成员的值为数字,默认从 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'
}
- 枚举实现原理
- 其他类型仅为类型,而枚举不仅为类型,还提供值(枚举成员均有值),即其他类型编译为 JS 代码时自动移除,但枚举类型会被编译为 JS 代码
enum Direction {Up = 'UP',Down = 'DOWN',Left = 'LEFT',Right = 'RIGHT'
}// 编译为以下 JS 代码
var Direction;(function (Direction) {Direction['Up'] = 'UP'Direction['Down'] = 'DOWN'Direction['Left'] = 'LEFT'Direction['Right'] = 'RIGHT'
})(Direction || Direction = {})
(7)void 类型
- 特点:如果
函数无返回值
,则使用void
function greet(name: string): void {console.log('Hello', name)
}// 如果什么都不写,此时,add 函数的返回值类型为: void
const add = () => {}
// 这种写法是明确指定函数返回值类型为 void,与上面不指定返回值类型相同
const add = (): void => {}// 如果指定返回值类型为 undefined,此时,函数体中必须显示的 return undefined 才可以
const add = (): undefined => {// 此处,返回的 undefined 是 JS 中的一个值return undefined
}
(8)any 类型(不推荐)
- 特点:值类型为 any 时,可以对该值进行任意操作且没有代码提示,不推荐使用
let obj: any = { x: 0 }obj.bar = 100
obj()
const n: number = obj
- 使用场景
- 临时使用 any 避免书写很长、很复杂的类型
- 其他隐式具有 any 类型的情况
(三)TS 类型方法
1、类型推论
- 定义:TS 中,某些没有指出类型的地方,TS 的类型推论机制会帮助提供类型
- 场景
- 声明变量并初始化时
- 决定函数返回值时
// 变量 age 的类型被自动推断为:number
let age = 18// 函数返回值的类型被自动推断为:number
function add(num1: number, num2: number) {return num1 + num2
}
- 使用
- 类型注解能省就省,充分利用TS类型推论的能力,提升开发效率
- 可以通过鼠标放在变量名称上,利用 VSCode 提示查看类型
- 在 VSCode 中写代码,多看方法、属性类型
2、类型断言
- 特点:开发者比 TS 更明确一个值的类型,使用类型断言指定更具体类型
- 语法:使用
as
关键字实现类型断言,后面补充一个更具体的类型- 技巧:在浏览器控制台,通过
__proto__
获取 DOM 元素的类型
- 技巧:在浏览器控制台,通过
// 返回类型为 HTMLElement,只包含所有标签公共的属性或方法,不包含 a 标签特有的 href 等属性
const aLink = document.getElementById('link')// 使用类型断言指定更加具体的类型,HTMLAnchorElement 是 HTMLElement 的子类型
const aLink = document.getElementById('link') as HTMLAnchorElement
- 语法:使用
<>
语法(不推荐)
// 在react的jsx中使用会报错
const aLink = <HTMLAnchorElement>document.getElementById('link')
3、typeof
- 特点:TS 提供 typeof 操作符在类型上下文中引用
变量或属性类型
(类型查询) - 场景:根据已有变量的值获取类型,简化类型书写
let p = { x: 1, y: 2 }// 简化前
function formatPoint(point: { x: number; y: number }) {}// 简化后
function formatPoint(point: typeof p) {}
四、TypeScript 高级类型
(一)泛型
- 定义:在保证类型安全前提下,让函数等与多种类型一起工作,从而实现复用,常用于函数、接口、class 中
- 需求:创建一个 id 函数,传入什么数据就返回该数据本身(也就是说,参数和返回值类型相同)
1、创建泛型函数
- 语法:在函数名称后面添加
<类型变量 Type>
,即一种特殊类型的变量,相当于类型容器
function id<Type>(value: Type): Type { return value }function id<T>(value: T): T { return value }
2、调用泛型函数
- 语法:在函数名称后面添加
<指定类型>
const num = id<number>(10)
const str = id<string>('a')// 简化泛型函数调用,省略 <指定类型>,TS 进行类型参数推断
let num = id(10)
let str = id('a')
3、泛型约束
- 背景:泛型函数的类型变量 Type 可以代表任意类型,导致无法访问具体属性,需要为泛型添加约束
收缩类型
(1)指定更加具体的类型
- 方法:将类型修改为相关具体类型
function id<Type>(value: Type[]): Type[] {console.log(value.length)return value
}
(2)添加约束
- 创建接口:创建描述约束的接口 Ixxx,要求接口提供相关属性
- 添加约束:通过
extends
关键字使用该接口,为泛型添加约束和属性
// 创建一个接口
interface ILength { length: number }// Type extends ILength 添加泛型约束
// 传入类型必须满足 ILength 接口要求,即 number 类型的 length 属性
function id<Type extends ILength>(value: Type): Type {console.log(value.length)return value
}
4、keyof
- 定义:泛型的类型变量可以有多个,并且
类型变量之间可以约束
- 语法:keyof 关键字接收一个类型变量,生成其键名称的联合类型
- 类型变量 Key 受 Type 约束,只是 Type 所有键之一,只能访问对象中存在的属性
function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {// keyof Type 获取 person 对象所有键的联合类型,即`'name' | 'age'`return obj[key]
}
let person = { name: 'jack', age: 18 }
getProp(person, 'name')// Type extends object:Type 应该是一个对象类型
// 对象类型,应该用 object ,而不是 Object
function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key) {return obj[key]
}
5、泛型接口
- 定义:接口可以配合泛型使用,增加灵活性和复用性
- 语法
- 定义:在接口名称后面添加
<类型变量>
- 使用:需要显式指定具体的类型
Ixxx<类型>
- 定义:在接口名称后面添加
interface IdFunc<Type> {id: (value: Type) => Typeids: () => Type[]
}// 接口中所有成员都可以使用类型变量
let obj: IdFunc<number> = {id(value) { return value }, // 参数和返回值类型是 numberids() { return [1, 3, 5] } // 返回值类型是 number[]
}
- JS 中的泛型接口
- JS 数组在 TS 中就是一个泛型接口
- 使用数组时,TS 会根据数组的不同类型,自动将类型变量设置为相应类型
- 通过 Ctrl + 鼠标左键(Mac:Command + 鼠标左键)来查看具体的类型信息
const strs = ['a', 'b', 'c']
// 鼠标放在 forEach 上查看类型
strs.forEachconst nums = [1, 3, 5]
// 鼠标放在 forEach 上查看类型
nums.forEach
6、泛型工具类型
- 定义:TS 内置一些常用的工具类型,简化 TS 中常见操作
(1)Partial
- 定义:构造一个类型,将 Type 的所有属性设置为可选
- 语法:
Partial<Type>
type Props = {id: stringchildren: number[]
}// 构造出的新类型 PartialProps 结构和 Props 相同,但所有属性都为可选
type PartialProps = Partial<Props>
(2)Readonly
- 定义:构造一个类型,将 Type 的所有属性都设置为只读
- 语法:
Readonly<Type>
type Props = {id: stringchildren: number[]
}// 构造出的新类型 PartialProps 结构和 Props 相同,但所有属性都为只读
type ReadonlyProps = Readonly<Props>// 错误演示
let props: ReadonlyProps = { id: '1', children: [] }
props.id = '2'
(3)Pick
- 定义:从 Type 中选择一组属性构造新类型
- 语法:
Pick<Type, Keys>
interface Props {id: stringtitle: stringchildren: number[]
}// 第二个类型变量传入的属性只能是第一个类型变量中存在的属性
// 构造出来的新类型 PickProps,只有 id 和 title 两个属性类型
type PickProps = Pick<Props, 'id' | 'title'>
(4)Omit
- 定义:从 Type 中剔除一组属性构造新类型
- 语法:
Omit<K,T>
interface Props {id: stringtitle: stringchildren: number[]
}// 第二个类型变量传入的属性只能是第一个类型变量中存在的属性
// 构造出来的新类型 OmitProps,只有 children 属性类型
type OmitProps = Omit<Props, 'id' | 'title'>
(二)索引签名类型
- 多数情况下,在使用对象前就确定对象的结构,并为对象添加准确的类型
- 当无法确定对象中有哪些属性(或者说对象中可以出现任意多个属性),用到索引签名类型
interface AnyObject {[key: string]: number
}
let obj: AnyObject = {a: 1,b: 2,
}
- 解释:
- 使用
[key: string]
来约束该接口中允许出现的属性名称。表示只要是 string 类型的属性名称,都可以出现在对象中。 - 这样,对象 obj 中就可以出现任意多个属性(比如,a、b 等)。
key 只是一个占位符
,可以换成任意合法的变量名称。- 隐藏的前置知识:
JS 中对象({})的键是 string 类型的
。
- 使用
数组索引类型签名
- 在 JS 中数组是一类特殊的对象,特殊在数组的键(索引)是数值类型
- 并且,数组也可以出现任意多个元素。所以,在数组对应的泛型接口中,也用到了索引签名类型。
interface MyArray<T> {[n: number]: T
}
let arr: MyArray<number> = [1, 3, 5]
- 解释:
- MyArray 接口模拟原生的数组接口,并使用
[n: number]
来作为索引签名类型。 - 该索引签名类型表示:只要是 number 类型的键(索引)都可以出现在数组中,或者说数组中可以有任意多个元素。
- 同时也符合数组索引是 number 类型这一前提。
- MyArray 接口模拟原生的数组接口,并使用
(三)映射类型
- 映射类型:基于旧类型创建新类型(对象类型),减少重复、提升开发效率。
比如,类型 PropKeys 有 x/y/z,另一个类型 Type1 中也有 x/y/z,并且 Type1 中 x/y/z 的类型相同:
type PropKeys = 'x' | 'y' | 'z'
type Type1 = { x: number; y: number; z: number }
- 这样书写没错,但 x/y/z 重复书写了两次。像这种情况,就可以使用映射类型来进行简化。
type PropKeys = 'x' | 'y' | 'z'
type Type2 = { [Key in PropKeys]: number }
- 解释:
- 映射类型是基于索引签名类型的,所以,该语法类似于索引签名类型,也使用了 []。
Key in PropKeys
表示 Key 可以是 PropKeys 联合类型中的任意一个,类似于 forin(let k in obj)。- 使用映射类型创建的新对象类型 Type2 和类型 Type1 结构完全相同。
- 注意:映射类型只能在类型别名中使用,不能在接口中使用。
根据对象创建
映射类型除了根据联合类型创建新类型外,还可以根据对象类型来创建:
type Props = { a: number; b: string; c: boolean }
type Type3 = { [key in keyof Props]: number }
- 解释:
- 首先,先执行
keyof Props
获取到对象类型 Props 中所有键的联合类型即,‘a’ | ‘b’ | ‘c’。 - 然后,
Key in ...
就表示 Key 可以是 Props 中所有的键名称中的任意一个。
- 首先,先执行
内置映射类型实现分析
- 实际上,前面讲到的泛型工具类型(比如,Partial)都是基于映射类型实现的。
- 比如,Partial 的实现:
type Partial<T> = {[P in keyof T]?: T[P]
}type Props = { a: number; b: string; c: boolean }
type PartialProps = Partial<Props>
- 解释:
keyof T
即 keyof Props 表示获取 Props 的所有键,也就是:‘a’ | ‘b’ | ‘c’。- 在 [] 后面添加
?
(问号),表示将这些属性变为可选
的,以此来实现 Partial 的功能。 - 冒号后面的
T[P] 表示获取 T 中每个键对应的类型
。比如,如果是 ‘a’ 则类型是 number;如果是 ‘b’ 则类型是 string。 - 最终,新类型 PartialProps 和旧类型 Props 结构完全相同,只是让所有类型都变为可选了。
索引访问类型
- 刚刚用到的
T[P]
语法,在 TS 中叫做索引访问类型
- 作用:用来查询属性的类型。
type Props = { a: number; b: string; c: boolean }
type TypeA = Props['a']
- 解释:
Props['a']
表示查询类型 Props 中属性 ‘a’ 对应的类型 number。所以,TypeA 的类型为 number - 注意:[] 中的属性必须存在于被查询类型中,否则就会报错。
同时查询多个索引的类型
- 索引查询类型的其他使用方式:同时查询多个索引的类型
type Props = { a: number; b: string; c: boolean }type TypeA = Props['a' | 'b'] // string | number
- 解释:使用字符串字面量的联合类型,获取属性 a 和 b 对应的类型,结果为: string | number。
type TypeA = Props[keyof Props] // string | number | boolean
- 解释:使用 keyof 操作符获取 Props 中所有键对应的类型,结果为: string | number | boolean。
五、在原有项目使用 TS
创建新项目
命令:
npx create-react-app my-app --template typescript
说明:在命令行中,添加
--template typescript
表示创建支持 TS 的项目项目目录的变化:
- 在项目根目录中多了一个文件:
tsconfig.json
- TS 的配置文件
- 在 src 目录中,文件的后缀有变化,由原来的 .js 变为
.ts
或.tsx
.ts
ts 文件的后缀名.tsx
是在 TS 中使用 React 组件时,需要使用该后缀
- 在 src 目录中,多了
react-app-env.d.ts
文件.d.ts
类型声明文件,用来指定类型
- 在项目根目录中多了一个文件:
tsconfig 文档介绍
- tsconfig 文档介绍
- tsconfig.json 是 TS 项目的配置文件,通过
tsc --init
生成 - 所有的配置项都可以通过鼠标移入的方式,查看配置项解释说明
{// 编译选项"compilerOptions": {// 生成代码的语言版本:将我们写的 TS 代码编译成哪个版本的 JS 代码// 命令行: tsc --target es5 11-测试TS配置文件.ts"target": "es5",// 指定要包含在编译中的 library"lib": ["dom", "dom.iterable", "esnext"],// 允许 ts 编译器编译 js 文件"allowJs": true,// 跳过类型声明文件的类型检查"skipLibCheck": true,// es 模块 互操作,屏蔽 ESModule 和 CommonJS 之间的差异"esModuleInterop": true,// 允许通过 import x from 'y' 即使模块没有显式指定 default 导出"allowSyntheticDefaultImports": true,// 开启严格模式"strict": true,// 对文件名称强制区分大小写"forceConsistentCasingInFileNames": true,// 为 switch 语句启用错误报告"noFallthroughCasesInSwitch": true,// 生成代码的模块化标准"module": "esnext",// 模块解析(查找)策略"moduleResolution": "node",// 允许导入扩展名为.json的模块"resolveJsonModule": true,// 是否将没有 import/export 的文件视为旧(全局而非模块化)脚本文件"isolatedModules": true,// 编译时不生成任何文件(只进行类型检查)"noEmit": true,// 指定将 JSX 编译成什么形式"jsx": "react-jsx"},// 指定允许 ts 处理的目录"include": ["src"]
}
(一)typescript 声明文件
- 背景:几乎所有 JS 应用都会引入第三方库完成任务需求,第三方库不管是否用 TS 编写,都有相应的 TS 类型
- 定义:typescript 声明文件为已存在的 JS 库提供类型信息,有代码提示、类型保护等机制
- TS 的两种文件类型
- 类型声明文件的使用说明
1、TS 两种文件类型
- .ts 文件
既包含类型信息又可执行代码
- 可以被编译为 .js 文件,然后执行代码
- 用途:编写程序代码的地方
- .d.ts 文件
只包含类型信息
的类型声明文件- 不会生成 .js 文件,不允许出现可执行的代码,仅用于提供类型信息
- 用途:为 JS 提供类型信息
- 总结:.ts 是
implementation
(代码实现文件);.d.ts 是 declaration(类型声明文件)
2、类型声明文件使用说明
(1)内置类型声明文件
- TS 为 JS 运行时可用的所有标准化内置 API 都提供了声明文件
const strs = ['a', 'b', 'c']
// 鼠标放在 forEach 上查看类型
strs.forEach
- 实际上这都是 TS 提供的内置类型声明文件
- 可以通过 Ctrl + 鼠标左键(Mac:Command + 鼠标左键)来查看内置类型声明文件内容
- 比如,查看 forEach 方法的类型声明,在 VSCode 中会自动跳转到
lib.es5.d.ts
类型声明文件中 - 当然,像 window、document 等 BOM、DOM API 也都有相应的类型声明(
lib.dom.d.ts
)
(2)第三方库的类型声明文件
- 常用的第三方库都有相应的类型声明文件
- 库自带类型声明文件,如axios,查看
node_modules/axios
目录 - 由 DefinitelyTyped 提供,一个提供高质量 TS 类型声明的 github 仓库
- 实际项目开发时,第三方库没有自带的声明文件,VSCode 会给出明确的提
- TS 官方文档提供了一个页面,可以来查询 @types/* 库
- 库自带类型声明文件,如axios,查看
(3)创建自己的类型声明文件
- 项目内共享类型
- 多个 .ts 文件中都用到同一个类型,此时可以创建
.d.ts
文件提供该类型,实现类型共享 - 操作步骤
- 创建 index.d.ts 类型声明文件。
- 创建需要共享的类型,并使用 export 导出
- 在需要使用共享类型的 .ts 文件中,通过 import 导入
- 多个 .ts 文件中都用到同一个类型,此时可以创建
- 为已有 JS 文件提供类型声明
- 背景
- 将 JS 项目迁移到 TS 项目时,为了让已有的 .js 文件有类型声明
- 成为库作者,创建库给其他人使用
- 背景
(4)类型声明文件的使用说明
- 说明:TS 项目中可以使用 .js 文件,导入 .js 文件时,TS 会自动加载与 .js 同名的 .d.ts 文件,以提供类型声明
- declare:用于类型声明,为其他地方(如 .js 文件)已存在的变量声明类型,而不是创建一个新的变量
- type、interface 这些明确 TS 类型可以省略 declare 关键字
- let、function 等具有双重含义(在 JS、TS 中都能用),必须用 declare 关键字,明确指定此处用于类型声明。
let count = 10
let songName = '痴心绝对'
let position = {x: 0,y: 0
}function add(x, y) {return x + y
}function changeDirection(direction) {console.log(direction)
}const fomartPoint = point => {console.log('当前坐标:', point)
}export { count, songName, position, add, changeDirection, fomartPoint }
定义类型声明文件
declare let count:numberdeclare let songName: stringinterface Position {x: number,y: number
}declare let position: Positiondeclare function add (x :number, y: number) : numbertype Direction = 'left' | 'right' | 'top' | 'bottom'declare function changeDirection (direction: Direction): voidtype FomartPoint = (point: Position) => voiddeclare const fomartPoint: FomartPointexport {count, songName, position, add, changeDirection, FomartPoint, fomartPoint
}
(二)在现有项目中添加 TS
- CRA 添加 ts 文档
- 步骤
- 安装包:
yarn add typescript @types/node @types/react @types/react-dom @types/jest
- 把
jsconfig.json
改成 path.tsconfig.json - 将原来通过 React 脚手架创建的 TS 项目中的 tsconfig.json 中的配置,拷贝到咱们自己的项目中
- 创建
path.tsconfig.json
文件,将原来jsconfig.json
文件中的内容拿过来
- 安装包:
{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"],"@scss/*": ["src/assets/styles/*"]}}
}
- 在
tsconfig.json
中,添加配置
{// 添加这一句"extends": "./path.tsconfig.json","compilerOptions": {...}
}
- 将通过 React 脚手架创建的 TS 项目中的
src/react-app-env.d.ts
拷贝到自己项目的 src 目录下 - 重启项目
- 说明
- 项目中使用 TS 时,既可以包含 js 文件,又可以包含 ts 文件
.js
、.jsx
(使用 JS 时,React 组件对应的文件后缀).ts
、.tsx
(使用 TS 时,React 组件对应的文件后缀)、.d.ts
- 在已有项目中,添加 TS 时的推荐模式
- 新的功能用 TS
- 已实现的功能,可以继续保持 JS 文件,慢慢修改为 TS 即可
- React 组件对应的文件后缀,修改为:
.tsx
- 工具函数对应的文件后缀,修改为:
.ts
或者为其添加类型声明文件.d.ts
- 项目中使用 TS 时,既可以包含 js 文件,又可以包含 ts 文件
【TypeScript】TS全解相关推荐
- Type-Script使用详解
typescript 用法详解 javascript 的痛点 弱类型 变量的数据类型不是固定的,我们可以给一个变量赋值多种不同类型的值. 这样可能代码编写时会更加简单,但当项目变大时,可能会给项目带来 ...
- 学习TypeScript(TS),这一篇就足够了
一.TypeScript 简介 1.什么是 TypeScript? 官方文档 TypeScript 本质上是向 JavaScript 语言添加了「可选的静态类型」和「基于类的面向对象」编程,它相当于是 ...
- mos 多路模拟电子开关_模拟多路开关-MOSFET全解.ppt
模拟多路开关-MOSFET全解 1. 漏电流 漏电流:通过断开的模拟开关的电流,用IS表示. 3.3.4 多路开关的电路特性 在n个模拟开关的并联组合中,当一个开关导通时,其它n-1个开关是断开的,未 ...
- Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP
本文完整版:<Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP> Vue3 Typescript + Axios 全栈开发教程 前端 Vue3 ...
- 一般将来时语法课教案_「英语语法」一般过去时用法技巧全解
大家好,我是教课蚪英语的张老师,今天我们来学习英语语法100讲的第一课,一般过去时! 一.首先我们了解一下什么是一般过去时? 英语语法 1. 概念: 描述过去的状态或过去的动作. 在英语中,非现在的以 ...
- atca背板_ATCA介绍全解.ppt
ATCA介绍全解 ATCA - 概述Advanced Telecommunications Computing Architecture 高性能计算机和网络通信设备的要求: 1) 足够强的数据处理能力 ...
- 生成对抗网络gan原理_中国首个“芯片大学”即将落地;生成对抗网络(GAN)的数学原理全解...
开发者社区技术周刊又和大家见面了,萌妹子主播为您带来第三期"开发者技术联播".让我们一起听听,过去一周有哪些值得我们开发者关注的重要新闻吧. 中国首个芯片大学,南京集成电路大学即将 ...
- Java IO编程全解(五)——AIO编程
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7794151.html 前面讲到:Java IO编程全解(四)--NIO编程 NIO2.0引入了新的异步通道的 ...
- Sql Server函数全解三数据类型转换函数和文本图像函数
原文:Sql Server函数全解<三>数据类型转换函数和文本图像函数 一:数据类型转换函数 在同时处理不同数据类型的值时,SQL Server一般会自动进行隐士类型转换.对于数据类型相近 ...
最新文章
- (Excel)常用函数公式及操作技巧之四:文本与页面设置(二)
- 武大50名学生将卫星送上天!用了老师800万科研经费,搭长征八号“顺风车”升空...
- linux下core dump--转载
- PAT甲级1083 List Grades:[C++题解]结构体、排序
- supervisor开机自启动方法
- java并发练习之快乐影院
- EevExpress中XtraGrid常用方法
- 服务器故障英文邮件,服务器一般故障排除(国外英文资料).doc
- 1.13 编程基础之综合应用 10 判决素数个数 python
- Qt文档阅读笔记-GridLayout QML Type解析与实例
- 7.2. cvs login | logout
- mapbox 将坐标转换成米
- 精通CSS:高级Web标准解决方案(中文电子书下载)
- Vista v12.0 Win32-ISO 1DVD(地震数据处理)
- python过京东app图形验证_Python实现京东自动登录(自动完成滑块验证)
- QT TCPsocket 封包 粘包分析
- Android 9 红米4x,红米4X lineage16 安卓9.0 极致省电 纯净 完美root Xposed 经典版
- ubuntu配置网易云音乐
- Java语言-27:Map接口
- 写 字 楼 通 信系统工程技术售后维护