TypeScript

一、TS简介

1、TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript

2、TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的

1、编译typescript

npm安装：

npm install -g typescript

新建demo.ts文件

function test () {
  console.log('Hello TS')
}

test();

编译代码：（输出一个编译后的js文件demo.js）

tsc demo.ts

2、运行typescript

1、运行js文件

node demo.js

2、运行ts文件

安装ts-node

npm i -g ts-node

运行ts文件（编译+运行）

ts-node demo.ts

二、TS变量声明

ts的类型注解可以省略，如：let num = 123;

1、数字

let num: number = 123;

2、字符串

let str: string = 'Hello TS'

3、布尔值（true/false）

let isDone: boolean = true;

4、undefined和null

let a: undefined = undefined;
let b: null = null;

5、联合类型

let uniteType: "male" | "female";
let c: boolean | string;

6、any（任意类型）

let d: any;

d = 123;
d = "Hello"

7、unknown（未知类型）

1、unknown实际上是一个类型安全的any

2、其他类型的变量，不能直接赋值给unknown

let _unknown: unknown;
_unknown = 123;
_unknown = true;

8、类型断言

// 写法一：尖括号
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

// 写法二：as
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

9、void类型

// 没有返回值
function warnUser(): void {
    console.log("This is my warning message");
}

10、never类型

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

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

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

11、object类型

let obj: object;
let obj1: {};

// 可选属性：age
let obj2: {name: string, age?: number};

// name是必需属性，其他属性可选
let obj3: {name: string, [propName: string]: any};
obj3 = {name: "张三", sex: "男"}

12、函数

let func: (a: number, b:number) => number

// 形参n1、n2可以不等于a、b
func = function(n1, n2){
  return n1 + n2;
}

函数声明

// function声明函数
function add(x: number, y: number): number {
  return x + y;
}

// 匿名函数声明
let myAdd = function(x: number, y: number): number { 
  return x + y; 
};

13、数组

// 写法一
let strArr: string[] = ["a", "b", "c"];
let numArr: number[] = [1, 2, 3, 4, 5];

// 写法二
let numArr1: Array<number> = [1, 2, 3, 4, 5];

14、元组

长度固定的数组

let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error

15、枚举

enum Gender{
  male,
  female
}

let person: {name: string, gender: Gender};
person = {
  name: "张三", 
  gender: Gender.male
};

// 判断性别
console.log(person.gender === Gender.male);

16、类型别名

type selectNum = 1 | 2 | 3 | 4 | 5;
let num: selectNum = 1;

type myType = {
  name: string,
  age: number
}
const obj: myType = {
  name: "李四",
  age: 20
}

三、TS配置文件

生成tsconfig.json

tsc -init

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true,                         /* Enable incremental compilation */
    "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
    "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    // "lib": [],                                   /* Specify library files to be included in the compilation. */
    // "allowJs": true,                             /* Allow javascript files to be compiled. */
    // "checkJs": true,                             /* Report errors in .js files. */
    // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
    // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                           /* Generates corresponding '.map' file. */
    // "outFile": "./",                             /* Concatenate and emit output to single file. */
    // "outDir": "./",                              /* Redirect output structure to the directory. */
    // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                           /* Enable project compilation */
    // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
    // "removeComments": true,                      /* Do not emit comments to output. */
    // "noEmit": true,                              /* Do not emit outputs. */
    // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                                 /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                    /* Enable strict null checks. */
    // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
    // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
    // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
    // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
    // "noImplicitOverride": true,                  /* Ensure overriding members in derived classes are marked with an 'override' modifier. */
    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */

    /* Module Resolution Options */
    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
    // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                             /* List of folders to include type definitions from. */
    // "types": [],                                 /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */

    /* Source Map Options */
    // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */

    /* Advanced Options */
    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
  }
}

1、include

用来指定哪些路径下的ts文件需要被编译

{
  "include": [
    "./src/**/*"
  ]
}

• **表示任意文件夹
• *表示任意文件

2、exclude

指定不需要被编译的文件（如node_modules）

{
  "exclude": [
    "node_modules",
    "./src/hello/**/*"
  ]
}

3、extends

继承其他配置文件

{
  "extends": "./config/base"
}

4、files

指定需要编译的文件

{
  "files": [
    "core.ts",
    "sys.ts",
    "types.ts"
  ]
}

5、compilerOptions

编译器选项

{
  "compilerOptions": [
    "target": "es2015",  /* 指定ECMAScript目标版本 */
    "module": "es6",     /* 指定生成哪个模块系统代码 */
    "lib": ["dom", "es6"],      /* 指定项目中用到的库 */
      "outDir": "./dist",  /* 指定编译后文件所在目录 */
      "outFile": "./dist/app.js", /* 将代码合并成一个文件 */
      "allowJs": true,     /* 是否对js文件进行编译 */
      "checkJs": true,     /* 是否检查js语法 */
      "removeComments": true,     /* 是否移除注释 */
      "noEmit": true,      /* 是否生成编译后的文件 */
      "noEmitOnError": true,      /* 有错误时不生成编译后的文件 */
      "alwaysStrict": true,       /* 编译后的文件是否使用严格模式 */
  ]
}

四、webpack配置文件

安装webpack、webpack-cli、ts-loader

npm i -D webpack webpack-cli ts-loader

指定打包要用到的模块（可以去掉tsconfig.json中exclude中的配置）

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

五、类

1、静态属性

1、类中直接定义的属性是实例属性，使用时要new

2、使用static开头的属性是静态属性（类属性），无需创建对象，可以直接通过类使用

class Person{
  // 定义实例属性
  name: string = "张三";

    // 静态属性，在属性前加static关键词
    static age: number = 18;
}

const per = new Person();

// 使用实例属性
console.log(per.name);
// 使用静态属性
console.log(Person.age);

2、只读属性

只读属性只能读取，不能设置

class Person{
  // 定义实例属性
  name: string = "张三";

    // 静态属性，在属性前加static关键词
    static age: number = 18;
  
  // 只读属性，属性前加readonly
  readonly gender: string = "男"
}

const per = new Person();

console.log(per.gender);

3、构造器

constructor，也叫构造函数，会在对象创建时调用，也就是new的时候

class Dog{
  name: string;
  age: number;
  
  constructor(name: string, age: number){
    
    console.log("我是构造函数内容");
    
    // 在实例方法中，this表示当前的实例
    // 在构造函数中，当前对象就是新建的那个对象（per）
    console.log(this);
    
    // 可以通过this向新建的对象中添加属性
    this.name = name;
    this.age = age;
  }
}

const dog = new Dog("小黑", 4);
const dog1 = new Dog("小白", 2);

4、继承

将多个类中的共有方法写在一个父类中

class Animal{
  name: string;
  age: number;
  constructor(name: string, age: number){
    this.name = name;
    this.age = age;
  }
  sayHello(){
    console.log("Hello,大家好！")
  }
}

class Dog extends Animal{
  run(){
    console.log(`${this.name}在跑~~`)
  }
}

class Cat extends Animal{
  
}

const dog = new Dog("旺财", 4);
const cat = new Cat("咪咪", 2);
dog.sayHello();
cat.sayHello();

// 调用自己的方法
dog.run();

5、super

class Animal{
  name: string;
  constructor(name: string){
    this.name = name;
  }
  sayHello(){
    console.log("Hello,大家好！")
  }
}

class Dog extends Animal{
  sayHello(){
    // super代表当前类的父类
    super.sayHello();
  }
}

class Cat extends Animal{
  age: number;
  // 如果在子类中写了构造函数，必须对父类的构造函数进行调用
  constructor(name: string, age: number){
    // super代表调用父类构造函数
    super(name);
      this.age = age;
  }
}

const dog = new Dog("旺财");
const cat = new Cat("咪咪");

6、抽象类

• 抽象类不能用来创建实例对象，就是用来被继承的

• 抽象类中可以创建抽象方法

  • 抽象方法没有函数体

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

关键词：abstract

abstract class Animal{
  name: string;
  constructor(name: string){
    this.name = name;
  }
  // 定义抽象方法
  abstract sayHello(): void;
}

class Dog extends Animal{
  sayHello(){
    console.log("Hello,dog")
  }
}

六、接口

• 接口用来定义一个类的结构

  • 接口中的所有属性都不能有实际值

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

  • 可以使类实现一个接口，实现接口就是满足接口的要求

• 接口可以重复声明，最后会组合在一起

interface myInter{
  name: string;
  // 接口中的方法是抽象方法，没有方法体
  sayHello(): void;
}

class MyClass implements myInter{
  name: string;
  constructor(name: string){
    this.name = name;
  }
  sayHello(){
    console.log("大家好")
  }
}

interface myInterface{
  name: string;
  age: number;
}

interface myInterface{
  gender: string
}

const obj: myInterface = {
  name: "王五",
  age: 33,
  gender: "男"
}