## TypeScript是什么 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个==超集==，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TypeScript是具有类型语法的JavaScript，是一种==强类型==编程语言，并且提供了最新的JavaScript特性。它经过代码编译后最终生成为JavaScript，能够在任何运行JavaScript的地方运行，比如浏览器、NodeJS、Electron、Deno等环境中。 ## TypeScript的作用 1. 避免在开发阶段的一些问题（类型错误的方法等） 2. 较好的语法提示（组件或者函数的必填/可选参数一目了然等） 3. 形成类型思维 4. 代码更健壮、更易读 5. 减少团队协作的沟通和文档书写 ## 基本类型 ### String ```typescript let name: string = '王同超' ``` ### Number ```typescript let age: number = 18 ``` ### Boolean ```typescript let isStudy: boolean = true ``` ### Undefined Null ```typescript let myname: undefined = undefined let myname: undefined = void 0 let myname: null = null // strictNullChecks配置项可以配置undefined和null是否 // 是其他类型的子类型 ``` ### Void ```typescript let name: void = undefined let func: () => void = () => {} ``` ### Symbol ```typescript let myname: symbol = Symbol('王同超'); ``` ### BigInt ```typescript let bigNumber: bigint = 10n ``` ### Array ```typescript let arr: number[] = [1, 2, 3] // or let arr: Array = ['hello', 'wrold'] ``` ### Tuple 元组类似于数组，与数组不同的是，数组只能定义固定类型的值而元组可以定义==不同类型的值==以及==元素的数量== ```typescript let tup: [number, string] = [18, '王同超'] // 这里定义的类型以及数量必须相同，否则会报错 ``` ### Enum #### 1.数字枚举 ```typescript enum Code{ success, faild, noAuth } // 编译成JavaScript为 var Code; (function (Code) { Code[Code["success"] = 0] = "success"; Code[Code["faild"] = 1] = "faild"; Code[Code["noAuth"] = 2] = "noAuth"; })(Code || (Code = {})); ``` #### 2.字符串枚举 ```typescript enum Code { success = 'SUCESS', faild = 'FAILD', noAuth = 'NOAUTH' } // 编译成JavaScript为 var Code; (function (Code) { Code["success"] = "SUCESS"; Code["faild"] = "FAILD"; Code["noAuth"] = "NOAUTH"; })(Code || (Code = {})); ``` #### 3.异构枚举 ```typescript enum Code { success, faild = 'FAILD', noAuth = 1, error } // 编译成JavaScript为 var Code; (function (Code) { Code[Code["success"] = 0] = "success"; Code["faild"] = "FAILD"; Code[Code["noAuth"] = 3] = "noAuth"; Code[Code["error"] = 4] = "error"; })(Code || (Code = {})); ``` #### 4.常量枚举 ```typescript const enum Code { success, faild, noAuth } console.log(Code.success) // 编译成JavaScript为 console.log(0 /* success */); ``` ### Any 任何类型都是any的“子类型”，因此any也没成为类型系统的顶级类型（全局超级类型）大量使用any类型会导致ts的类型保护形同虚设，在TypeScript 3.0 引入了unknown类型 ```typescript let data: any data = 18 data = '王同超' data = () => { alert('No problem') } // noImplicitAny 配置项能够配置是否允许隐式any（ts类型推断能够推断出类型） ``` ### Unknown 类似于any可以定义为任意类型，但是将unknown==赋值给其他类型==时会有限制，调用unknown类型数据==方法==也会报错 ```typescript let data: unknown data = 1 data = '王同超' data = { name: '王同超' } data = () => {} let data1: unknown = data // 没问题 let data2: any = data // 没问题 let data: number = data // error let data: string = data // error data.name // error ``` ### Never never类型表示永远不存在的值。常用在抛出异常或者没有返回值的函数等 ```typescript // 场景1 function fail(msg: string): never { throw new Error(msg); } // 场景2 function fn(x: string | number) { if (typeof x === "string") { // do something } else if (typeof x === "number") { // do something else } else { x; // has type 'never'! } } // 场景3 switch(x: 1|2) { case 1: break case 2: break default: const exhaustiveCheck: never = x break } ``` ### 字面量类型 ```typescript let myname: 'wtc' = 'wtc' let age: 18|19 = 18 ``` ## 接口用来声明类型，是行为的抽象 ```typescript // 声明类型 interface IStudy { result: boolean } interface ITest { name: string readonly age: number // 只读 isDone?: boolean // 可选 goSleep: () => void goStudy: (type: string) => IStudy goEat: (x: number, y: string) => boolean } // 接口会自动进行合并 interface ITest { goAway: () => void } let test: ITest = { name: '王同超', age: 18, isDone: true, goSleep: () => {}, goStudy: (type) => ({ result: true }), goEat: function(x, y) { this.age = '19' // error 因为age是只读属性不允许修改 return !!(x && y) }, goAway: () => void } ``` #### 1.接口继承接口 ```typescript interface ITest0 { goAway(x: number): number } interface ITest1 { name: string } // 单继承 interface ITest2 extends ITest1 { age: number } // 多继承 interface ITest3 extends ITest1, ITest0 {} let data: ITest2 = { name: '王同超', age: 18 } let data1: ITest3 = { name: '王同超', goAway: (x) => x } ``` #### 2.接口继承类 ```typescript class Test1 { name = '王同超' age = 18 goAway(x: number) { return x } } class Test2 { goEat() {} } interface ITest2 extends Test1, Test2 { // age: string 不能修改class中已有字段类型 mood: 'good'| 'bad' } let data: ITest2 = { name: 'WTC', age: 19, goAway: (x) => x, mood: 'good', goEat: () => undefined } ``` #### 3.类实现接口/类型别名 ```typescript interface ITest1 { name: string age: number goAway(x: number): number } interface ITest2 { mood: string } class Test implements ITest1, ITest2 { name = '王同超' age = 18 mood = 'good' goAway(x: number) { return x } } ``` #### 4.类继承类实现接口 ```typescript interface ITest { name: string age: number goAway(x: number): number } class A { name = '王同超' } // 如果父类已经实现，子组件可以选择不实现 class B extends A implements ITest { age = 18 goAway(x: number) { return x } } ``` ## 联合类型相当于或 ```typescript interface ITest { name: string | null // 定义name为字符串或者null } // 形参x的值可能为number类型或者undefined function test1 (x: number | undefined) {} ``` ## 交叉类型相当于合并 ```typescript interface ITest1 { name: string } interface ITest2 { age: number } type Itest = ITest1 & ITest2 let data: ITest1&ITest2 = { name: '王同超', age: 18 } // or 等价 let data: Itest = { name: '王同超', age: 18 } // 示例2 同名基础类型属性的合并，不同类型会合并为never类型 interface IA { type: number age: number } interface IB { type: string age: number } type IC = IA & IB let data: IC = { type: 1, // error Type 'number' is not assignable to type 'never' age: 18 } // 示例3 同名非基础类型属性的合并，会将属性进行合并 interface IA { type: { name: string } age: number } interface IB { type: { age: number } age: number } type IC = IA & IB let data: IC = { type: { // 这里将属性进行了合并 name: '王同超', age: 18 }, age: 18 } ``` ## 类型别名相当于interface的作用，一般将多个类型重命名为单个 ```typescript type ITest1 = string | number | undefined interface ITest2 { name: string } interface ITest3 { age: number } type ITest4 = ITest2 & ITest3 let data: ITest4 = { name: '12', age: 1 } ``` ## 类型断言当你认为当前环境下的值的类型，比TypeScript类型推断的更准确时使用 ```typescript let age: number = (myname as string).length // or 最好不要在jsx中使用以下写法 let age: number = (myname).length function iTakeFoo(foo: 'foo') {} const test = { someProp: 'foo' as 'foo' // 不使用类型断言会被推断成string } iTakeFoo(test.someProp) ``` ## 非空断言 ```typescript function test(func: (() => void) | undefined) { func!() } // 示例2 let test1: string | undefined | null let test2: string = test1! // 示例3 声明变量一定有值 let test1!: number // TODO let test2 = test1 * 2 ``` ## 索引签名指定索引的类型，索引签名分为数字索引和字符串索引 ```typescript // 字符串索引 interface IData { [key: string]: string } // 数字索引 interface IData2 { 1: '王同超' [key: number]: string } let data: IData = {} data.name = '王同超' ``` ## 类型保护类型保护允许你使用更小范围下的对象类型 ```typescript // typeof function test1(x: string | number) { if (typeof x === 'string') { // 该作用域内x推断为string // 这里可以使用string类型的方法，不能使用number类型方法 } } // instanceof class Foo { foo = 123; common = '123'; } class Bar { bar = 123; common = '123'; } function doStuff(arg: Foo | Bar) { if (arg instanceof Foo) { console.log(arg.foo); // ok console.log(arg.bar); // Error } if (arg instanceof Bar) { console.log(arg.foo); // Error console.log(arg.bar); // ok } } // in interface A { x: number; } interface B { y: string; } function doStuff(q: A | B) { if ('x' in q) { // q: A } else { // q: B } } // 字面量类型保护 type Foo = { kind: 'foo'; // 字面量类型 foo: number; }; type Bar = { kind: 'bar'; // 字面量类型 bar: number; }; function doStuff(arg: Foo | Bar) { if (arg.kind === 'foo') { console.log(arg.foo); // ok console.log(arg.bar); // Error } else { // 一定是 Bar console.log(arg.foo); // Error console.log(arg.bar); // ok } } ``` ## 类型推断 TypeScript会自动根据代码推断出类型 ```typescript interface IT1 { type: 1, name: '王同超' } interface IT2 { type: 2, age: 18 } function test(data: IT1|IT2) { // 自动推断为IT1类型 if (data.type === 1) { console.log(data.name) } } let myname = '王同超' // let myname: string let age = '18' // let age: number // function goAway(x: number, y: number): number function goAway(x: number, y: number) { return x + y } ``` ## 重载 ```typescript // 示例1 函数重载 function test(x: number): void function test(x: number, y: number): string function test(x: number, y: number, z: number): number function test(x: number, y?: number, z?: number): any { if (y !== undefined) { return String(y) } else if (y !== undefined && z !== undefined) { return x + y +z } } test(1) // function test(x: number): void test(1, 2) // function test(x: number, y: number): string test(1, 2, 3) // function test(x: number, y: number, z: number): number // 示例2 类重载 class A { goSleep(x: number, y: number): void goSleep(x: string, y: string): void goSleep(x: number): void goSleep(x: number|string, y?: number| string) { if (y !== undefined) { if (typeof y === 'number') {} else {} } else { if (typeof x === 'number') {} else {} } } } const AInstance = new A() AInstance.goSleep(1) ``` ## 泛型在某些情况下并不需要依赖对象的实际类型，但是仍然想提供强制的类型约束时使用，为未来的可能存在的数据类型做扩展。 #### 1.泛型接口 ```typescript interface ITest { name: string goAway: (x:T) => T } const data: ITest = { name: '王同超', goAway(x) { // (property) ITest.goAway: (x: string) => string return x } } data.goAway(1) // error ``` #### 2.泛型类型别名 ```typescript type ITest = { name: string goAway: (x:T) => T } const data: ITest = { name: '王同超', goAway(x) { // (property) ITest.goAway: (x: string) => string return x } } data.goAway(1) // error ``` #### 3.泛型函数 ```typescript function test(para: T):K[] { // ToDo return [] } test(1) ``` #### 4.泛型类泛型类不能约束静态成员 ```typescript class A { myname: T[] constructor() { this.myname = [] } // static goTes(): T {} // 泛型类不能约束静态成员 goAway(): T { return this.myname[0] } } new A() ``` #### 5.泛型的约束（继承）和默认值 ```typescript interface ILength { length: number; } function identity(arg: T, arg2: K): T { console.log(arg.length); // 没问题 return arg; } identity('12', 12) ``` #### 6.错误使用泛型 ```typescript // 没有意义 interface ITest { (x: T): void } type ITest = (x:T) => void ``` ## 类 * public - 公共的（默认），类能使用，实例能使用，也能被继承 * static - 静态的，类能使用，实例不能使用，能够被继承 * readonly - 只读的，除了不能被修改其余和public相同 * private - 私有的，只能类本身使用，实例不能使用，也不能被继承（如果加在constrctor上，该类不能被实例化和继承） * protected - 受保护的，只能在类和子类中使用，不能在实例中使用（如果加在constrctor上，该类不能被实例化，只能被继承） ```typescript class A { public name: string private age: number protected mood = 'good' readonly study = 'day' constructor(name: string, age: number) { this.name = name this.age = age } sayAge() { console.log(this.age) } static goEat() { console.log('goEat') } } A.goEat() let AInstance = new A('ts', 18) let a = AInstance.name let b = AInstance.sayAge() let c = AInstance.study // AInstance.study = 'month' // error 只读属性不能被修改 // AInstance.age // error 私有属性，实例不能调用 // AInstance.mood // error 受保护属性，实例不能调用 class B extends A { constructor() { super('ts', 18) } goTest() { // console.log(this.age) // error 私有变量不能被继承 console.log(this.mood) // 受保护变量可以被继承 } } B.goEat() let BInstance = new B() let d = BInstance.name let e = BInstance.sayAge() let f = BInstance.study // BInstance.study = 'month' // error 只读属性不能被修改 ``` ## 抽象类使用`abstract`关键字声明的类，被称为抽象类。抽象类包含1个或者多个抽象方法不能被实例化，只能被继承。 ```typescript // 抽象类中可以指定具体方法也可以只定义抽象方法， // 指定了具体方法，子类不用再实现。 // 指定了抽象方法，子类需要实现。 abstract class A { myname: string age: number constructor(name: string, age: number) { this.myname = name this.age = age } goSleep() { console.log('goSleep') } abstract goAway(): void } class B extends A { constructor(name: string, age: number) { super(name, age) } goAway() {} } const BInstance = new B('王同超', 18) BInstance.goSleep() BInstance.goAway() ``` ## 配置文件(tsconfig.js) [配置详细描述](https://www.staging-typescript.org/tsconfig) * files - 设置要编译的文件的名称 * include - 设置需要进行编译的文件，支持路径模式匹配 * exclude - 设置无需进行编译的文件，支持路径模式匹配 * extends - 扩展配置路径（可以继承其他配置） * references - 引入其他项目 * compilerOptions - 设置与编译流程相关的选项 ```typescript /* Visit https://aka.ms/tsconfig.json to read more about this file */ { // "file": [], // "extends": "", // references: [{path: ''}] "include": ["./src"], "exclude": [], "compilerOptions": { /* Projects */ // "incremental": true, /* 开启增量编译 */ // "composite": true, /* 开启复合项目的强制约束 */ // "tsBuildInfoFile": "./", /* 指定增量编译文件（.tsbuildinfo）的存储位置 */ // "disableSourceOfProjectReferenceRedirect": true, /* 禁用复合项目时的源文件而不是声明文件 */ // "disableSolutionSearching": true, /* 忽略（编辑器对于）复合项目中的引用/跳转，提高响应能力 */ // "disableReferencedProjectLoad": true, /* 禁用所有项目的自动加载（如果项目较大，ts会将所有可用项目加载到内存中，开启此功能，仅会动态加载编辑器打开的文件） */ /* Language and Environment */ "target": "ES5", /* 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES7'/'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ESNext' */ // "lib": [], /* 指定要包含在编译中的库文件 */ // "jsx": "preserve", /* 指定 jsx 代码的生成: 'undefined'(default), 'preserve', 'react', 'react-jsx', 'react-jsxdev', 'react-native' */ // "experimentalDecorators": true, /* 开启装ESMAScript的装饰器支持 */ // "emitDecoratorMetadata": true, /* 开启装饰器元数据支持 */ // "jsxFactory": "", /* 指定jsx编译时的工厂函数 e.g. 'React.createElement' or 'h' */ // "jsxFragmentFactory": "", /* 指定jsx对空标签的编译 e.g. 'React.Fragment' or 'Fragment'. */ // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ // "reactNamespace": "", /* 指定createElement目标React调用的对象，默认为React */ // "noLib": true, /* 禁用包含任何库文件，开启后lib失效 */ // "useDefineForClassFields": true, /* 定义类字段，TS与最新TC39语法语法相同，但运行时行为不同。适用于ES2022和ESNext */ /* Modules */ "module": "CommonJS", /* 指定使用的模块系统 CommonJS, UMD, AMD, ES6, ES2015, ES2020, None, ESNext, System*/ // "rootDir": "./", /* 指定项目根目录 */ // "moduleResolution": "node", /* 指定模块解析策略 'node'(Node.js) or 'classic'(TypeScript 1.6 发布前使用) */ // "baseUrl": "./", /* 指定解析非相对模块名称的基目录 */ // "paths": {}, /* 指定模块名到基于 baseUrl 的路径映射的列表 */ // "rootDirs": [], /* 指定多个项目根目录 */ // "typeRoots": [], /* 指定类型声明文件夹，默认node_modules/@types */ // "types": [], /* 指定加载的声明文件包 */ // "allowUmdGlobalAccess": true, /* 允许模块访问UMD变量 */ // "resolveJsonModule": true, /* 允许导入json文件 */ // "noResolve": true, /* 禁止检查 `import`s, `require`s or ``导入的文件类型 */ /* JavaScript Support */ // "allowJs": true, /* 允许编译js文件 */ // "checkJs": true, /* 允许检查js文件错误 */ // "maxNodeModuleJsDepth": 1, /* 指定用于从node_module检查JavaScript文件的最大文件夹深度。仅适用于' allowJs: true' */ /* Emit */ // "declaration": true, /* 生成相应的.d.ts文件 */ // "declarationMap": true, /* 生成.d.ts的sourcemap文件 */ // "emitDeclarationOnly": true, /* 只生成.d.ts文件，不生成js文件 */ // "sourceMap": true, /* 生成js的sourcemap文件 */ // "outFile": "./", /* 将输出文件合并为一个文件*/ "outDir": "./dist", /* 指定输出目录 */ // "removeComments": true, /* 删除编译后的所有的注释 */ // "noEmit": true, /* 不生成输出文件 */ // "importHelpers": true, /* 允许从tslib导入辅助函数（允许后，可以减少代码体积，防止在每一处使用到的地方实现一遍） */ // "importsNotUsedAsValues": "remove", /* 指定import仅用作类型时的行为，可选值'remove', 'preserve', 'error' */ // "downlevelIteration": true, /* 允许更加准确的转换为低版本js代码（会导致代码量过多） */ // "sourceRoot": "", /* 指定调试器查找源代码的根路径 */ // "mapRoot": "", /* 指定调试器应定位source map文件路径 */ // "inlineSourceMap": true, /* 允许source map文件写入js行内 */ // "inlineSources": true, /* 允许将.ts的原内容作为字符串包含在source map中（需要设置sourceMap或inlineSourceMap） */ // "emitBOM": true, /* 编译后文件写入UTF-8字节顺序标记（最好不要开启，除非有充分理由） */ // "newLine": "crlf", /* 指定编译文件的换行符，可选参数 crlf, lf */ // "stripInternal": true, /* 允许禁用在JSDoc注释中包含' @internal '的声明 */ // "noEmitHelpers": true, /* 允许禁用tslib中的辅助函数，但需要自己实现相关函数 */ // "noEmitOnError": true, /* 允许报告了类型错误不再进行编译 */ // "preserveConstEnums": true, /* 允许保留常量枚举 */ // "declarationDir": "./", /* 指定声明文件的目录 */ /* Interop Constraints */ // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ // "allowSyntheticDefaultImports": true, /* 允许合并默认导入，比如import * as React from "react"写成import React from "react" */ "esModuleInterop": true, /* 开启兼容通过esm方式导入cjs导出的代码 */ // "preserveSymlinks": true, /* 开启保留符号链接 */ "forceConsistentCasingInFileNames": true, /* 开启区分大小写文件名 */ /* Type Checking */ "strict": true, /* 开启严格类型检查 */ // "noImplicitAny": true, /* 开启隐式any报错 */ // "strictNullChecks": true, /* 开启严格null和undefined检查（不开启时，null和undefined是所有类型的子类型） */ // "strictFunctionTypes": true, /* 开启严格函数类型检查 */ // "strictBindCallApply": true, /* 开启对call, apply, bind的参数检查 */ // "strictPropertyInitialization": true, /* 开启严格属性初始化（开启后会检查类的构造函数中声明类型但未初始化变量是报错） */ // "noImplicitThis": true, /* 开启this为any时报错 */ // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ // "alwaysStrict": true, /* 开启严格模式检查每个模块，并在每个文件里加入 'use strict' */ // "noUnusedLocals": true, /* 开启变量未使用时报错 */ // "noUnusedParameters": true, /* 开启函数参数未使用时报错 */ // "exactOptionalPropertyTypes": true, /* 开启严格的可选参数属性检查（开启后，可选参数不能被赋值为undefined） */ // "noImplicitReturns": true, /* 开启隐式返回值时报错（函数可能有返回值或可能无返回值时报错） */ // "noFallthroughCasesInSwitch": true, /* 开启禁止switch中的case贯穿写法 */ // "noUncheckedIndexedAccess": true, /* 开启索引签名中包含undefined */ // "noImplicitOverride": true, /* 开启子类覆盖父类方法事，需添加override，否则报错 */ // "noPropertyAccessFromIndexSignature": true, /* 开启获取索引签名对象的key时，未定义进行报错 */ // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ // "allowUnreachableCode": true, /* 开启允许永远不会执行的代码（开启后，if else 的之后不会执行的代码不会进行报错） */ /* Completeness */ // "skipDefaultLibCheck": true, /* 跳过默认库的声明文件类型检查*/ "skipLibCheck": true /* 跳过 .d.ts 声明文件的类型检查 */ } } ``` > 参考： > ts官网：https://www.typescriptlang.org/ > 阿宝哥：https://juejin.cn/post/6844904182843965453 > 书籍：<<深入理解TypeScript>>