首页  思维笔记  详情

TypeScript

2021-12-20 15:56:09   24  举报





typescript的学习笔记和记录,免费克隆,给个赞吧~

程序员必备模板

typescript

class

作者其他创作

大纲/内容

开发环境

Node.js

https://nodejs.org/en/

typescript

https://www.typescriptlang.org/download

npm install typescript --save-dev

tsc

cmd => 输入tsc验证是否安装成功

tsc helloworld.ts

类型

基础类型

Number

数字

let decLiteral: number = 6;

String

字符串

let name: string = "bob";

Boolean

布尔值

let isDone: boolean = false;

Array

数组

let list: number[] = [1, 2, 3];

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

Tuple

元组

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

let x: [string, number] = ['111', 12];

Enum

枚举

enum类型是对JavaScript标准数据类型的一个补充。像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

enum sex {man = 1, woman = 2, unknow = 3}
let ii: {name: string, gender: sex}
ii = {
name: '123',
gender: sex.man
}

Any

任意类型,值可能来自于动态的内容,可以赋值给任意变量

let notSure: any = 4;

let d; // 隐式的any

Unkown

未知类型

类型安全的any,不能直接赋值给其他变量

let e:unkown = '1'

Void

null/undefined

void类型像是与any类型相反，它表示没有任何类型,只能为它赋予undefined和null

let unusable: void = undefined;

Null/Undefined

null/undefined

默认情况下null和undefined是所有类型的子类型

指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自

let n: null = null;

let u: undefined = undefined;

Never

never

never类型表示的是那些永不存在的值的类型

never类型是任何类型的子类型，也可以赋值给任何类型

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}

Object

对象

object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。

declare function create(o: object | null): void;

// 指定对象包含那些属性
let m1: {name: string, age: number}

// ? 表示可选属性
let m2: {name: string, age?: number}

// [propName: string]: any 不限制数量,表示任意类型的属性
let m3: {name: string, [propName: string]: any}

类型断言

类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。

通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

高级类型

联合类型

通过 | 进行分割

let a: string | number

交叉类型

类型保护与区分类型

可以为null的类型

类型别名

字符串字面量类型

数字字面量类型

枚举成员类型

可辨识联合

多态的 this类型

索引类型

映射类型

编译选项

tsconfig.json

https://www.typescriptlang.org/tsconfig

include

指定需要编译的TS文件 |　* 任意文件 ** 任意目录

"include": [
"./src/**/*"
],

exclude

定义需要排除在外的目录

默认值: ["node_modules","brower_components","jspm_packages"]

"exclude": [
"./src/hello/**/*"
]

extends

定义继承配置文件

"extends": "./config/base"

files

指定被编译文件的列表,只有编译文件少时才会被用到

"files": [
"hello.ts"
]

compilerOptions

编译器的选项

https://www.typescriptlang.org/docs/handbook/compiler-options.html

allowJs

Boolean

false

允许编译javascript文件

allowSyntheticDefaultImports

Boolean

module === "system" 或设置了 --esModuleInterop 且 module 不为 es2015 / esnext

允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查

allowUnreachableCode

Boolean

false

不报告执行不到的代码错误

allowUnusedLabels

Boolean

false

不报告未使用的标签错误

alwaysStrict

Boolean

false

以严格模式解析并为每个源文件生成 "use strict"语句

baseUrl

String

无

解析非相对模块名的基准目录

https://www.tslang.cn/docs/handbook/module-resolution.html#base-url

charset

String

utf8

输入文件的字符集

checkJs

Boolean

false

在 .js文件中报告错误。与 --allowJs配合使用

composite

Boolean

false

‎启用允许将 TypeScript 项目与项目引用一起使用的约束。‎

declaration

Boolean

false

生成对应的.d.ts文件

declarationDir

String

无

指定生成的声明文件的输出目录

declarationMap

Boolean

false

为d.ts文件创建源映射

diagnostics

Boolean

false

构建后输出编译诊断信息

disableReferencedProjectLoad

Boolean

无

禁止引用项目加载,减少ts项目自动加载数量

disableSizeLimit

Boolean

false

禁用JavaScript工程体积大小的显示,删除 TypeScript 语言服务器中 JavaScript 文件总源代码大小的 20mb 上限。

disableSolutionSearching

Boolean

无

禁用解决方案搜索,编辑时从多项目参考检查中选择一个项目

disableSourceOfProjectReferenceRedirect

Boolean

无

‎在引用复合项目时禁用首选源文件而不是声明文件。‎

downlevelIteration

Boolean

false

下层迭代

emitBOM

Boolean

无

在输出文件的开头发出UTF-8字节顺序标记(BOM)

emitDeclarationOnly

Boolean

无

仅输出 d.ts 文件，而不输出 JavaScript 文件

emitDecoratorMetadata

Boolean

无

‎为源文件中的修饰声明发出设计类型元数据

esModuleInterop

Boolean

false

发出额外的 JavaScript 以简化对导入 CommonJS 模块的支持

exactOptionalPropertyTypes

boolean

无

在类型检查时区分未定义和不存在

experimentalDecorators

Boolean

无

‎启用对 TC39 第 2 阶段草稿装饰器的实验性支持。‎

explainFiles

Boolean

无

打印编译期间读取的文件，包括包含该文件的原因

extendedDiagnostics

Boolean

false

‎生成后输出更详细的编译器性能信息。‎

forceConsistentCasingInFileNames

Boolean

false

‎确保进口时大小写正确

generateCpuProfile

String

profile.cpuprof

‎发出编译器运行以进行调试的 v8 CPU 配置文件

importHelpers

Boolean

false

允许每个项目从 tslib 导入一次帮助程序函数，而不是在每个文件中包含它们

importsNotUsedAsValues

remove‎或‎preserve或error

无

‎为仅用于类型的导入指定发出/检查行为

incremental

Boolean

无

‎保存 .tsbuildinfo 文件以允许对项目进行增量编译。‎

inlineSourceMap

Boolean

false

‎在发出的 JavaScript 中包含源映射文件。‎

inlineSources

Boolean

false

‎在发出的 JavaScript 内的源映射中包含源代码

isolatedModules

Boolean

false

确保每个文件都可以安全地转译，而无需依赖其他导入

jsx

preserve‎, react, react-native, react-jsx, react-jsxdev

无

指定生成的JSX代码

jsxFactory

String

React.createElement

指定面向 React JSX 发出时使用的 JSX 工厂函数，例如 'React.createElement' 或 'h'

jsxFragmentFactory

String

无

‎指定用于面向 React JSX 发出的片段的 JSX 片段引用，例如 'React.Fragment' 或 'Fragment'

jsxImportSource

String

react

‎指定在使用时用于导入 JSX 工厂函数的模块说明符。‎jsx: react-jsx*

keyofStringsOnly

Boolean

false

‎使 keyof 仅返回字符串，而不是字符串、数字或符号。旧版选项

lib

list

无

指定一组描述目标运行时环境的捆绑库声明文件

listEmittedFiles

Boolean

false

编译后打印发出的文件的名称

listFiles

Boolean

false

打印编译期间读取的所有文件

mapRoot

String

无

‎指定调试器应将地图文件而不是生成的位置放在该位置的位置

maxNodeModuleJsDepth

number

指定用于检查来自‎node_modules,仅适用于allowJs

module

none, commonjs, amd,
umd, system, es6/es2015,
es2020, es2022, esnext,
node12, or nodenext

CommonJS if target is ES3 or ES5,
ES6/ES2015 otherwise.

指定生成的模块代码

moduleResolution

classic or node

Classic if module is AMD, UMD, System or ES6/ES2015,

Matches if module is node12 or nodenext,

Node otherwise.

指定 TypeScript 如何从给定模块说明符查找文件

newLine

crlf or lf

系统默认值

‎设置用于发出文件的换行符

noEmit

Boolean

false

不生成编译文件

noEmitHelpers

Boolean

false

禁用生成自定义帮助程序函数，如在编译的输出中。‎__extends

noEmitOnError

Boolean

false

如果报告了任何类型检查错误，则不编译文件

noErrorTruncation

Boolean

false

‎禁用错误消息中的截断类型

noFallthroughCasesInSwitch

Boolean

为 switch 语句中的故障切换案例启用错误报告

noImplicitAny

Boolean

true if strict,false otherwise

为具有隐含类型的表达式和声明启用错误报告

noImplicitOverride

Boolean

无

确保使用重写修饰符标记派生类中的重写成员

noImplicitReturns

Boolean

false

为未在函数中显式返回的代码路径启用错误报告

noImplicitThis

Boolean

true if strict,false otherwise

不允许不明确类型的this

noImplicitUseStrict

Boolean

false

‎禁止在发出的 JavaScript 文件中添加"使用严格"指令

noLib

Boolean

false

禁用包含任何库文件，包括默认的 lib.d.ts

noPropertyAccessFromIndexSignature

Boolean

false

对使用索引类型声明的键强制使用索引访问器

noResolve

Boolean

false

禁用 imports, requires or <reference>s ‎从扩展TypeScript应添加到项目中的文件大小

noStrictGenericChecks

Boolean

false

禁用对函数类型中的泛型签名的严格检查

noUncheckedIndexedAccess

Boolean

无

‎使用索引访问时添加undefined到一个类型

noUnusedLocals

Boolean

false

在未读取局部变量时启用错误报告

noUnusedParameters

Boolean

false

noUnusedParameters

out

String

n/a

已弃用的设置,请改‎‎用 outFile

outDir

String

n/a

为所有发出的文件指定输出文件夹

outFile

String

n/a

‎指定一个将所有输出捆绑到一个 JavaScript 文件中的文件。如果‎‎declaration‎‎为 true，则还指定捆绑所有 .d.ts 输出的文件

paths

Object

无

‎指定一组将导入重新映射到其他查找位置的条目

plugins

list

无

指定要包含的语言服务插件的列表

preserveConstEnums

Boolean

true if isolatedModules,false otherwise.

禁用擦除‎ const enum ‎生成的代码中的声明

preserveSymlinks

Boolean

n/a

禁用解析指向其真实路径的符号链接。这与节点中的相同标志相关

preserveValueImports

Boolean

无

在 JavaScript 输出中保留未使用的导入值，否则这些值将被删除

preserveWatchOutput

Boolean

n/a

‎禁止在监视模式下擦除主机

pretty

Boolean

true

在 TypeScript 的输出中启用颜色和格式，使编译器错误更易于阅读

reactNamespace

String

React

‎指定createElementreact为调用的对象。这仅适用于面向 JSX 发出的情况

removeComments

Boolean

false

移除注释

resolveJsonModule

Boolean

false

启用导入 .json 文件

rootDir

String

‎根据输入文件列表计算‎

‎指定源文件中的根文件夹

rootDirs

list

根据输入文件列表计算

‎在解析模块时，允许将多个文件夹视为一个文件夹

skipDefaultLibCheck

Boolean

false

‎跳过类型检查 TypeScript 附带的 .d.ts 文件

skipLibCheck

Boolean

false

‎跳过类型检查所有 .d.ts 文件

sourceMap

Boolean

false

为发出的 JavaScript 文件创建源映射文件

sourceRoot

String

无

指定调试器的根路径以查找引用源代码

strict

Boolean

false

启用所有严格的类型检查选项

strictBindCallApply

Boolean

true if strict,false otherwise.

检查bind,call,apply方法的参数是否和原函数匹配

strictFunctionTypes

Boolean

true if strict,false otherwise.

分配函数时，请检查以确保参数和返回值与子类型兼容

strictNullChecks

Boolean

true if strict,false otherwise.

进行类型检查的时候考虑null和undefined,严格检查空值

strictPropertyInitialization

Boolean

true if strict,false otherwise.

检查已声明但未在构造函数中设置的类属性

stripInternal

Boolean

无

在JSDoc注释中禁用具有@internal的声明

suppressExcessPropertyErrors

Boolean

false

suppressImplicitAnyIndexErrors

Boolean

false

禁止显示‎‎noImplicit在‎‎为缺少索引签名的对象编制索引时出现任何错误

target

es3, es5, es6/es2015, es2016, es2017, es2018, es2019, es2020, es2021, or esnex

ES3

‎为发出的 JavaScript 设置 JavaScript 语言版本，并包含兼容的库声明

traceResolution

Boolean

false

记录期间使用的路径‎ moduleResolution ‎过程‎.

tsBuildInfoFile

String

.tsbuildinfo

‎指定 .tsbuildinfo 增量编译文件的文件夹‎

typeRoots

list

无

‎指定多个文件夹，其作用类似于‎ ./node_modules/@types

types

list

无

‎指定要包含的类型包名称，而不在源文件中引用‎

useDefineForClassFields

Boolean

true if target is ES2022 or higher, including ESNext,false otherwise.

‎发出符合 ECMAScript 标准的类字段‎

useUnknownInCatchVariables

Boolean

true if strict,false otherwise.

默认缺省值是unknow而不是any

webpack

官网文档

https://webpack.js.org/concepts/

配置过程

创建项目

E:.
└─src
└─index.ts

初始化

npm init -y

安装依赖

npm i -D webpack webpack-cli typescript ts-loader

配置webpack.config.js

const path = require('path')

module.exports = {
// 环境
    mode: "development",

// 入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件目录
        path: path.resolve(__dirname, 'dist'),
        // 指定打包后的文件
        filename: "bundle.js",
// 清理输出目录,不需要再安装clean-webpack-plugin
        clean: true
    },

    // 指定webpack打包使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test 指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node-modules/
            }
        ],

    }
}

配置tsconfig.json

{
  "compilerOptions": {
    "module": "ES6",
    "target": "ES6",
    "strict": true
  }
}

配置package.json

{
  "name": "part3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

编译验证

npm run build

新增npm包

npm i -D html-webpack-plugin webpack-dev-server

添加模板文件(src/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TS learn</title>
</head>
<body>

    <div id="box1">
        <h1>测试页面</h1>
    </div>

</body>
</html>

修改webpack.config.js

const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {

    // 配置webpack插件
    plugins: [
        new HTMLWebpackPlugin({
            // 自定义title
            // title: "TS学习",
            // 模板文件
            template: './src/index.html'
        })
    ]
}

修改package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack server --open"
  },

运行验证

npm run start

配置webpack.config.js

module.exports = {
// 设置引用模块
    resolve: {
        extensions: ['.ts', '.js']
    }
}

运行验证

npm run build

兼容性插件

npm i -D @babel/core @babel/preset-env babel-loader core-js

配置webpack.config.js

module.exports = {
// 指定打包文件所在目录
    output: {
        // 告诉webpack不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },

    // 指定webpack打包使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test 指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader: "babel-loader",
                        // 设置babel
                        options: {
                            // 设置预定义环境
                            presets: [
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        targets: {
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        // 指定corejs版本
                                        "corejs": "3",
                                        // 使用corejs的方式, "usage"表示按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader',
                ],
                // 要排除的文件
                exclude: /node-modules/
            }
        ],
    }
}

类(class)

https://www.typescriptlang.org/docs/handbook/2/classes.html

属性

demo

class Person {
    // 定义属性
    name: string = '孙悟空'
    static age: number = 18
    static readonly sex: number = 1
}

实例属性

直接定义的属性是实例属性,需要通过对象的实例去访问
const per = new Person()
per.name

静态属性(类属性)

使用static开头的属性是静态属性(类属性),可以直接通过类去访问
Person.age

只读属性

readonly开头的属性表示一个只读的属性无法修改

方法

实例方法

直接定义的方法是实例方法,需要通过对象的实例去访问
const per = new Person()
per.sayHello()

静态方法(类方法)

使用static开头的方法是静态方法(类方法),可以直接通过类去访问
Person.sayHH()

class Person {
// 定义方法
    sayHello() {
        console.log('hello world');

    }

    static sayHH() {
        console.log('hello static');

    }

}

构造函数(constructor)

构造函数会在我们使用 new创建类实例的时候被调用

构造函数中的this表示的是当前对象

class Dog {

    name: string
    age: number

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

    bark() {
        console.log('wwwww');

    }
}

const dog = new Dog('hh', 18)
const dog1 = new Dog('kk', 18)

console.log(dog);
console.log(dog1);

继承(extends)

子类从基类(父类)中继承了属性和方法

代码抽象简化

子类可重写父类的方法和属性

super

通过super可以直接调用父类的方法和属性

如果在子类中写构造函数,在子类的构造函数中必须调用父类的构造函数

// 基类(父类)
class Animal {
        name: string
        age: number

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

        say() {
            console.log('叫叫');
        }

    }

    // 继承基类(父类)的属性和方法
    class Dog extends Animal{
        name: string = '233'

        run() {
            console.log(`${this.name}在跑~~~`);

        }

        sayHello() {
            // super 表示当前类的父类
            super.say()
        }
    }

    // 继承基类(父类)的属性和方法
    class Cat extends Animal{

        constructor (name: string, age: number) {

            super(name, age)
            this.age = age
        }

    }

    const dog = new Dog('123', 1)
    const cat = new Cat('456', 2)

    console.log(dog);
    console.log(cat);
    dog.run()
    dog.sayHello()

抽象类(abstract)

abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法

抽象方法只能定义抽象类中且子类必须对抽象方法进行重写

/**
     * 抽象类
     */
    abstract class Animal {
        name: string
        age: number

        constructor(name:string , age: number) {
            this.name = name
            this.age = age
        }
        /**
         * 抽象方法只能定义抽象类中且子类必须对抽象方法进行重写
         *
         */
       abstract say(): void
    }

    // 继承基类(父类)的属性和方法
    class Dog extends Animal{
        name: string = '233'

        run() {
            console.log(`${this.name}在跑~~~`);

        }

        say() {
            console.log('1111111');

        }
    }

    // 继承基类(父类)的属性和方法
    class Cat extends Animal{

        constructor (name: string, age: number) {

            super(name, age)
            this.age = age
        }

        say() {
            console.log('22222');

        }

    }

    const dog = new Dog('123', 1)
    const cat = new Cat('456', 2)

    console.log(dog);
    console.log(cat);
    dog.run()

修饰符

public

公共修饰符

任意位置访问修改

private

私有修饰符

只有类内可以访问修改 | 通过在类中添加方法是的私有属性(方法)可以被外部访问

protected

受保护的修饰符

只能在当前类和子类中去访问修改

class Person {

        /**
         * public 公共修饰符任意位置访问修改
         *
         * private 私有修饰符  只有类内可以访问修改 | 通过在类中添加方法是的私有属性(方法)可以被外部访问
         *
         * protected 受保护的修饰符  只能在当前类和子类中去访问修改
         *
         */
        private _name: string
        private _age: number

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

        // getName() {
        //     return this._name
        // }

        // setName(name: string) {
        //     this._name = name
        // }

        get name() {
            return this._name
        }

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

    }

    const per = new Person('123', 12)

    /**
     * 现在属性是在对象中设置的,属性可以任意的被修改
     *
     * 属性可以任意被修改将会导致对象的数据变得非常不安全
     */
    // per.name = '789'
    // per.age = -10

    console.log(per.name);

    per.name = '789'

    console.log(per.name);

    class C {
        constructor(public name: string, public age:number ) {
            this.name = name
            this.age = age
        }
    }

接口(interface)

接口用来定义一个类结构,用来定义一个类中应包含那些属性和方法

接口也可以当成类型声明去使用,且可重复命名

接口只定义对象的结构,不考虑实际值

接口中所属有的方法都是抽象方法

/**
     * 对象类型声明
     */
    type myType = {
        name: string,
        age: number
    }

    const obj: myType = {
        name: '111',
        age: 123
    }

    /**
     * 对象类型声明
     */

    interface myInterface {
        // 接口只定义对象的结构,不考虑实际值
        name: string
        age: number
    }

    // 接口也可以当成类型声明去使用,且可重复命名
    interface myInterface {
        gender: string
    }

    const obj1: myInterface = {
        name: '444',
        age: 123,
        gender: '12'
    }

    interface helloInterface {
        name: string
        //接口中所属有的方法都是抽象方法
        say(): void
    }

    /**
     * 定义类时,可以使类去实现一个接口
     *  实现接口就是使类满足接口的要求
     */
    class MyClass implements helloInterface {
        name: string
        constructor(name: string) {
            this.name = name
        }
        say(): void {
            throw new Error("Method not implemented.")
        }

泛型

在定义函数或类时遇到不明确的类型可以使用泛型,泛型可以指定多个

组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能

泛型类使用（ <>）括起泛型类型，跟在类名后面

/**
* 在定义函数或类时遇到不明确的类型可以使用泛型
*/

function fn<T>(a: T): T {
    return a
}

// 直接调用具有泛型的函数
let res = fn(10) // 不指定泛型,TS自动对类型进行推断
let res2 = fn<string>('123') // 指定泛型

// 泛型可以指定多个
function fn2<T, K>(a: T, b: K):T {
    console.log(b);
    return a
}

fn2<number, string>(123, '456')

interface Inter{
    length: number
}

// 泛型T必须是Inter实现类(子类)
function fn3<T extends Inter>(a: T): number {
    return a.length
}

fn3('123')

class myFuc<T> {
    name: T
    constructor(name: T) {
        this.name = name
    }
}

const mc = new myFuc<string>('abc')