写在前面：

本博客主要参考codewhy老师的课程，和下面视频+对应笔记文档，以及自己的总结和补充
🪩 禹神：三小时快速上手TypeScript，TS速通教程_哔哩哔哩_bilibili

认识TypeScript

TypeScript简介

TypeScript 由微软开发,是基于 JavaScript 的⼀个扩展语⾔。
TypeScript 包含了 JavaScript 的所有内容,TypeScript 是 JavaScript 的超集。
TypeScript 增加了:静态类型检查、接⼝、泛型等很多现代开发特性,更适合⼤型项⽬的开发。
TypeScript 需要编译为 JavaScript ,然后交给浏览器或其他 JavaScript 运⾏环境执⾏

为什么用TypeScript

typescript可以在开发阶段进行类型校验

js现状
JavaScript的定位是浏览器脚本语⾔,⽤于在⽹⻚中嵌⼊简单的逻辑,且代码量少。但js越来越流⾏,已经可以全栈编程，写大型项目会出现很多困扰
js困扰
以下问题放在.js文件夹不会飘红报错，只有运行后才会控制台2报错，但是放到.ts文件夹会飘红报错（不用执行，静态类型检查）

不清楚的数据类型

1 2	let welcome = 'hello' welcome() // 此⾏报错:TypeError: welcome is not a function

有漏洞的逻辑

const str = Date.now() % 2 ? '奇数' : '偶数'
if (str !== '奇数'){
	alert('hello') 
}else if(str === '偶数'){
	alert('world') }

访问不存在的属性

1 2	const obj = { width: 10, height: 15 }; const area = obj.width * obj.heigth;

低级的拼写错误

1	const message = 'hello,world' message.toUperCase() //遗漏了一个"p"

ts是静态类型检查
不用运行，不对的写完就知道不对了
开始麻烦，但是后面省心

同样的功能,TypeScript 的代码量要⼤于 JavaScript,但由于 TypeScript 的代码结构更加清晰,在后期代码的维护中 TypeScript 却胜于 JavaScript

编译 TypeScript（两种方式）

浏览器不能直接运行tx，需要编译为ts再交给编译器执行
如果使用脚手架，那么它会基于脚手架webpack，vite自动编译ts，不用下面的操作

命令⾏编译(几乎不用，了解)

要把 .ts ⽂件编译为 .js ⽂件,需要配置 TypeScript 的编译环境,步骤如下:

创建⼀个 demo.ts ⽂件,例如:

const person = {
	name: '虞寻歌',
	home: '载酒'
}
console.log(`${person.name}，来自${person.home}`)

全局安装 TypeScript npm i typescript -g
创建完成后，全局有一个tsc指令用于编译，再根据这个命令把ts文件变成js文件

第三步:使⽤命令编译 .ts ⽂件tsc demo.ts
“注意：现在安装最新的 TSC 编译器并不会新增全局命令，需要写成 npx tsc index 才可以！”

结果展示

成功后会多出一个对应名字的.js文件，同时原来.ts中的汉字会被编码在任何js环境都能识别的样式，防止乱码
每次更新.ts后都要重新编译生成.js

⾃动化编译(重要)

成功后，.ts文件修改保存后，对应的.js文件自动更新修改，同时不会把错误内容同步到.js文件中

创建 TypeScript 编译控制⽂件：tsc --init

在新生成的tsconfig.json文件中的
1
2
"target": "es2016",
//表示使用ES7;es2015表示ES6，改成ES2015或者ES6
监视⽬录中的 .ts ⽂件变化 tsc --watch 或 tsc -w
如果要监视一个文件，那么在后面加文件名，如’ tsc –watch demo.ts’，如果想要监视当前文件夹的所有ts文件，那什么都不加

此时生成.js文件
同时因为刚才配置了使用ES6，声明person不再转换成var而是使用了const，
上面"use strict";表示使用严格模式
配置：当编译出错时不⽣成 .js ⽂件，修改正确后再生成
(不推荐但是有的做法：)tsc --noEmitOnError --watch
要这样做：修改tsconfig.json 中的配置，把"esModuleInterop": true,这行的注释解开，如图

TypeScript类型

类型声明

使⽤: 来对变量或函数形参,进⾏类型声明限制
函数参数多传或者少传都是不可以的
vscode右键-格式化文档，自动帮你在:后面留出空格
注意区分大小写，string不能写成String！！

let a: string  // 变量a以后只能存储	字符串类型
let b: number  // 变量b只能存储数值
let c: boolean // 变量c只能存储布尔值

a = 'hello'
a = 100  // 警告: 不能将类型“number”分配给类型“string”

b = 666
b = '你好' // 警告: 不能将类型"string"分配给类型"number"

c = true
c = 666  // 警告: 不能将类型“number”分配给类型“boolean”

// 函数：对形参和返回值进行限制，参数x必须是数字，参数y也必须是数字，函数返回值也必须是数字
function demo(x: number, y: number): number {
  return x + y
}

demo(100, 200)
demo(100, '200') // 警告: 类型“string"的参数不能赋给类型"number"的参数
demo(100, 200, 300) // 警告: 应有 2个参数, 但获得 3个
demo(100) // 警告: 应有 2个参数，但获得 1个

在:后也可以写字⾯量类型,不过实际开发中几乎不用

let a: '你好' //a的值只能为字符串"你好"
let b: 100 //b的值只能为数字100
a = '欢迎'//警告:不能将类型""欢迎""分配给类型""你好""
b = 200 //警告:不能将类型"200"分配给类型"100"

常用写法

1	let name: string ="虞寻歌"

类型推断(可以但不要做)
如let b: 100
不声明类型也不会报错（可以理解为这是ts善良的部分但不要利用这个善良）

类型总览

JavaScript 中的数据类型

① string ② number ③ boolean ④ null ⑤ undefined ⑥ bigint ⑦ symbol ⑧ object
备注:其中 object 包含: Array 、 Function 、 Date 、 Error 等……

TypeScript 中的数据类型

上述所有 JavaScript 类型
再ts中的undefined和null它们既是实际的值，也是自己的类型
1
2
let n: null = null
let u: undefined = undefined
六个新类型： ① any ② unknown ③ never ④ void ⑤ tuple ⑥ enum
两个用于自定义类型的方式： ① type ② interface

注意点
前面提到的，不能把string写成String(类似java中int和 integer)
在 JavaScript 中的这些内置构造函数: Number、String、Boolean,⽤于创建对应的包装对象, 在⽇常开发时==很少使⽤==,在 TypeScript 中也是同理,所以在 TypeScript 中进⾏类型声明时,通常都是⽤⼩写的 number 、 string 、 boolean

例如下⾯代码:

let str1: string //TS官方推荐的写法
str1 = 'hello'
str1 = new String('hello') //报

let str2: String
str2 = 'hello'
str2 = new String('hello')
 
console.log(typeof str1)
console.log(typeof str2)

TS中数组类型写法

在开发中，数组一般存放相同的类型，不要存放不同的类型

1 2	let names: string[] = ["虞寻歌","图蓝","B8017913"] names.push("欺花")

TS中的Object类型

Object类型中的属性不要再指定类型了，让编译器自己推导类型即可

let info = {
	name:"虞寻歌",
	age: 23,
	hometown:"载酒",
	color:"橙红色"
}
---
let info :object = {
	name:"虞寻歌",
	age: 23,
	hometown:"载酒",
	color:"橙红色"
}

原始类型VS包装对象-理解

原始类型 VS 包装对象

原始类型:如 number 、 string 、 boolean ,在 JavaScript 中是简单数据类型,它们在内存中占⽤空间少,处理速度快。
包装对象:如 Number 对象、 String 对象、 Boolean 对象,是复杂类型,在内存中占⽤更多空间,在⽇常开发时很少由开发⼈员⾃⼰创建包装对象。

⾃动装箱:
JavaScript 在必要时会⾃动将原始类型包装成对象,以便调⽤⽅法或访问属性

// 原始类型字符串
let str = 'hello';
// 当访问str.length时,JavaScript引擎做了以下⼯作:
// 1. ⾃动装箱:创建⼀个临时的String对象包装原始字符串
let size = (function(){
	let tempStringObject = new String(str);
	// 2. 访问String对象的length属性
	let lengthValue = tempStringObject.length;
	// 3. 销毁临时对象,返回⻓度值
	// (JavaScript引擎⾃动处理对象销毁,开发者⽆感知)
	return lengthValue;
})();

console.log(size); // 输出: 5

常⽤类型声明与语法（重要）

声明对象类型

⼀般对象
在熟悉后面加?代表这个属性可以有也可以没有，如果没加的话必须有，否则报错
属性之间可以用,和;或者换行分隔开

// 限制person1对象必须有name属性,age为可选属性
let person1: { name: string, age?: number }
//  ,也能⽤分号做分隔
let person2: { name: string; age?: number }
// 含义同上,也能⽤换⾏做分隔
let person3: {
	name: string
	age?: number  // 加？代表可以为空
}
// 如下赋值均可以
person1 = {name:'李四',age:18}
person2 = {name:'张三'}
person3 = {name:'王五'}

// 如下赋值不合法,因为person3的类型限制中,没有gender属性的说明
person3 = {name:'王五',gender:'男'}

索引签名: [key: string]: any
允许定义对象可以具有任意数量的属性,这些属性的键和类型是可变的, 常⽤于:描述类型不确定的属性,(具有动态属性的对象)。

// 限制person对象必须有name属性,可选age属性但值必须是数字,同时可以有任意数量、任意类型的其他属性
let person: {
	name: string
	age?: number
	[key: string]: any // 索引签名,完全可以不⽤key这个单词,换成其他的也可以(另一种常用写法：index)
}
// 赋值合法

person = { 
	name:'张三', 
	age:18, 
	gender:'男' 
}

声明函数类型

指定参数类型，返回值类型可以指定，也可以推导Typescript对于传入的函数类型的参数个数不进行检测
（函数类型知识还有好多，远不止下面这一点，我没做笔记）

1 2	function sum(num1:number, num2:number): number { return num1 + num2 } const result = sum(1, 2)

function parseLyric(lyric: string){
	const lyrics: LyricLine[] = []
	lyrics.push({ time: 0, text: lyric })
	return lyrics
}

1 2	let count: (a: number, b: number) => number count = function (x, y) { return x + y }

注意:

TypeScript 中的 => 在函数类型声明时表示==函数类型,==描述其==参数类型==和返回类型。
JavaScript 中的 => 是⼀种定义函数的语法,是具体的函数实现。
函数类型声明还可以使⽤:接⼝、⾃定义类型等⽅式,下⽂中会详细讲解。

函数类型表达式

格式：(参数列表) => 返回值类型

typr Func1 = (a: number, b: number) => number
function calc(fc: Func1){
	return fc(1,2)
}
function sum(x: number, y: number) { return x + y }
calc(sum)

调用签名

如果想描述一个带有属性的函数，可以在一个对象类型中写一个调用签名
注意这个语法跟函数类型表达式稍有不同，在参数列表和返回的类型之间用的是:而不是=>

开发中如何选择:
1.如果只是描述函数类型本身(函数可以被调用)，使用函数类型表达式
2.如果在描述函数作为对象可以被调用,同时也有其他属性时，使用函数调用签名

//函数类型表达式
type BarType =(num1:number)=>number
//函数的调用签名(从对象的角度来看待这个函数，也可以有其他属性)
interface IBar{
name: string
age:number
//函数可以调用:函数调用签名
(num1:number):number
}
const bar:IBar =(num1:number):number=>{
	return 123
}
bar.name = "abc"
bar.age = 18
bar(123)

声明数组类型

let arr1: string[]
let arr2: Array<string> //属于泛型
	
arr1 = ['a','b','c']
arr2 = ['hello','world']

tuple

元组Tuple是⼀种==特殊的数组类型==,可以存储固定数量的元素,并且每个元素的类型是==已知==的且可以==不同==。元组⽤于精确描述⼀组值的类型， ? 表示可选元素。

// 第⼀个元素必须是 string 类型,第⼆个元素必须是 number 类型。
let arr1: [string,number]
// 第⼀个元素必须是 number 类型,第⼆个元素是可选的,如果存在,必须是 boolean 类型。
let arr2: [number,boolean?]
// 第⼀个元素必须是 number 类型,后⾯的元素可以是任意数量的 string 类型
let arr3: [number,...string[]]

// 可以赋值
arr1 = ['hello',123]
arr2 = [100,false]
arr2 = [200]
arr3 = [100,'hello','world']
arr3 = [100]

// 不可以赋值,arr1声明时是两个元素,赋值的是三个
arr1 = ['hello',123,false]

其他类型与语法

any

无法确定一个变量的类型，并且可能它会发生一些变化，这个时候可以使用any类型
（实在写不下去再用any，不然用ts干啥呢）

any含义
any的含义是任意类型，⼀旦将变量类型限制为 any ,那就意味着放弃了对该变量的类型检查

// 明确的表示a的类型是 any —— 【显式的any
let a: any // 以下对a的赋值,均⽆警告
a = 100
a = '你好'
a = false

// 没有明确的表示b的类型是any,但TS主动推断出来b是any —— 隐式的any
let b
//以下对b的赋值,均⽆警告
b = 100
b = '你好'
b = false

any会传染！！
注意点: any 类型的变量,可以赋值给任意类型的变量（容易自己一把火给别人也烧了）

/* 注意点:any类型的变量,可以赋值给任意类型的变量 */
let c:any
c = 9
let x: string
x = c // ⽆警告！！！！！

unknown

unknown 的含义是: 未知类型
适⽤于起初不确定数据的具体类型,要后期才能确定

unknown 可以理解为⼀个类型安全的any

// 设置a的类型为unknown
let a: unknown
//以下对a的赋值,均符合规范
a = 100
a = false
a = '你好'
// 设置x的数据类型为string
let x: string
x = a //警告:不能将类型"unknown"分配给类型"string"

unknown的代码安全性
unknown会强制开发者在使⽤之前进⾏类型检查,从⽽提供更强的类型安全性
看以下代码处理方式

// 设置a的类型为unknown
let a: unknown
a = 'hello'

//第⼀种⽅式:加类型判断
if(typeof a === 'string'){
 x = a
 console.log(x)
}

//第⼆种⽅式:加断⾔
x = a as string

//第三种⽅式:加断⾔
x = <string>a

any和unknown属性读取
读取any类型数据的任何属性都不会报错,⽽ unknown 正好与之相反

let str1: string
str1 = 'hello'
str1.toUpperCase() //⽆警告

let str2: any
str2 = 'hello'
str2.toUpperCase() //⽆警告

let str3: unknown
str3 = 'hello';
str3.toUpperCase() //警告:"str3"的类型为"未知"

// 使⽤断⾔强制指定str3的类型为string
(str3 as string).toUpperCase() //⽆警告

never

never 的含义是:任何值都不是,即: 不能有值,例如 undefined 、 null 、 ‘’ 、 0 都不⾏!
项目中很少遇到never(出现也是1或3)

never可⽤于限制函数的返回值
返回“从不”的函数不能具有可访问的终结点

// 限制throwError函数不需要有任何返回值,任何值都不⾏,像undeifned、null都不⾏
function throwError(str: string): never {
	throw new Error('程序异常退出:' + str)
}

⼏乎不⽤ never 去直接限制变量,因为没有意义,
例如:

/* 指定a的类型为never, 那就意味着a以后不能存任何的数据了 */
let a: never

// 以下对a的所有赋值都会有警告
a = 1
a = true
a = undefined
a = null

never 一般是TypeScript主动推断出来的

// 指定a的类型为string
let a: string // 给a设置⼀个值
a = 'hello'

if (typeof a === 'string'){
	console.log(a.toUpperCase())
}else {
	console.log(a) // TypeScript会推断出此处的a是never,因为没有任何⼀个值符合此处的逻辑
}

void

void 的含义是空,即函数不返回任何值，可以省略

void通常⽤于函数返回值声明

function logMessage(msg:string):void{
	console.log(msg)
}
logMessage('你好')

注意:编码者没有编写 return 指定函数返回值,所以 logMessage 函数是没有==显式返回值==的,但会有⼀个==隐式返回值,是 undefined== ,虽然函数返回类型为 void ,但也是可以接受 undefined 的,简单记: undefined是void可以接受的⼀种”空”

void符合规范的写法

// 无警告
function logMessage(msg: string): void {
	console.log(msg)
}

// 无警告
function logMessage(msg: string): void {
	console.log(msg)
	return;
}

// 无警告
function logMessage(msg: string): void {
	console.log(msg)
	return undefined;
}

深入理解：
实际开发中真的不希望别人去关注函数的返回值，我的函数也不会返回东西，那么就用void

undefined和void

那限制函数返回值时,是不是 undefined 和 void 就没区别呢?—— 有区别。因为还有这句话 :【返回值类型为 void 的函数,调⽤者不应依赖其返回值进⾏任何操作!】对⽐下⾯两段代码:

function logMessage(msg: string): void {
	console.log(msg)
}

let result = logMessage('你好')

if (result) { // 此行报错：无法测试 "void" 类型的表达式的真实性
	console.log('logMessage有返回值')
}

function logMessage(msg: string): undefined {
	console.log(msg)
}

result = logMessage('你好')

if (result) { // 此行无警告
	console.log('logMessage有返回值')
}

理解 void 与 undefined

void 是⼀个⼴泛的概念,⽤来表达”空”,⽽ undefined 则是这种”空”的具体实现。
因此可以说 undefined 是 void 能接受的⼀种”空”的状态。
也可以理解为: void 包含 undefined ,但 void 所表达的语义超越了 undefi ned , void 是⼀种意图上的约定,⽽不仅仅是特定值的限制。

总结
如果⼀个函数返回类型为 void ,那么:

从语法上讲:函数是可以返回 undefined 的,⾄于显式返回,还是隐式返回,这⽆所谓!
从语义上讲:函数调⽤者不应关⼼函数返回的值,也不应依赖返回值进⾏任何操作! 即使我们知道它返回了 undefined

⼀个特殊情况void

观察如下两段代码:

代码段1(正常)
在函数定义时,限制函数返回值为 void ,那么函数的返回值就必须是空。

function demo():void{
	// 返回undefined合法
	return undefined
	// 以下返回均不合法
	return 100
	return false
	return null
	return []
}
demo()

代码段2(特殊)

使⽤限制函数返回值为 void 时, TypeScript 并不会严格要求函数返回空。

type LogFunc = () => void  // LogFunc的类型是一个函数，该函数不接受任何参数，并且其返回值是void类型的

const f1: LogFunc = () => {
	 return 100; // 允许返回⾮空值
};
const f2: LogFunc = () => 200; // 允许返回⾮空值

const f3: LogFunc = function () {
	return 300; // 允许返回⾮空值
};

另一种写法：

let PrintData: () => void;

PrintData = () => {
	return 100; // 允许返回非空值
};

PrintData = () => 200; // 允许返回非空值

PrintData = function () {
	return 300; // 允许返回非空值
};

为什么会这样?
是为了确保如下代码成⽴,我们知道 Array.prototype.push 的返回值是⼀个数字, ⽽ Array.prototype.forEach ⽅法期望其回调的返回类型是 void 。

1
2
3

const src = [1, 2, 3];
const dst = [0];
src.forEach((el) => dst.push(el));  //箭头函数的简写形式。此时,dst.push(el)会被作为返回值

官⽅⽂档的说明:Assignability of Functions

object（少用到）

object与Objec,实际开发中⽤的较少,因为范围太⼤了

object

object的含义是所有⾮原始类型,可存储:对象、函数、数组等,由于限制的范围⽐较宽泛,在实际开发中使⽤的相对较少。

let a:object //a的值可以是任何【⾮原始类型】,包括:对象、函数、数组等
// 以下代码,是将【⾮原始类型】赋给a,所以均符合要求
a = {}
a = {name:'张三'}
a = [1,3,5,7,9]
a = function(){}
a = new String('123')
class Person {}
a = new Person()

// 以下代码,是将【原始类型】赋给a,有警告
a = 1 // 警告:不能将类型"number"分配给类型"object"
a = true // 警告:不能将类型"boolean"分配给类型"object"
a = '你好' // 警告:不能将类型"string"分配给类型"object"
a = null // 警告:不能将类型"null"分配给类型"object"
a = undefined // 警告:不能将类型"undefined"分配给类型"object"

Object

官⽅描述:所有可以调⽤Object⽅法的类型。
简单记忆:除了 undefined 和 null 的任何值。

由于限制的范围实在太⼤了!所以实际开发中使⽤频率极低。

let b:Object 
//b的值必须是Object的实例对象(除去undefined和null的任何值)
// b能存储的类型是可以调用到Object方法的类型
// 以下代码,均⽆警告,因为给a赋的值,都是Object的实例对象
b = {}
b = {name:'张三'}
b = [1,3,5,7,9]
b = function(){}
b = new String('123'

class Person {}
b = new Person()
b = 1 // 1不是Object的实例对象,但其包装对象是Object的实例
b = true // truue不是Object的实例对象,但其包装对象是Object的实例
b = '你好' // "你好"不是Object的实例对象,但其包装对象是Object的实例

// 以下代码均有警告
b = null // 警告:不能将类型"null"分配给类型"Object"
b = undefined // 警告:不能将类型"undefined"分配给类型"Object"

enum

枚举enum可以定义一组命名常量,它能增强代码的可读性,也让代码更好维护

实际开发中很可能不小心写错单词，为了避免出错，把一组一组的相关的值放在枚举中（比如上下左右，东南西北）

数字枚举

数字枚举是最常⻅的枚举类型,其成员的值会⾃动递增,且数字枚举还具备反向映射的特点,在下⾯代码的打印中,发现可以通过值来获取对应的枚举成员名称

// 定义一个描述【上下左右】方向的枚举Direction
enum Direction { //注意，没有等号哦
    Up,
    Down,
    Left,
    Right
}

console.log(Direction); // 打印Direction会看到如下内容
/*
{
    0: 'Up',
    1: 'Down',
    2: 'Left',
    3: 'Right',
    Up: 0,
    Down: 1,
    Left: 2,
    Right: 3
}
*/

// 反向映射
console.log(Direction.Up); //0
console.log(Direction[0]); //Up

也可以指定枚举成员的初始值,其后的成员值会⾃动递增。

enum Direction {
	 Up = 6,
	 Down,
	 Left,    
	 Right
}
console.log(Direction.Up); // 输出: 6
console.log(Direction.Down); // 输出: 7

使⽤数字枚举完成walk 函数中的逻辑,此时我们发现: 代码更加直观易读,⽽且类型安全,同时也更易于维护
function walk(n: **Direction**)

enum Direction {
	Up,
	Down,
	Left,
	Right,
}
function walk(n: Direction) {
	if (n === Direction.Up) {
	console.log("向【上】⾛");
	} else if (n === Direction.Down) {
	console.log("向【下】⾛");
	} else if (n === Direction.Left) {
	console.log("向【左】⾛");
	} else if (n === Direction.Right) {
	console.log("向【右】⾛");
	} else {
	console.log("未知⽅向");
	}
}
walk(Direction.Up)
walk(Direction.Down)

字符串枚举

枚举成员的值是字符串没有反向映射

enum Direction {
	Up = "up",
	Down = "down",
	Left = "left",
	Right = "right"
}
let dir: Direction = Direction.Up;
console.log(dir); // 输出: "up"

常量枚举

官⽅描述:常量枚举是⼀种特殊枚举类型,它使⽤ const 关键字定义,在编译时会被内联,避免⽣成⼀些额外的代码

何为编译时内联?
所谓”内联”其实就是 TypeScript 在编译时,会将枚举成员引⽤替换为它们的实际值, ⽽不是⽣成额外的枚举对象。这可以减少⽣成的 JavaScript 代码量,并提⾼运⾏时性能。

使⽤普通枚举的 TypeScript 代码如下:

enum Directions {
	Up,
	Down,
	Left,
	Right
}
let x = Directions.Up;

编译后⽣成的 JavaScript 代码量较⼤ :

"use strict";
var Directions;
(function (Directions) {
	 Directions[Directions["Up"] = 0] = "Up"; // 首先将 `Directions["Up"]` 设置为 `0`，然后将 `Directions[0]` 设置为 `"Up"`。这使得 `Directions.Up` 的值为 `0`，并且可以通过 `Directions[0]` 获取到 `"Up"`。
	 Directions[Directions["Down"] = 1] = "Down";
	 Directions[Directions["Left"] = 2] = "Left";
	 Directions[Directions["Right"] = 3] = "Right";
})(Directions || (Directions = {}));
let x = Directions.Up;

使⽤常量枚举的 TypeScript 代码如下:

const enum|Directions {
	Up,
	Down,
	Left,
	Right
}

let x = Directions.Up;

编译后⽣成的 JavaScript 代码量较⼩:

1 2	"use strict"; let x = 0 /* Directions.Up */;

type（重要）

type 可以为任意类型创建别名,让代码更简洁、可读性更强,同时能更⽅便地进⾏类型复⽤和扩展

类型别名

type关键字定义类型别名，跟类型名称,例如下⾯代码中num是number类型别名。

1
2
3

type num = number;
Let price: num
price = 100

再比如给对象类型起一个别名

type Person = {
	name: string;
	age: number;
}
function printPerson(person: Person) {
	console.log(person.name);
}
printPerson({name: '西西', age: 23})

再比如

type ID=number | string;
function printID(id: ID) {
	console.log(id);
}

联合类型(或)

TypeScript的类型系统允许我们使用多种运算符，从现有类型中构建新类型
由两个或多个其他类型组成的类型
联合了偶像使用时候要小心，要进行类型缩小，比如用if进行类型判断，推断出具体类型再进行操作

type Status = number | string;
type Gender = '男' | '女';

function printStatus(status: Status) {
	console.log(status);
}

function logGender(str: Gender) {
	console.log(str);
}

printStatus(404);
printStatus('200');

logGender('男');
logGender('女');

交叉类型（并）

交叉类型允许将多个类型合并为⼀个类型
合并后的类型将拥有所有被合并类型的成员，交叉类型通常⽤于对象类型

//⾯积
type Area = {
	height: number; //⾼
	width: number; //宽
};

//地址
type Address = {
	num: number; //楼号
	cell: number; //单元号
	room: string; //房间号
};

// 定义类型House,且House是Area和Address组成的交叉类型
type House = Area & Address;
	const house: House = {
	height: 180,
	width: 75,
	num: 6,
	cell: 3,
	room: '702'
};

TS中对象类型的声明(type和interface)

用type声明对象
比如给对象类型起一个别名

type Person1 = {
	name: string;
	age: number;
}
function printPerson(person: Person1) {
	console.log(person.name);
}
printPerson({name: '西西', age: 23})

用interface声明对象
注意语法，和type不一样
1
interface Person2 {}
interface和type的区别
总之，如果声明对象建议用interface，非对象类型的定义建议用type
大部分情况二者可以随便用，但是：

type类型使用范围更广，接口类型只能用来声明对象
声明对象时，type中的在interface中都适用interface可以多次声明同一个接口名称
interface可以被类实现

interface支持继承

interface animal {
	name: string;
	speak() {}
}
interface dog extends animal {
	bark() {}
}

其他语法细节

类型断言as

有时候TypeScript无法获取具体的类型信息，这个我们需要使用类型断言
比如通过 document.getElementByld，TypeScript只知道该函数会返回 HTMLElement，但并不知道它具体的类型

理解：比如一个类，你知道它是什么类型的，那么这时候使用类型断言as告诉编译器这个类的类型，比类型缩小更好用
比如下面的例子，确定这个类是图片元素加as HTMLImageElement，这样可以直接.src和.alt，否则会报错
这也是类型断言最常用的用法

1
2
3

const imgEl = document.querySelector('.img') as HTMLImageElement;
imgEl.src = 'xxx';
imgEl.alt = 'xxx';

类型断言规则

断言规则
TypeScript只允许类型断言转换为更具体或者**不太具体(any或unknown)**的类型版本，此规则可防止不可能的强制转换
简而言之，可以断言成具体类型，或any和unknown,其他的不能转来转去

非空类型断言!

非空断言使用!，表示可以确定某个标识符是有值的，跳过ts在编译阶段对它的检测,使用时一定要慎重，确定它一定有值再用
理解：
比如说，你的对象中有一个属性是可能存在的，你想对这个不确定是否存在的属性进行操作，那么编译器会报错
如果只是想访问不确定是否存在的属性，可以用可选链?.
如果要进行赋值等操作，可以使用非空类型断言，强制告诉编译器这个属性一定存在
（也可以用类型缩小）
看下面代码就懂了

//定义接口
interface IPerson{
	name: string
	age:number
	friend?:{
		name:string
	}
}
const info:IPerson={name : "西西"
age:18}
//访问属性:-可选链:?.
console.log(info.friend?.name)
//属性赋值，两种方法：
//1.类型缩小
if(info.friend){
	info.friend.name="西西同学"
}
//2.非空类型断言
info.friend!.name="西西同学"

字面量类型使用规则

字面量类型是指一个具体的值，比如字符串、数字、布尔值、null、undefined等
字面量类型可以作为类型别名使用
也可以在封装请求方法中使用(仔细看下面代码，注意细节)

强制变成字面量类型as const（字面量推理）

type Gender = '男' | '女';
type Direction = 'up' | 'down' | 'left' | 'right';

//封装请求方法
type MethodType = 'GET' | 'POST' | 'PUT' | 'DELETE';
function request(url: string, method: MethodType, data?: any) {}
request('/api/user', 'POST', {name: '西西', age: 18});

//ts细节
const info={
	url:"xxx"
	method:"POST"
}

//下面这行代码这样写会报错的
//因为info.method编译器只知道是string类型，并不知道是不是MethodType类型
request(info.url, info.method, info.data);//不对的写法

//正确做法：
//解决方法一，类型断言：
request(info.url, info.method as"POST", info.data);
//解决方法二，使用字面量类型,在定义info时指定 字面量类型
const info2={url:string,method:MethodType}={
	url:"xxx"
	method:"POST"
}
request(info2.url, info2.method, info2.data);
//解决方法三，强制变成字面量
//这样做的结果的url变成xxx，method变成POST
const info3={
	url:"xxx"
	method:"POST"
}as const;
request(info3.url, info3.method, info2.data);

类型缩小（类型保护）

这个很重要，前面已经提过很多次了
简而言之，就是在给定的执行路径中(比如if语句)，缩小比声明时更小的类型
常见的类型保护有如下几种:
typeof;平等缩小(比如===、!==)instanceof;in

typeof(使用做多)

function printID(id: string | number){
	if(typeof id === 'string'){
		console.log(id.length);
	}else{
		console.log(id);
	}
}

平等缩小（一般判断字面量类型）

//方向的类型判断
type Direction ="left"|"right"|"up"| "down"
function switchDirection(direction:Direction){
	if(direction === "left"){
		console.log("左边哦")
	}
}

instanceof

//传入一个日期，打印日期
function printDate(date:string | Date){
	if(date instanceof Date){
		console.log(date.getTime())
		} else {
			console.log(date)
		}
}

in操作符
主要判断某一个对象里是有某个属性
如果指定的属性在指定的对象或其原型链中，则in 运算符返回true;

type Fish ={swim:() => void}
type Dog ={run:() =>void}
function move(animal: Fish Dog){
	if('swim'in animal){
		animal.swim()
	}else {animal.run()}
}

复习类相关知识

类 class

class Person {
	// 属性声明
	name: string;
	age: number;
	
	// 构造器
	constructor(name: string, age: number) {
	this.name = name;
	this.age = age;
	}
	
	// 方法
	speak() {
	console.log(`我叫: ${this.name}, 今年${this.age}岁`);
	}
}

// Person实例
const p1 = new Person('周杰伦', 38);

Student 继承 Person

class Student extends Person {
	grade: string;
	
	// 构造器
	constructor(name: string, age: number, grade: string) {
	super(name, age);
	this.grade = grade;
	}
	// 备注本例中若Student类不需要额外的属性，Student的构造器可以省略
	// 重写从父类继承的方法
	override speak() {
	console.log(`我是学生，我叫: ${this.name}，今年${this.age}岁，在读${this.grade}年级`);
	}
	
	// 子类自己的方法
	study() {
	console.log(`${this.name}正在努力学习中......`);
	}
}

属性修饰符

修饰符	含义	具体规则
public	公开的	可以被:类内部、子类、类外部访问。
protected	受保护的	可以被: 类内部、子类访问。
private	私有的	可以被: 类内部访问。
readonly	只读属性	属性无法修改。

public 修饰符

Person 类

class Person {
	// name写了public修饰符，age没写修饰符，最终都是public修饰符
	public name: string;
	age: number;
	
	constructor(name: string, age: number) {
	this.name = name;
	this.age = age;
	}
	
	speak() {
	// 类的内部可以访问public修饰的name和age
	console.log(`我叫: ${this.name}, 今年${this.age}岁`);
	}
}

const p1 = new Person('张三', 18);
// 类的外部可以访问public修饰的属性
console.log(p1.name);

Student 继承 Person

class Student extends Person {
	constructor(name: string, age: number) {
	super(name, age);
	}
	
	study() {
	// 【子类中】可以访问父类中public修饰的：name属性、age属性
	console.log(`${this.age}岁的${this.name}正在努力学习`);
	}
}

属性的简写形式
完整写法

class Person {
    public name: string;
    public age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}
```

简写形式
```ts
class Person {
    constructor(public name: string, public age: number) { }
}

protected 修饰符

Person类

class Person {
    // name和age是受保护属性，不能在类外部访问，但可以在类与子类中访问
    protected name: string;
    protected age: number;

    constructor(protected name: string, protected age: number) { }

    // getDetails是受保护方法，不能在类外部访问，但可以在类与子类中访问
    protected getDetails(): string {
        // 类中能访问受保护的name和age属性
        return `我叫: ${this.name}, 年龄是: ${this.age}`;
    }

    // introduce是公开方法，类、子类、类外部都能使用
    introduce() {
        // 类中能访问受保护的getDetails方法
        console.log(this.getDetails());
    }
}

const p1 = new Person('杨超越', 18);
// 可以在类外部访问introduce
p1.introduce();

// 以下代码均报错
// p1.getDetails();
// p1.name;
// p1.age;

Student 继承 Person

TypeScript
class Student extends Person {
    constructor(name: string, age: number) {
        super(name, age);
    }

    study() {
        // 子类中可以访问introduce
        this.introduce();
        // 子类中可以访问name
        console.log(`${this.name}正在努力学习`);
    }
}

const s1 = new Student('tom', 17);
s1.introduce();

private 修饰符

class Person {
	constructor(
	public name: string,
	public age: number,
	// IDCard属性为私有的(private)属性，只能在类内部使用
	private IDCard: string
	) {}
	
	private getPrivateInfo() {
	// 类内部可以访问私有的(private)属性-IDCard
	return `身份证号码为: ${this.IDCard}`
	}
	
	getInfo() {
	// 类内部可以访问受保护的(protected)属性name和age
	return `我叫: ${this.name}，今年刚满${this.age}岁`;
	}
	
	getFullInfo() {
	// 类内部可以访问公开的getInfo方法，也可以访问私有的getPrivateInfo方法
	return this.getInfo() + ',' + this.getPrivateInfo();
	}
}

const p1 = new Person('张三', 18, '110114198702034432');
console.log(p1.getFullInfo());
console.log(p1.getInfo());

// 以下代码均报错
// p1.name
// p1.age
// p1.IDCard
// p1.getPrivateInfo()

readonly 修饰符

class Car {
	 constructor(
		 public readonly vin: string, //⻋辆识别码,为只读属性
		 public readonly year: number,//出⼚年份,为只读属性
		 public color: string,
		 public sound: string
 ) { }
 // 打印⻋辆信息
 displayInfo() {
	 console.log(`
	 识别码:${this.vin},
	 出⼚年份:${this.year},
	 颜⾊:${this.color},
	 ⾳响:${this.sound}
 `);
 }
}

const car = new Car('1HGCM82633A123456', 2018, '⿊⾊', 'Bose⾳响');
car.displayInfo()

// 以下代码均错误:不能修改 readonly 属性
// car.vin = '897WYE87HA8SGDD8SDGHF'; 
// car.year = 2020;

抽象类

概述:抽象类是⼀种⽆法被实例化的类,专⻔⽤来定义类的结构和⾏为,类中可以写抽象⽅法,也可以写具体实现。抽象类主要⽤来为其派⽣类提供⼀个基础结构,要求其派⽣类必须实现其中的抽象⽅法。
简记:抽象类==不能实例化==,其意义是==可以被继承==,抽象类⾥可以有==普通⽅法==、也可以有==抽象⽅法==。

通过以下场景,理解抽象类:

我们定义⼀个抽象类 Package ,表示所有包裹的基本结构,任何包裹都有重量属性 weigh t ,包裹都需要计算运费。但不同类型的包裹(如:标准速度、特快专递)都有不同的运费计算⽅式,因此⽤于计算运费的 calculate ⽅法是⼀个抽象⽅法,必须由具体的⼦类来实现。

Package 类 TypeScript

abstract class Package {
	constructor(public weight: number){} 
	// 抽象⽅法:⽤来计算运费,不同类型包裹有不同的计算⽅式
	abstract calculate(): number // 通⽤⽅法:打印包裹详情
	printPackage() {
	console.log(`包裹重量为: ${this.weight}kg,运费为: ${this.calculate()}元`);
	}
}

StandardPackage 类继承了 Package ,实现了 calculate ⽅法:

// 标准包裹
class StandardPackage extends Package {
	constructor( weight: number,
	public unitPrice: number // 每公⽄的固定费率 
	) { super(weight) }
	
	// 实现抽象⽅法:计算运费
	calculate(): number {
		return this.weight * this.unitPrice;
	} 
}

// 创建标准包裹实例
const s1 = new StandardPackage(10,5)
s1.printPackage()

ExpressPackage 类继承了 Package ,实现了 calculate ⽅法:

ExpressPackage 类(特快包裹)

class ExpressPackage extends Package {
	constructor(
		private weight: number, // 每公⽄的固定费率(快速包裹更⾼)
		private unitPrice: number,  private additional: number // 超出10kg以后的附加费
	){ super(weight) }
	
	 // 实现抽象⽅法:计算运费
	 calculate(): number {
		 if(this.weight > 10){
		 // 超出10kg的部分,每公⽄多收additional对应的价格
		 return 10 * this.unitPrice + (this.weight - 10) * this.additional
		 }else {
		 return this.weight * this.unitPrice;
		 }
	 }
}
// 创建特快包裹实例
const e1 = new ExpressPackage(13,8,2)
e1.printPackage()

[!NOTE] 总结:何时使⽤抽象类?
1.定义通用接口 :为⼀组相关的类定义通⽤的⾏为(⽅法或属性)时。
2.提供基础实现：在抽象类中提供某些⽅法或为其提供基础实现,这样派⽣类就可以继承这些实现。
3.确保关键实现：强制派⽣类实现⼀些关键⾏为。
4.共享代码和逻辑:当多个类需要共享部分代码时,抽象类可以避免代码重复。

interface(接⼝)

interface 是⼀种定义结构的⽅式,主要作⽤是为:类、对象、函数等规定⼀种契约,这样可以确保代码的⼀致性和类型安全,但要注意 interface 只能定义格式,不能包含任何实现 !

定义类结构

// PersonInterface接口，用与限制Person类的格式
interface PersonInterface {
    name: string;
    age: number;
    speak(n: number): void;
}

// 定义一个类Person，实现 PersonInterface 接口
class Person implements PersonInterface {
    constructor(
        public name: string,
        public age: number
    ) { }

    // 实现接口中的 speak 方法
    speak(n: number): void {
        for (let i = 0; i < n; i++) {
            // 打印出包含名字和年龄的问候语句
            console.log(`你好，我叫${this.name}，我的年龄是${this.age}`);
        }
    }
}

// 创建一个 Person 类的实例 p1，传入名字 'tom' 和年龄 18
const p1 = new Person('tom', 18);
p1.speak(3);

定义对象结构

interface UserInterface {
    name: string;
    readonly gender: string; // 只读属性
    age?: number; // 可选属性
    run: (n: number) => void;
}

const user: UserInterface = {
    name: "张三",
    gender: '男',
    age: 18,
    run(n) {
        console.log(`奔跑了${n}米`);
    }
};

定义函数结构

// 定义函数结构
interface CountInterface {
    (a: number, b: number): number;
}

const count: CountInterface = (x, y) => {
    return x + y;
}

接口之间的继承

一个 interface 继承另一个 interface，从而实现代码的复用

interface PersonInterface {
    name: string; // 姓名
    age: number; // 年龄
}

interface StudentInterface extends PersonInterface {
    grade: string; // 年级
}

const stu: StudentInterface = {
    name: "张三",
    age: 25,
    grade: '高三'
}

接口自动合井（可重复定义）

// PersonInterface接口
interface PersonInterface {
	// 属性声明
	name: string;
	age: number;
}

// 给PersonInterface接口添加新属性
interface PersonInterface {
	// 方法声明
	speak(): void;
}

// Person类实现PersonInterface
class Person implements PersonInterface {
	name: string;
	age: number;
	
	// 构造器
	constructor(name: string, age: number) {
	this.name = name;
	this.age = age;
	}
	
	// 方法
	speak() {
	console.log('你好!我是老师:', this.name);
	}
}

总结:何时使⽤接⼝?

定义对象的格式: 描述数据模型、API 响应格式、配置对象……..等等,是开发中⽤的最多的场景。
类的契约:规定⼀个类需要实现哪些属性和⽅法。
扩展已有接⼝:⼀般⽤于扩展第三⽅库的类型, 这种特性在⼤型项⽬中可能会⽤到。

⼀些相似概念的区别

interface 与 type 的区别

（这部分在上文type–TS中对象类型的声明里也有）
相同点: interface 和 type 都可以⽤于定义对象结构,在定义对象结构时两者可以互换。

不同点:
interface :更专注于定义对象和类的结构,⽀持继承、合并。
type :可以定义类型别名、联合类型、交叉类型,但不⽀持继承和⾃动合并。

interface 和 type 都可以定义对象结构 TypeScript

// 使⽤ interface 定义 Person 对象
interface PersonInterface {
	name: string;
	age: number;
	speak(): void;
}
// 使⽤ type 定义 Person 对象
type PersonType = {
	name: string;
	age: number;
	speak(): void;
};
// 使⽤PersonInterface
/* let person: PersonInterface = {
 name:'张三',
 age:18,
 speak(){
 console.log(`我叫:${this.name},年龄:${this.age}`)
 }
} */
// 使⽤PersonType
let person: PersonType = {
	name:'张三',
	age:18,
	speak(){
	console.log(`我叫:${this.name},年龄:${this.age}`)
 }
}

interface 可以继承、合并

interface PersonInterface {
	name: string; // 姓名
	age: number; // 年龄
}

interface PersonInterface {
	speak: () => void;
}

interface StudentInterface extends PersonInterface {
	grade: string; // 年级
}

const student: StudentInterface = {
	name: '李四',
	age: 18,
	grade: '高二',
	speak() { console.log(this.name, this.age, this.grade); }
}

type 的交叉类型

// 使⽤ type 定义 Person 类型,并通过交叉类型实现属性的合并
type PersonType = {
	name: string; // 姓名
	age: number; // 年龄
	} & {
	speak: () => void;
};

// 使⽤ type 定义 Student 类型,并通过交叉类型继承 PersonType
type StudentType = PersonType & {
	grade: string; // 年级
};
const student: StudentType = {
	name: '李四',
	age: 18,
	grade: '⾼⼆',
	speak() {
	console.log(this.name, this.age, this.grade);
	}
};

interface 与抽象类的区别

相同点:都能定义⼀个类的格式(定义类应遵循的契约)
不相同:

接⼝:只能描述结构,不能有任何实现代码,⼀个类可以实现多个接⼝。
抽象类:既可以包含抽象⽅法,也可以包含具体⽅法, ⼀个类只能继承⼀个抽象类。

⼀个类可以实现多个接⼝ TypeScript

// FlyInterface 接⼝
interface FlyInterface {
	fly(): void;
}
// 定义 SwimInterface 接⼝
interface SwimInterface {
	swim(): void;
}
// Duck 类实现了 FlyInterface 和 SwimInterface 两个接⼝
class Duck implements FlyInterface, SwimInterface {
	fly(): void {
	console.log('鸭⼦可以⻜');
	}
	swim(): void {
	console.log('鸭⼦可以游泳');
	}
}

// 创建⼀个 Duck 实例
const duck = new Duck();
duck.fly(); // 输出: 鸭⼦可以⻜
duck.swim(); // 输出: 鸭⼦可以游泳

泛型和类型声明文件

泛型

泛型允许我们在定义函数、类或接⼝时,使⽤类型参数来表示未指定的类型,这些参数在具体使⽤时,才被指定具体的类型,泛型能让同⼀段代码适⽤于多种类型,同时仍然保持类型的安全性。

举例:如下代码中 <T> 就是泛型,(不⼀定⾮叫 T ),设置泛型后即可在函数中使⽤ T 来表示该类型:

// 泛型函数
TypeScript
function logData<T>(data: T): T {
    console.log(data)
    return data
}
logData<number>(100)
logData<string>('hello')

// 泛型可以有多个
TypeScript
function logData<T, U>(data1: T, data2: U): T | U {
    console.log(data1, data2)
    return Date.now() % 2 ? data1 : data2
}
logData<number, string>(100, 'hello')
logData<string, boolean>('ok', false)

// 泛型接口
TypeScript
interface PersonInterface<T> {
    name: string,
    age: number,
    extraInfo: T
}
let p1: PersonInterface<string>
let p2: PersonInterface<number>
p1 = { name: '张三', age: 18, extraInfo: '一个好人' }
p2 = { name: '李四', age: 18, extraInfo: 250 }

// 泛型约束
TypeScript
interface LengthInterface {
    length: number
}

// 约束规则是：传入的类型T必须具有 length 属性
function logPerson<T extends LengthInterface>(data: T): void {
    console.log(data.length)
}

logPerson<string>('hello')

// 报错：因为number不具备length属性
// logPerson<number>(100)

// 泛型类
TypeScript
class Person<T> {
    constructor(public name: string, public age: number, public extraInfo: T) {}
    speak() {
        console.log(`我叫${this.name}今年${this.age}岁了`)
        console.log(this.extraInfo)
    }
}

// 测试代码1
const p1 = new Person<number>("tom", 30, 250);

// 测试代码2
type JobInfo = {
    title: string;
    company: string;
}

const p2 = new Person<JobInfo>("tom", 30, { title: '研发总监', company: '发发发科技公司' });

类型声明文件

类型声明⽂件是 TypeScript 中的⼀种特殊⽂件，通常以 .d.ts 作为扩展名。它的主要作⽤是为现有的
JavaScript 代码提供类型信息，使得 TypeScript 能够在使用这些 JavaScript 库或模块时进行类型检查和提示。

// demo.js
export function add(a, b) {
    return a + b;
}
export function mul(a, b) {
	return a * b;
}

// demo.d.ts
declare function add(a: number, b: number): number;
declare function mul(a: number, b: number): number;
export { add, mul };

// index.ts
// example.ts
import { add, mul } from "./demo.js";

const x = add(2, 3); // x 类型为 number
const y = mul(4, 5); // y 类型为 number

console.log(x, y);

typescript高频基础面试题

TypeScript 和 JavaScript 的区别是什么

TypeScript 是 JavaScript 的超集，添加了静态类型检查（能够在编译时检查类型错误）
类型注解：TS 支持 : string、: number 等类型注解，JS 无此功能
接口（Interface）：TS 可定义对象结构（如 interface Person { name: string; age: number }）。
工具支持：TS 提供更好的 IDE 支持（如自动补全、错误提示）

// JS：无类型检查
function greet(name) {
  console.log(`Hello, ${name}`);
}
greet(123); // 运行时错误

// TS：静态类型检查
function greet(name: string): void {
  console.log(`Hello, ${name}`);
}
greet(123); // 编译时报错

// 显式类型注解
let age: number = 25;
age = "25"; // 报错：不能将字符串赋值给 number 类型

// 类型推断
let username = "Alice"; // 推断为 string 类型
username = 123; // 报错：不能将数字赋值给 string 类型

什么是联合类型（Union Types）？如何使用

合类型：用 | 表示参数或变量可以是多种类型中的一种。
应用场景：处理可能为多种类型的值（如输入框内容可能是数字或字符串）

function printId(id: number | string): void {
  console.log(`ID: ${id}`);
}
printId(101); // OK
printId("101"); // OK
printId(true); // 报错：类型 "boolean" 不在 "number | string" 中

可空类型怎么处理

可空类型就是用 | null | undefined 表示变量可能为空.
比如 let name: string | null
处理的时候有两种方式：
- 用可选链 ?.：比如 user?.name，如果 user 是 null 或 undefined，就不会报错直接返回 undefined。
- 用空值合并 ??：比如 text ?? “默认值”，如果 text 是 null/undefined，就用右边的默认值。
实际场景：在处理 API 数据时，接口返回的字段可能为空，用 ?? 给默认值能避免页面渲染报错。

any 和 unknown 有什么区别

这两个都是“不确定类型”，但 any 更危险，因为它绕过了类型检查

写在前面：

认识TypeScript

TypeScript简介

为什么用TypeScript

编译 TypeScript（两种方式）

命令⾏编译(几乎不用，了解)

⾃动化编译(重要)

TypeScript类型

类型声明

类型总览

JavaScript 中的数据类型

TypeScript 中的数据类型

TS中数组类型写法

TS中的Object类型

原始类型VS包装对象-理解

常⽤类型声明与语法（重要）

声明对象类型

声明函数类型

函数类型表达式

调用签名

声明数组类型

tuple

其他类型与语法

any

unknown

never

void

undefined和void

⼀个特殊情况void

object（少用到）

object

Object

enum

数字枚举

字符串枚举

常量枚举

type（重要）

类型别名

联合类型(或)

交叉类型（并）

TS中对象类型的声明(type和interface)

其他语法细节

类型断言as

类型断言规则

非空类型断言!

字面量类型使用规则

类型缩小（类型保护）

复习类相关知识

类 class

属性修饰符

public 修饰符

protected 修饰符

private 修饰符

readonly 修饰符

抽象类

通过以下场景,理解抽象类:

interface(接⼝)

定义类结构

定义对象结构

定义函数结构

接口之间的继承

接口自动合井（可重复定义）

总结:何时使⽤接⼝?

⼀些相似概念的区别

interface 与 type 的区别

interface 与 抽象类的区别

泛型和类型声明文件

泛型

类型声明文件

typescript高频基础面试题

TypeScript 和 JavaScript 的区别是什么

什么是联合类型（Union Types）？如何使用

可空类型怎么处理

any 和 unknown 有什么区别

interface 与抽象类的区别