TypeScript 基础笔记

其他 2021-04-05 09:42:01 阅读次数: 0

TypeScript 基础笔记

1. TypeScript 简介

1.1 TypeScript 是什么

  • 以 JavaScript 为基础构建的语言
  • 一个 JavaScript 的超集
  • TypeScript 扩展了 JavaScript，并添加了类型
    • 让 JavaScript 从动态类型语言转为静态类型语言
  • 可以在任何支持 JavaScript 平台中执行
    • TypeScript 不能被 JavaScript 解析器直接执行

1.2 TypeScript 增加了什么

  • 类型
  • 支持ES新特性
  • 添加ES不具备的新特性
  • 丰富的配置选项
  • 强大的开发工具

2. TypeScript 开发环境搭建

2.1 下载安装 Node.js

2.2 npm 全局安装 TypeScript

  • 终端 npm install -g typescript

2.3 创建 TypeScript 文件

2.4 使用 tsc 进行编译

  • 进入 ts 文件所在目录
  • 执行 tsc xxx.ts

3. TypeScript 基本类型

3.1 类型声明

  • 类型声明是 TypeScript 非常重要的一个特点
  • 通过类型声明可以指定 TS 中变量（参数、形参）的类型
  • 指定类型后，当为变量赋值时，TypeScript 编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
  • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
let 变量: 类型;

let 变量: 类型 = 值;

function fn(参数: 类型, 参数: 类型): 类型{
    
    
	...
}

// 声明一个变量a, 同时指定它的类型为 number
let a: number;

// a 的类型设置为了 number, 在以后的使用过程中 a 的值只能是数字
a = 10;
a = 33;
// a = 'hello' // 报错

// 声明完变量直接进行赋值
// let c: boolean = true;

// 如果变量的声明和赋值是同时进行的，TS 可以自动对变量进行类型检测
let c = false;
c = true

// JS 中的函数是不用考虑参数的类型和个数的
// function sum(a, b) {
    
    
//     return a + b
// }

// console.log(sum(123, 456)); // 579
// console.log(sum(123, "456")); // "123456"

function sum(a: number, b: number): number {
    
    
    return a + b;
}

let result = sum(123, 456) // 传多传少，类型不对都会报错

3.2 自动类型判断

  • TypeScript 拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的，TypeScript 编译器会自动判断变量的类型
  • 所以如果变量的声明和赋值是同时进行的，可以省略掉类型声明

3.3 类型

类型 例子 描述
number 1, -33, 2.5 任意数字
string ‘hi’, “hi” 任意字符串
boolean true, false 布尔值
字面量 其本身 限制变量的值就是该字面量的值
any * 任意类型
unknown * 类型安全的any
void 空值（undefined） 没有值（或undefined）
never 没有值 不能是任何值
object {name:‘zx’} 任意的JS对象
array [1,2,3] 任意JS数组
tuple [4,5] 元素，TS新增类型，固定长度数组
enum enum{A,B} 枚举，TS中新增类型 
// number
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;

// boolean
let isDone: boolean = false;

// string
let color: string = "blue";
color = "red";

let fullName: string = "Bob Bobbington";
let age: number = 12;
let sentence: string = `Hello, my name is ${
      
      fullName}.
I'll be ${
      
      age + 1} years old next month.`;

// 也可以直接使用字面量进行类型声明
let a: 10;
a = 10;

// 可以使用 | 来连接多个类型(联合类型)
let b: "male" | "female";
b = "male";
b = "female";

let c: boolean | string;
c = true;
c = 'hello';

// any 表示的是任意类型，一个变量设置类型为 any 后相当于对该变量关闭了 TS 的类型检测
// 使用 TS 时，不建议使用 any 类型
// let d: any;

// 声明变量如果不指定类型，则 TS 解析器会自动判断变量的类型为 any (隐式的 any)
let d: any;
d = 10;
d = 'hello';
d = true;

// unknown 表示未知类型的值
let e: unknown;
e = 10;
e = 'hello';
e = true;

let s: string;

// d 的类型是 any，它可以赋值给任意变量
s = d;

e = 'hello';

// unknown 实际上就是一个类型安全的 any
// unknown 类型的变量，不能直接赋值给其他变量
if (typeof e === 'string') {
    
    
    s = e;
}

// 类型断言，可以用来告诉解析器变量的实际类型
/*****
 * 语法：
 *      变量 as 类型
 *      <类型>变量
 */
s = e as string;
s = <string>e;

// void 用来表示空，以函数为例，就表示没有返回值的函数
function fn(): void {
    
    
    return null;
}

// never 表示永远不会返回结果
function fn2(): never {
    
    
    throw new Error("报错了")
}

// object 表示一个 js 对象
let a: object;
a = {
    
    };
a = function (){
    
    }

// {} 用来指定对象中可以包含哪些属性
// 语法: {属性名:属性值,属性名:属性值}
// 在属性民后边加上?,表示属性是可选的
let b: {
    
    name: string, age?: number};
b = {
    
    name: '孙悟空', age: 18}

// [propName: string]: any 表示任意类型的属性
let c: {
    
    name: string, [propName: string]: any};
c = {
    
    name: '猪八戒', age: 18, gender: '男'};

/*****
 * 设置函数结构的类型声明:
 *      语法: (形参: 类型, 形参: 类型...) => 返回值
 */
let d: (a: number, b: number) => number;
// d = function (n1: number, n2: number): number {
    
    
//     return 10;
// }

/**
 * 数组的类型声明:
 *      类型[]
 *      Array<类型>
 */
// string[] 表示字符串数组
let e: string[];
e = ['a', 'b', 'c'];

// number[] 表示数值数值
let f: number[];

let g: Array<number>
g = [1,2,3];

/*****
 * 元组，元组就是固定长度的数组
 *      语法: [类型，类型，类型]
 */
let h: [string, number];
h = ['hello', 123]

/*****
 * enum 枚举
 */
enum Gender {
    
    
    Male = 0,
    Female = 1
}

let i: {
    
    name: string, gender: Gender};
i = {
    
    
    name: '孙悟空',
    gender: Gender.Male // 'male'
}
console.log(i.gender === Gender.Male);

// & 表示同时
let j: {
    
    name: string} & {
    
    age: number}
// j = {name: '孙悟空', age: 18};

// 类型的别名
type myType = 1 | 2 | 3 | 4 | 5;
let k: myType

4. TypeScript 编译选项

4.1 自动编译文件

  • 编译文件时，使用 -w 指令后，TS 编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译
  • 示例
    • tsc xxx.ts -w

4.2 自动编译整个项目

  • 如果直接使用 tsc 指令，则可以自动将当前项目下的所有 ts 文件编译为 js 文件
  • 但是能直接使用 tsc 命令的前提时，要先在项目根目录下创建一个 ts 的配置文件 tsconfig.json
  • tsconfig.json 是一个 JSON 文件，添加配置文件后，只需 tsc 命令即可完成对整个项目的编译
4.2.1 配置选项 include
  • 定义希望被编译文件所在的目录
  • 默认值: ["**/*"]
  • 示例
    • "include":["src/**/*","tests/**/*"]
    • 上述示例中，所有 src 目录和 tests 目录下的文件都会被编译
4.2.2 配置选项 exclude
  • exclude
    • 定义需要排除在外的目录
    • 默认值: ["node_modules", "bower_components","jspm_packages"]
    • 示例
      • "exclude": ["./src/hello/**/*"]
      • 上述示例中，src 下 hello 目录下的文件都不会被编译
4.2.3 配置选项 extends
  • extends
    • 定义被继承的配置文件
    • 示例:
      • "extends": "./configs/base"
      • 上述示例中，当前配置文件中会自动包含 config 目录下 base.json 中的所有配置信息
4.2.4 配置选项 files
  • files
    • 指定被编译文件的列表，只有需要编译的文件少时才会用到
    • 示例:
// 列表中的文件都会被 TS 编译器所编译
"files": [
	"core.ts",
	"sys.ts",
	"types.ts",
	"scanner.ts",
	"parser.ts",
	"utilities.ts",
	"binder.ts",
	"checker.ts",
	"tsc.ts"
]
4.2.5 配置选项 compilerOptions
  • 编译选项是配置文件中非常重要也比较复杂的配置选项
  • 在 compilerOptions 中包含多个子选项，用来完成对编译的配置
  • 项目选项
    • target
      • 设置 ts 代码编译的目标版本
      • 可选值:
        • ES3(默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2020、ESNext
      • 示例
        • 如上设置，我们所编写的 ts 代码将会被编译为 ES6 版本的 js 代码
        • "compilerOptions": {"target": "ES6"}
    • lib
      • 指定代码运行时所包含的库（宿主环境）
      • 可选值:
        • ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost…
      • 示例
        • "compilerOptions": {"target": "ES6", "lib": ["ES6", "DOM"], "outDir": "dist", "outFile": "dist/aa.js"}
    • module
      • 设置编译后代码使用的模块化系统
      • 可选值:
        • CommonJS、UMD、AMD、System、ES2020、ESNext、None
      • 示例
        • compilerOptions": {"module": "CommonJS"}
    • outDir
      • 编译后文件的所在目录
      • 默认情况下，编译后的 js 文件会和 ts 文件位于相同的目录，设置 outDir 后可以改变编译后文件的位置
      • 示例：
        • 设置后编译后的 js 文件将会生成到 dist 目录
        • "compilerOptions": {"outDir": "dist"}
    • outFile
      • 将所有的文件编译为一个js文件
      • 默认会将所有的编写在全局作用域中的代码合并为一个 js 文件，如果 module 制定了 None、System 或 AMD 则会将模块一起合并到文件之中
      • 示例：
        • "compilerOptions": {"outFile": "dist/app.js"}
    • rootDir
      • 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir 可以手动指定根目录
      • 示例：
        • "compilerOptions": {"rootDir": "./src"}
    • allowJs
      • 是否对 js 文件编译
    • checkJs
      • 是否对 js 文件进行检查
      • 示例：
        • "compilerOptions": {"allowJs": true, "checkJs": true}
    • removeComments
      • 是否删除注释
      • 默认值：false
    • noEmit
      • 不对代码进行编译
      • 默认值：false
    • sourceMap
      • 是否生成sourceMap
      • 默认值：false
    • 严格检查
选项名称 选项功能
strict 启用所有的严格检查，默认值为 true，设置后相当于开启了所有的严格检查
alwaysStrict 总是以严格模式对代码进行编译
noImplicitAny 禁止隐式的 any 类型
noImplicitThis 禁止类型不明确的 this
strictBindCallApply 严格检查 bind、call 和 apply 的参数列表
strictFunctionTypes 严格检查函数的类型
strictNullChecks 严格的空值检查
strictPropertyInitialization 严格检查属性是否初始化
  • 额外检查
选项名称 选项功能
noFallthroughCasesInSwitch 检查 switch 语句包含正确的 break
noImplicitReturns 检查函数没有隐式的返回值
noUnusedLocals 检查未使用的局部变量
noUnusedParameters 检查未使用的参数
  • 高级
    • allowUnreachableCode
      • 检查不可达代码
      • 可选值：
        • true，忽略不可达代码
        • false，不可达代码将引起错误
    • noEmitOnError
      • 有错误的情况下不进行编译
      • 默认值：false

5. 使用 webpack 打包 TypeScript 代码

5.1 webpack 整合

5.1.1 初始化项目
  • 进入项目根目录，执行命令 npm init -y，创建 package.json 文件
5.1.2 下载构建工具
  • npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
  • 安装包:
安装包名称 作用
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 中的清除插件，每次构建都会先清除目录
5.1.3 配置 webpack
  • webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {
    
     CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    
    
    optimization:{
    
    
        minimize: false // 关闭代码压缩，可选
    },

    entry: "./src/index.ts",

    devtool: "inline-source-map",

    devServer: {
    
    
        contentBase: './dist'
    },

    output: {
    
    
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        environment: {
    
    
            arrowFunction: false // 关闭webpack的箭头函数，可选
        }
    },

    resolve: {
    
    
        extensions: [".ts", ".js"]
    },

    module: {
    
    
        rules: [
            {
    
    
                test: /\.ts$/,
                use: {
    
    
                    loader: "ts-loader"     
                },
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
    
    
            title:'TS测试'
        }),
    ]
}
5.1.4 配置 TS 编译选项
  • tsconfig.json
{
    
    
    "compilerOptions": {
    
    
        "target": "ES2015",
        "module": "ES2015",
        "strict": true
    }
}
5.1.5 修改 package.json 配置
  • package.json
{
    
    
    ...
    "scripts": {
    
    
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "start": "webpack serve --open chrome.exe"
    },
    ...
}
5.1.6 项目使用
  • 执行npm run build对 ts 代码进行编译
  • 或者执行npm start来启动开发服务器

5.2 Babel

  • 除了webpack，开发中还经常需要结合babel来对代码进行转换
  • 以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中
    • 虽然TS在编译时也支持代码转换，但是只支持简单的代码转换
    • 对于例如：Promise等ES6特性，TS无法直接转换，这时还要用到babel来做转换
  • 安装依赖包
    • npm i -D @babel/core @babel/preset-env babel-loader core-js
安装包名称 作用
@babel/core babel 的核心工具
@babel/preset-env babel 的预定义环境
@babel-loader babel 在 webpack 中的加载器
core-js core-js 用来使老版本的浏览器支持新版ES语法
  • webpack.config.js
...
module: {
    
    
    rules: [
        {
    
    
            test: /\.ts$/,
            use: [
                {
    
    
                    loader: "babel-loader",
                    options:{
    
    
                        presets: [
                            [
                                "@babel/preset-env",
                                {
    
    
                                    "targets":{
    
    
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    "corejs":"3",
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
    
    
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
}
...
  • 如此一来，使用ts编译后的文件将会再次被babel处理
  • 使得代码可以在大部分浏览器中直接使用
  • 同时可以在配置选项的 targets 中指定要兼容的浏览器版本

6. TypeScript 面向对象

  • 要想面向对象，操作对象，首先要拥有对象
  • 要创建对象，必须要先定义类，所谓的类可以理解为对象的模型
  • 程序中可以根据类创建指定类型的对象
  • 举例
    • 可以通过Person类来创建人的对象，通过Dog类创建狗的对象，不同的类可以用来创建不同的对象

6.1 定义类

class 类名 {
    
    
    属性名: 类型;
    
    constructor(参数: 类型){
    
    
        this.属性名 = 参数;
    }
    
    方法名(){
    
    
        ....
    }

}
  • 示例
    class Person{
    
    
        name: string;
        age: number;
    
        constructor(name: string, age: number){
    
    
            this.name = name;
            this.age = age;
        }
    
        sayHello(){
    
    
            console.log(`大家好，我是${
      
      this.name}`);
        }
    }
  • 使用类
const p = new Person('孙悟空', 18);
p.sayHello();

6.2 构造函数

  • 可以使用constructor定义一个构造器方法
  • 在TS中只能有一个构造器方法
  • 例如
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) {
    
    
    }
}
  • 上面两种定义方法是完全相同的
  • 子类继承父类时，必须调用父类的构造方法（如果子类中也定义了构造方法）
  • 例如
class A {
    
    
    protected num: number;
    constructor(num: number) {
    
    
        this.num = num;
    }
}

class X extends A {
    
    
    protected name: string;
    constructor(num: number, name: string) {
    
    
        super(num);
        this.name = name;
    }
}
  • 如果在X类中不调用 super 将会报错

6.3 封装

  • 对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装
  • 默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置
    • 静态属性（static）：
      • 声明为static的属性或方法不再属于实例，而是属于类的属性
    • 只读属性（readonly）：
      • 如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改
    • TS中属性具有三种修饰符：
      • public（默认值），可以在类、子类和对象中修改
      • protected ，可以在类、子类中修改
      • private ，可以在类中修改
  • 示例
  • public
class Person{
    
    
    public name: string; // 写或什么都不写都是public
    public age: number;

    constructor(name: string, age: number){
    
    
        this.name = name; // 可以在类中修改
        this.age = age;
    }

    sayHello(){
    
    
        console.log(`大家好，我是${
      
      this.name}`);
    }
}

class Employee extends Person{
    
    
    constructor(name: string, age: number){
    
    
        super(name, age);
        this.name = name; //子类中可以修改
    }
}

const p = new Person('孙悟空', 18);
p.name = '猪八戒';// 可以通过对象修改
  • protected
class Person{
    
    
    protected name: string;
    protected age: number;

    constructor(name: string, age: number){
    
    
        this.name = name; // 可以修改
        this.age = age;
    }

    sayHello(){
    
    
        console.log(`大家好，我是${
      
      this.name}`);
    }
}

class Employee extends Person{
    
    

    constructor(name: string, age: number){
    
    
        super(name, age);
        this.name = name; //子类中可以修改
    }
}

const p = new Person('孙悟空', 18);
p.name = '猪八戒';// 不能修改
  • private
class Person{
    
    
    private name: string;
    private age: number;

    constructor(name: string, age: number){
    
    
        this.name = name; // 可以修改
        this.age = age;
    }

    sayHello(){
    
    
        console.log(`大家好，我是${
      
      this.name}`);
    }
}

class Employee extends Person{
    
    

    constructor(name: string, age: number){
    
    
        super(name, age);
        this.name = name; //子类中不能修改
    }
}

const p = new Person('孙悟空', 18);
p.name = '猪八戒';// 不能修改

6.4 属性存取器

  • 对于一些不希望被任意修改的属性，可以将其设置为 private
  • 直接将其设置为 private 将导致无法再通过对象修改其中的属性
  • 我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器
  • 读取属性的方法叫做 setter 方法，设置属性的方法叫做 getter 方法
  • 示例
class Person{
    
    
    private _name: string;

    constructor(name: string){
    
    
        this._name = name;
    }

    get name(){
    
    
        return this._name;
    }

    set name(name: string){
    
    
        this._name = name;
    }

}

const p1 = new Person('孙悟空');
// 实际通过调用getter方法读取name属性
console.log(p1.name);
// 实际通过调用setter方法修改name属性 
p1.name = '猪八戒';

6.5 静态属性

  • 静态属性（方法），也称为类属性
  • 使用静态属性无需创建实例，通过类即可直接使用
  • 静态属性（方法）使用 static 开头
  • 示例
class Tools{
    
    
    static PI = 3.1415926;
    
    static sum(num1: number, num2: number){
    
    
        return num1 + num2
    }
}

console.log(Tools.PI);
console.log(Tools.sum(123, 456));

6.6 this

  • 在类中，使用 this 表示当前对象

6.7 继承

  • 继承是面向对象中的又一个特性
  • 通过继承可以将其他类中的属性和方法引入到当前类中
  • 通过继承可以在不修改类的情况下完成对类的扩展
  • 示例
class Animal{
    
    
    name: string;
    age: number;

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

class Dog extends Animal{
    
    

    bark(){
    
    
        console.log(`${
      
      this.name}在汪汪叫！`);
    }
}

const dog = new Dog('旺财', 4);
dog.bark();

6.8 重写

  • 发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写
  • 在子类中可以使用 super 来完成对父类的引用
  • 示例
class Animal{
    
    
    name: string;
    age: number;

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

    run(){
    
    
        console.log(`父类中的run方法！`);
    }
}

class Dog extends Animal{
    
    

    bark(){
    
    
        console.log(`${
      
      this.name}在汪汪叫！`);
    }

    run(){
    
    
        console.log(`子类中的run方法，会重写父类中的run方法！`);
    }
}

const dog = new Dog('旺财', 4);
dog.bark();

6.9 抽象类（abstract class）

  • 抽象类是专门用来被其他类所继承的类，它只能被其他类所继承，不能用来创建实例
  • 使用 abstract 开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现
abstract class Animal{
    
    
  abstract run(): void;
  bark(){
    
    
      console.log('动物在叫~');
  }
}

class Dog extends Animals{
    
    
  run(){
    
    
      console.log('狗在跑~');
  }
}

7. TypeScript 接口

  • 接口的作用类似于抽象类
    • 不同点在于：接口中的所有方法和属性都是没有实值的，即接口中的所有方法都是抽象方法
  • 接口主要负责定义一个类的结构，接口可以去限制一个对象的接口
    • 对象只有包含接口中定义的所有属性和方法时才能匹配接口
  • 同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性
  • 示例（检查对象类型）
interface Person{
    
    
    name: string;
    sayHello():void;
}

function fn(per: Person){
    
    
    per.sayHello();
}

fn({
    
    name:'孙悟空', sayHello() {
    
    console.log(`Hello, 我是 ${
      
      this.name}`)}});
  • 示例（实现）
interface Person{
    
    
   name: string;
   sayHello():void;
}

class Student implements Person{
    
    
   constructor(public name: string) {
    
    
   }

   sayHello() {
    
    
       console.log('大家好，我是'+this.name);
   }
}

8. TypeScript 泛型

  • 定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定）
  • 此时泛型便能够发挥作用
  • 举例
// test 函数有一个参数类型不确定，但是能确定的时其返回值的类型和参数的类型是相同的
// 由于类型不确定所以参数和返回值均使用了 any，但是很明显这样做是不合适的
// 首先使用 any 会关闭 TS 的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型
function test(arg: any): any{
    
    
    return arg;
}

8.1 泛型函数

8.1.1 创建泛型函数
function test<T>(arg: T): T{
    
    
    return arg;
}
  • 这里的<T>就是泛型
  • T是我们给这个类型起的名字（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型
  • 所以泛型其实很好理解，就表示某个类型；
  • 那么如何使用上边的函数呢？
8.1.2 使用泛型函数
  • 方式一（直接使用）
test(10)

// 使用时可以直接传递参数使用，类型会由TS自动推断出来，但有时编译器无法自动推断时还需要使用下面的方式
  • 方式二（指定类型）
test<number>(10)

// 也可以在函数后手动指定泛型
  • 函数中声明多个泛型
    • 可以同时指定多个泛型，泛型间使用逗号隔开
function test<T, K>(a: T, b: K): K{
    
    
  return b;
}

test<number, string>(10, "hello");

// 使用泛型时，完全可以将泛型当成是一个普通的类去使用

8.2 泛型类

  • 类中同样可以使用泛型
class MyClass<T>{
    
    
  prop: T;

  constructor(prop: T){
    
    
      this.prop = prop;
  }
}

8.3 泛型继承

  • 除此之外，也可以对泛型的范围进行约束
interface MyInter{
    
    
  length: number;
}

function test<T extends MyInter>(arg: T): number{
    
    
  return arg.length;
}

// 使用T extends MyInter表示泛型T必须是MyInter的子类，不一定非要使用接口类和抽象类同样适用

9. 总结

  • 看了李立超老师的 TypeScript 教程，做个笔记，总结一下

猜你喜欢

转载自blog.csdn.net/qq_43645678/article/details/115313743
今日推荐
周排行
8种防盗链的方法
php的序列化和反序列化
Java 8：CompletableFuture
Android版本差异适配方案(5.0-9.0)
makedownpad使用
Spring Boot 使用AOP切面实现后台日志管理模块
实战SSM_O2O商铺_44【DES加密】 关键配置信息进行DES加密
ACM排行榜说明
【转】SQL重复记录查询
板球和秃子威力那个大
每日归档
更多
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)
2024-09-08(0)
2024-09-07(0)
2024-09-06(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022