TypeScript
快速入门
TS简介
- 以JS为基础构建的语言，TypeScript是JavaScript的超集
- 可以在任何支持JS的平台中执行
- 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性
- TS不能被JS解析器直接执行，TS代码需要通过编译器编译为JS，然后再交由JS解析器执行
- TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用
- 相较于JS（动态类型语言，变量类型不固定）而言，TS拥有了静态类型，更加严格的语法，更强大的功能；
- TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；
- TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；
- 同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。
- TS增加：
- 类型
- 支持ES的新特性
- 添加ES不具备的新特性
- 丰富的配置选项
- 强大的开发工具
TS开发环境搭建
- 使用npm全局安装typescript
- 进入命令行
- 输入：npm i -g typescript
- 查看版本：tsc
- 使用tsc对ts文件进行编译
- 进入命令行
- 进入ts文件所在目录
- 执行命令：tsc xxx.ts
- 执行tsc命令后产生一个同名的js文件
基本类型
类型声明
- 类型声明是TS非常重要的一个特点
- 通过类型声明可以指定TS中变量（参数、形参）的类型
- 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
- 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
- JS中的函数是不考虑参数的类型和个数的，而TS考虑
- 语法：
let 变量: 类型; // 声明变量
let 变量: 类型 = 值; // 声明完变量直接进行赋值
function fn(参数: 类型, 参数: 类型): 类型{
}
// 声明一个变量a，同时指定它的类型为number
let a: number; // tsc编译后，let变为var，因为ts可以编译成任意版本的js，默认为ES3版本
a = 'hello'; // 此行代码会报错，tsc编译后可以生成js文件
function sum(a: number, b: number): number{
return a + b;
}
let result = sum(123, 456);
自动类型判断
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
- 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明
// 如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测
let c = false;
c = true;
类型
| 类型 | 例子 | 描述 |
|---|---|---|
| number | 1, -33, 2.5 | 任意数字 |
| string | ‘hi’, “hi”, `hi` | 任意字符串 |
| boolean | true、false | 布尔值true或false |
| 字面量 | 其本身 | 限制变量的值就是该字面量的值 |
| any | * | 任意类型 |
| unknown | * | 类型安全的any |
| void | 空值（undefined） | 没有值（或undefined） |
| never | 没有值 | 不能是任何值 |
| object | {name:’孙悟空’} | 任意的JS对象 |
| array | [1,2,3] | 任意JS数组 |
| tuple | [4,5] | 元组，TS新增类型，固定长度数组 |
| enum | enum{A, B} | 枚举，TS中新增类型 |
字面量
- 使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围
// 直接使用字面量进行类型声明
let a: 10; // a赋值10
a = 10;
// a = 11 // 此行报错
// 可以使用 | 来连接多个类型（联合类型）
let b: "male" | "female";
b = "male";
b = "female";
let c: boolean | string;
c = true;
c = 'hello';
- 使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围
any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
- 使用TS时，不建议使用any类型
- any类型的变量可以赋值给任意类型变量，不会报错
// 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any （隐式的any）
let d;
// let d:any;
d = 10;
d = 'hello';
d = true;
unknown 实际上就是一个类型安全的any
- unknown类型的变量，不能直接赋值给其他变量，否则会报错
- unknown类型的变量如何赋值
- 赋值前先做类型检查
- if + typeof判断类型
- 类型断言（编译器不知道，开发人员知道，这是认为判断，写错类型也不报错），可以用来告诉解析器变量的实际类型
- 变量 as 类型
- <类型>变量
// unknown 表示未知类型的值
let e: unknown;
e = 10;
e = "hello";
let s:string;
// s = e // 报错
if(typeof e === "string"){
s = e;
}
// 类型断言，可以用来告诉解析器变量的实际类型
/*
* 语法：
* 变量 as 类型
* <类型>变量
*
* */
s = e as string;
s = <string>e;
- 赋值前先做类型检查
void 用来表示空，以函数为例，就表示没有返回值的函数
function fn(): string | number{
}never 表示永远不会返回结果
function fn2(): never{
throw new Error('报错了！');
}object（没啥用）
- {} 用来指定对象中可以包含哪些属性
- 语法：{属性名：属性值, 属性名：属性值}
- 语法：{属性名1：属性值1, 属性名2?：属性值2}
- 在属性后边加问号❓，表示该属性是可选的
- [propName: string]: any 表示任意类型的属性
- propName 指属性名，且属性名不固定，可以用任何字符串代替，例如xxx
- string 指在js中属性名是字符串
- any 表示前面的属性可以是任意类型
- 箭头函数设置函数结构（传参个数，和返回类型）的类型申明
- 语法：（形参：类型,形参：类型,…）=> 返回值类型
let obj: object = {};
let b:{name: string, sex?: string} // b是一个对象，并且对象中只有一个name属性，name属性是字符串
// b = {} // 报错，无name属性
// b = {name: 'Bob'， age: 18} // 报错，多个age属性
// [propName: string]: any 表示任意类型的属性
let c: {name: string, [propName: string]: any}
c = {name: 'BOb', age: 18, gender: '男'} // 不报错
let d: (a: number, b: number) => number
d = function (n1:number, n2:number):number{
return n1 + n2
}
- 语法：（形参：类型,形参：类型,…）=> 返回值类型
array
- 语法：
- 类型[]
- string[] 表示字符串数组
- number[] 表示数值数组
- Array<类型>
- Array
表示数值数组 let e:string[]
e = ['a', 'b', 'c']
let g: Array<number>
g = [1, 2, 3]
- Array
- 类型[]
- 语法：
tuple
- 元组固定长度的数组
- 语法：[类型, 类型, …]
let h: [string, number]
h = ['hello', 123]
enum 枚举
// enum Gender{
// Male = 0,
// Female = 1
// }
enum Gender{
Male,
Female
}
// let i: {name: string, gender: 0 | 1}
let i: {name: string, gender: Gender}
i = {
name: 'Bob',
gender: Gender.Female
}
console.log(i.gender === Gender.Female)& 表示同时
let j: {name: string} & {age: number}
j = {name: 'Bob', age: 18}类型别名
// let k: 1 | 2 | 3 | 4 | 5;
// let l: 1 | 2 | 3 | 4 | 5;
type myType = 1 | 2 | 3 | 4 | 5;
let k: myType
let l: myType
类型断言
- 有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：
- 第一种
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length; - 第二种
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;
- 第一种
编译选项
自动编译文件
- 编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译
- 示例：
tsc xxx.ts -w
自动编译整个项目
tsconfig.json
- 如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件
- 但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json
- tsconfig.json 是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
- tsconfig.json是一个JSON文件，添加配置文件后，只需 tsc 命令即可完成对整个项目的编译
- 同时也可以使用 tsc -w 自动监视整个项目
- 路径：
- ** 表示任意目录
- * 表示任意文件
配置文件
{ |
include
- 用来指定哪些ts文件需要被编译
- 默认值：[“**/*“]
- 下述示例中，所有src目录和tests目录下的文件都会被编译
"include":["src/**/*", "tests/**/*"]
exclude
- 不需要被编译的文件目录
- 默认值：[“node_modules”, “bower_components”, “jspm_packages”]
- 下述示例中，src下hello目录下的文件都不会被编译
"exclude": ["./src/hello/**/*"]
extends
- 定义被继承的配置文件
- 下述示例中，当前配置文件中会自动包含config目录下base.json中的所有配置信息
"extends": "./configs/base"
files
- 指定被编译文件的列表，只有需要编译的文件少时才会用到
- 列表中的文件都会被TS编译器所编译
"files": [
"core.ts",
"sys.ts",
"types.ts",
]
compilerOptions 编译器选项
- 编译选项是配置文件中非常重要也比较复杂的配置选项
- 项目选项
- target
- 设置ts代码编译的js目标版本
- 可选值：
- ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
- 如下设置，我们所编写的ts代码将会被编译为ES6版本的js代码
"compilerOptions": {
"target": "ES6"
}
- module
- 设置编译后代码使用的模块化系统
- 可选值：
- CommonJS、UMD、AMD、System、ES6/ES2015、ES2020、ESNext、None
- lib
- 指定代码运行时(浏览器中)所包含的库（宿主环境）, 一般情况下不需要修改
- 可选值：
- ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ……
- outDir
- 编译后文件的所在目录
- 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
- outFile
- 将所有的文件编译为一个js文件，不常用
- 默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中, 其他模块不能合并
- allowJs
- 是否对js文件编译，默认是false
- checkJs
- 是否检查js代码是否符合语法规范，默认是false
- removeComments
- 是否删除注释，默认值：false
- noEmit
- 不对代码进行编译，默认值：false
- noEmitOnError
- 当有错误时不生成编译后的文件，默认值：false
- strict
- 所有严格检查的总开关，一般设置为：true
- alwaysStrict
- 用来设置编译后的文件是否使用严格模式
- 编译后的js文件中最开始出现”user strict”，当使用模块化时不会出现，因为模块化状态已经是严格模式
- noImplicitAny
- 不允许隐式的any类型
- noImplicitThis
- 不允许不明确类型的this
- strictNullChecks
- 严格的检查空值
- target
webpack
初始化项目
- 进入项目根目录，执行命令 npm init -y
- 主要作用：创建package.json文件
npm init -y
- 主要作用：创建package.json文件
下载依赖
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin |
- npm i -D 表示开发中所要用的以来
- 共安装了7个包
- webpack
- 构建工具webpack的核心代码
- webpack-cli
- webpack的命令行工具
- webpack-dev-server
- webpack的开发服务器
- typescript
- ts编译器核心代码
- ts-loader
- ts加载器，用于在webpack中编译ts文件
- html-webpack-plugin
- webpack中html插件，用来自动创建html文件
- clean-webpack-plugin
- webpack中的清除插件，每次构建都会先清除目录
- webpack
- g：全局安装
- D：开发依赖，开发阶段使用的依赖，安装在package.json中的devDependencies中
- S：生产环境，打包部署后还可以继续进行使用的包，安装在package.json中的Dependencies中
- devDependencies：就是收集显示我们在开发环境中使用的包，在打包完会消失
- dependencies：收集我们生产环境使用的包，在开发环境和生产环境都可以使用
webpack.config.js
- 根目录下创建webpack的配置文件webpack.config.js
// 引入一个包，nodejs中的一个模块，用于处理文件和目录的路径
const path = require("path");
// 引入html插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 引入clean插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
optimization:{
minimize: false // 关闭代码压缩，可选
},
// 指定入口文件
entry: "./src/index.ts",
// 指定打包文件所在目录
output: {
// 指定打包文件的目录
// path: "./dist",
// path.resolve() 相当于是在当前文件夹下拼接了一个文件路径
path: path.resolve(__dirname, 'dist'), // 在打包之后的文件夹上拼接了一个文件夹，在打包时，直接生成
// __dirname,是一个成员，用来动态获取当前文件模块所属的绝对路径
// __filename，可以动态获取当前文件夹的绝对路径（包含文件名）
// 打包后文件的文件
filename: "bundle.js",
// 告诉webpack不使用箭头
environment:{
arrowFunction: false
}
},
// 指定webpack打包时要使用模块
module: {
// 指定要加载的规则
rules: [
{
// test指定的是规则生效的文件
test: /\.ts$/,
// 要使用的loader
// use: 'ts-loader',
use: [
{
loader: 'ts-loader',
}
],
// 要排除的文件
exclude: /node-modules/
}
]
},
// 配置Webpack插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: "这是一个自定义的title"
template: "./src/index.html" //模板
}),
],
// 用来设置引用模块（import引入文件）
resolve: {
extensions: ['.ts', '.js']
}
}
tsconfig.json
- 根目录下创建tsconfig.json，配置可以根据自己需要
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true
}
}
package.json
- 修改package.json添加如下配置
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open chrome.exe"
},
}
执行、构建
- 在src下创建ts文件，并在并命令行执行
npm run build对代码进行编译，或者执行npm start来启动开发服务器
Babel
- 作用
- 结合babel来对代码进行转换以使其可以兼容到更多的浏览器
- 新语法转换成旧语法
- 新的技术（类和对象）在旧浏览器不支持的通过一些方式让其支持
- 结合babel来对代码进行转换以使其可以兼容到更多的浏览器
安装依赖包
npm i -D @babel/core @babel/preset-env babel-loader core-js |
- 共安装了4个包，分别是：
- @babel/core
- babel的核心工具
- @babel/preset-env
- babel的预定义环境，兼容不同的浏览器
- babel-loader
- babel在webpack中的加载器（将babel和webpack结合的工具）
- core-js
- 模拟js的运行环境，core-js用来使老版本的浏览器支持新版ES语法
- @babel/core
修改webpack.config.js配置文件
// 引入一个包，nodejs中的一个模块，作用是拼接路径 |
面向对象
介绍
- 面向对象，简而言之就是程序之中所有的操作都需要通过对象来完成
- 举例来说：
- 操作浏览器要使用window对象
- 操作网页要使用document对象
- 操作控制台要使用console对象
类（class）
- 类可以理解为对象的模型，程序中可以根据类创建指定类型的对象
定义类
- 使用class关键字定义一个类
- 类(对象)中包含两个部分
- 属性
- 直接定义的属性是实例属性，需要通过对象的实例去访问
- const per = new Person()
- per.name
- 使用static开头的属性是静态属性（类属性），可以直接通过类去访问
- Person.age
- readonly开头的属性表示一个只读的属性无法修改
- readonly name:string = ‘xxxx’
- static readonly age = 18
- 直接定义的属性是实例属性，需要通过对象的实例去访问
- 方法
- 如果方法已static开头则方法就是类方法，可以直接通过类去调用
- 如果直接定义方法，则方法是实例方法，需要通过对象的实例去调用
// 定义一个类
class Person{
//定义实例属性
name: string = '孙悟空';
// 在属性前使用static关键字可以定义类属性（静态属性）
static age: number = 18;
// 定义方法
sayHello(){
console.log('hello，大家好')
}
static sayBye(){
console.log('goodbye，再见')
}
}
const per = new Person() // per是person的实例对象
console.log(per.name)
console.log(Person.age)
per.sayHello()
Person.sayBye()
- 属性
面向对象的特点
构造函数
- constructor 被称为构造函数
- 构造函数在对象创建时调用，即调用new Dog()时
- this指向
- 在实例方法中，this表示当前的实例
- 在构造函数中当前对象就是当前新建的那个对象
- 在方法中可以通过this来表示当前调用方法的对象
class Dog{
// name = '旺财';
// age = 3;
name: string;
age: number;
// constructor 被称为构造函数
// 构造函数在对象创建时调用，即调用new Dog()时
constructor(name, age){
// 在实例方法中，this表示当前的实例
// 在构造函数中当前对象就是当前新建的那个对象
// 可以通过this向新建的对象中添加属性
this.name = name;
this.age = age
}
bark(){
// 在方法中可以通过this来表示当前调用方法的对象
console.log(this.name)
}
}
const dog = new Dog('小黑', 4)
const dog1 = new Dog('小白', 2)
dog.bark()
继承
- 通过继承可以将其他类中的属性和方法引入到当前类中
- Dog extends Animal
- 此时Animal被成为父类，Dog被称为子类
- 使用继承后，子类将会拥有父类所有的方法和属性
- 通过继承可以将多个类中共有的代码写在一个父类中，
- 这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法
- 如果希望在子类中添加一些父类中没有的属性或方法直接加
- 如果在子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的方法
- 这种子类覆盖掉父类方法的形式，称为方法重写
- 继承的好处，在不修改原来类的情况上对新继承的类进行扩展，例如表示狗的类
- 以下是比较繁琐的猫狗类
(function (){
// 定义一个表示狗的类
class Dog{
name: string;
age: number;
constructor(name, age){
this.name = name;
this.age = age
}
sayHello(){
console.log('汪汪汪')
}
}
// 定义一个表示猫的类
class Cat{
name: string;
age: number;
constructor(name, age){
this.name = name;
this.age = age
}
sayHello(){
console.log('喵喵喵')
}
}
const dog = new Dog('旺财', 5)
const cat = new Cat('咪咪', 3)
})() - 以下是使用继承后创建的猫狗类
(function (){
// 类的继承
// 定义一个表示动物的类
class Animal{
name: string;
age: number;
constructor(name, age){
this.name = name;
this.age = age
}
sayHello(){
console.log('动物在叫~')
}
}
// 定义一个表示狗的类
// 使Dog类继承Animal类
class Dog extends Animal{
run(){
console.log(`${this.name}在跑~~`)
}
sayHello(){
console.log('汪汪汪~')
}
}
// 定义一个表示猫的类
// 使Cat类继承Animal类
class Cat extends Animal{
}
const dog = new Dog('旺财', 5)
const cat = new Cat('咪咪', 3)
})()
super
- 在类的方法中super表示当前类的父类
- 如果在子类中写了构造函数，在子类构造函数中必须对父类中的构造函数进行调用
(function (){
class Animal{
name: string;
constructor(name){
this.name = name
}
sayHello(){
console.log('动物在叫~')
}
}
class Dog extends Animal{
age: number;
constructor(name, age){
// 如果在子类中写了构造函数，在子类构造函数中必须对父类中的构造函数进行调用
super(name); // 调用父类的构造函数，父类的构造函数中有name属性，这里同样需要
this.age = age
}
sayHello(){
// 在类的方法中super表示当前类的父类
super.sayHello()
}
}
const dog = new Dog('旺财', 3)
dog.sayHello()
})()
抽象类
- 抽象类，以abstract开头的类
- 抽象类和其他类区别不大，只是不能用来创建对象
- 抽象类就是专门用来被继承的类
- 抽象类中可以添加抽象方法
- 抽象方法使用abstract开头，没有方法体
- 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
(function (){
abstract class Animal{
name: string;
constructor(name){
this.name = name
}
abstract sayHello():void
}
class Dog extends Animal{
sayHello(){
console.log('汪汪汪~')
}
}
class Cat extends Animal{
sayHello(){
console.log('喵喵喵~')
}
}
const dog = new Dog('旺财')
dog.sayHello()
// const an = new Animal() // 报错，因为Animal是抽象类
})()
接口（interface）
- 接口，类似于抽象类，不同在于接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法
- 接口作用：
- 用来定义一个类结构，且定义一个类中应该包含哪些属性和方法
- 同时接口也可以当作类型声明使用
- 接口可以在定义类的时候去限制类的结构
- 接口中的所有的属性都不能有实际的值
- 接口只定义对象的结构，而不考虑实际值
- 在接口中所有的方法都是抽象方法
(function (){
// 声明类型
// 描述一个对象的类型
type myType = { // myType声明唯一
name: string,
age: number,
// [propName: string]: any
}
// 接口
interface myInterface{ // myInterface可以重复声明，使用时将同名的接口中的属性合并
name: string
age: number
}
interface myInterface{
gander: string
}
const obj: myType = {
name: 'sss',
age: 18
}
const obj1: myInterface = {
name: 'sss',
age: 18,
gender: '男'
}
/******************************************/
// 定义类
// 定义类时，可以使类去实现一个接口
// 实现接口就是使类满足接口的要求
// 实现接口时类中要保护接口中的所有属性
interface myInter{
name: string,
sayHello():void;
}
class MyClass implements myInter{
name: string;
constructor(name){
this.name = name
}
sayHello(){
console.log('大家好~')
}
}
})()
属性的封装
- TS可以在属性前添加属性的修饰符
- public（默认值） 修饰的属性可以在任意的位置访问（修改），可以在类、子类和对象中修改
- private 私有属性，私有属性只能在类内进行访问（修改），可以在类中修改
- 通过在类中添加方法使得私有属性可以被外部访问
- TS中设置getter和setter方法的方式，可以直接使用实例对象调用
- console.log(per.name)调用get name()方法
- per.name = ‘猪八戒’调用的是set name(value)方法
- protected 受保护的属性，只能在当前类和当前类的子类中访问（修改），可以在类、子类中修改
(function(){
// 定义一个表示人的类
class Person{
private _name: string;
private _age: number;
constructor(name, age){
this._name = name;
this._age = age;
}
/*
* getter方法用来读取属性
* setter方法用来设置属性
* - 它们被称为属性的存取器
* */
// 定义方法，用来获取name属性
// getName(){
// return this._name;
// }
//
// // 定义方法，用来设置name属性
// setName(value: string){
// this._name = value;
// }
//
// getAge(){
// return this._age;
// }
//
// setAge(value: number){
// // 判断年龄是否合法
// if(value >= 0){
// this._age = value;
// }
// }
// TS中设置getter方法的方式
get name(){
// console.log('get name()执行了！！');
return this._name;
}
set name(value){
this._name = value;
}
get age(){
return this._age;
}
set age(value){
if(value >= 0){
this._age = value
}
}
}
const per = new Person()
/*
* 现在属性是在对象中设置的，属性可以任意的被修改，
* 属性任意被修改将会导致对象中的数据变得非常不安全
* */
// per.setName('猪八戒');
// per.setAge(-33);
console.log(per.name) // 通过getter读取name属性
per.name = '猪八戒' // 通过setter修改name属性
per.age = -38
class A{
protected num: number;
constructor(num: number) {
this.num = num;
}
}
class B extends A{
test(){
console.log(this.num);
}
}
const b = new B(123);
// b.num = 33; // 访问不了，protected只能在类里面访问
/* class C{
name: string;
age: number
// 可以直接将属性定义在构造函数中
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}*/
class C{
// 可以直接将属性定义在构造函数中
constructor(public name: string, public age: number) {
}
}
const c = new C('xxx', 111);
console.log(c);
})()
泛型
- 在定义函数或是类时，如果遇到类型不明确就可以使用泛型
- 使用泛型
<T>是泛型，T是我们给这个类型起的名字（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解，就表示某个类型。- 如何调用函数
- 不指定泛型
- 使用时可以直接传递参数使用，类型会由TS自动推断出来，但有时编译器无法自动推断时还需要使用下面的方式
- fn(10)
- 指定泛型
- 可以在函数后手动指定泛型
- test
(10)
- 不指定泛型
- 可以同时指定多个泛型，泛型间使用逗号隔开
<T extends Inter>表示泛型T必须是Inter实现类（子类）, 对泛型的范围进行约束- 类中同样可以使用泛型
/* |
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小蘑菇🍄！