关于typescript:TS使用

TS 学习应用

一、ts 环境搭建

1.ts 简介

typescript 是 javascript 的一个超集，在 js 的根底上，增加了变量类型的限度

2. 环境

1. 装置 node：https://nodejs.org/dist/v16.1…
2. 应用包管理器装置 ts 编译器 typescript

npm install -g typescript

编译运行：

// tsc =====> typescript compiler

// 编译 将指定 ts 编译编译成.js，tsc hell.ts - w 可实现文件批改后的主动从新编译
tsc hello.ts

// 运行编译后的.js
node hello.js

3. 可应用 ts-node，一次性实现 ts 的编译与运行

// 装置 ts-node
npm install -g ts-node

// 运行 ts
ts-node hello.ts

二、ts 的根本类型

1. 类型申明的根本应用形式：

let a: number;
let b: string = "hello";
function fn(x:number, y:string):void{console.log(x, y);
}

2. 罕用类型

number、string、boolean 类型：

let a:string;
let b:boolean;
function fu():number{return 1;}

字面量类型：

// 间接应用字面量进行类型申明，应用时相当于常量
// 能够应用 | 来连贯多个类型
let sex: "male" | "female";
sex = 'male';

any 类型：

// 任意类型，等同于没有类型限度了
let d: any;    // 显示 any 类型
let m;        // 隐式 any 类型 

unknown 类型：

let s: string;

// unknown 实际上就是类型平安的 any
// unknown 类型的变量，不能间接赋值给其它类型的变量
let e: unknown = "hello";

// 将 unknown 赋值给其它类型
// 办法一：类型判断
if(typeof e === "string"){s = e;}

// 办法二：类型断言
// s = (<string>e);
s = e as string;

void 与 never:

// void 返回值为空值
function fn():void{return undefined||null;}

// never 不会有返回值，罕用于用来报错的函数
function fn2():never{throw new Error('error');
}

object 类型：

// 对象申明一：let a: object; // 能够是任何类型的对象，个别不实用

// 对象申明二：let b: {        // 对象类型申明，蕴含属性限度
    name: string,
    age? : number        // ? 示意改属性可选
};

b = {
    name: 'jiangjiangwa',
    age: 18
}

// 对象申明三：let c:{
    name: string,

    // 任意的字符串属性名，任意类型的 any 属性值
    [x: string]: any
}

函数构造类型申明：

// (形参: 类型，形参: 类型)=> 返回值类型
let f :(arg1:number,arg2:number)=>number

f = function(n1,n2):number{return n1+n2;}

array 类型：

// 示意数字数组
let a:number[];
let b:Array<number>;

tuple 固定长度的数组：

let h:[123,string];
h = [123, "world"];

enum 枚举类型：

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

联结类型：

let a:number|string;
a = 1;

let b : {name:string}&{age:number};

b = {
    name:'jiangjiangwa',
    age:18
}

类型的别名

type myType = string | number;

let k:myType = 'hello';

三、ts 编译选项

初始化 ts 编译配置文件 tsconfig.json

tsc --init    

应用 tsconfig.json 后，可批量编译整个我的项目的所有 ts 文件
// tsc 间接编译所有 ts 文件

// tsc -w 编译所有 ts 文件并监督所有 ts 文件 

tsconfig.json 配置参数阐明：

{
  /* 
  tsconfig.json 是 ts 编译器的配置文件，ts 编译器会读取该文件，并且依据该文件的配置来编译 ts 文件。"include": 用来指定那些 ts 文件须要被编译
      门路：**  递归匹配任意子目录
            *  示意任意文件
            ?  匹配一个任意字符（不包含目录分隔符

   */
  "include": ["./src/**/*.ts", "./src/**/*.js", "./main.ts"],
  //  "exclude": ["./node_modules"],  // 有默认值
  "compilerOptions": {
    //target 用来指定 ts 被编译为的 ES 的版本
    "target": "ESNext", //ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
    "module": "es2015", // 指定编译为模块化标准

    //lib 用来指定哪些库是须要被蕴含在编译后的 js 中  能够指定多个
    // "lib": ["dom","es6"] // 默认不变

    "outDir": "./dist", // 指定编译后的 js 文件输入目录

    // 设置 outFile 后，所有全局作用域中的代码，回合并到对立的 js 文件中，个别应用打包工具实现
    // "outFile": "./dist/bindle.js",

    // 是否对 js 文件进行编译，默认是 false
    "allowJs": true,

    // 是否查看 js 代码的语法，默认是 false, 须要在 tsconfig.json 中设置 "allowJs": true
    "checkJs": true,

    "removeComments": false, // 是否移除正文，默认是 false

    // 不生成编译后的 js 文件，默认是 false. 但只须要对 ts 进行语法查看时，应用
    "noEmit": false,

    // 所有严格查看的总开关
    "strict":true,

    // 产生谬误时，不生成编译文件, 默认是 false
    "noEmitOnError": true,

    "alwaysStrict": true, // 是否开启严格模式，默认是 false，当应用了模块化语法时，默认开启了严格模式

    // 不容许应用隐式 any 类型，默认是 false
    "noImplicitAny": true,

    // 不容许不明确类型的 this
    "noImplicitThis": true,

    "strictNullChecks": false, // 是否开启严格空值查看，默认是 false
  
  } 
}

五、面向对象

1. 类的应用

// 应用 class 关键字定义一个类
/* 
对类的属性（实例属性、动态属性）和办法进行形容
在对类的静态方法或实列属性进行赋值时，须要被限度
 */

class Person {
  // 动态属性
  static readonly county: string = "中国";

  // 实例属性
  name: string = "default";
  age = 18;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 实列办法
  //   say: (a: number, b: number) => void = function (a, b) {//     console.log(a + b);
  //   };
  say(a: number, b: number): number {return a + b;}
}

const person = new Person("John", 30);

extends 应用：
凋谢关闭准则（OCP，Open Closed Principle），批改是关闭的，对扩大凋谢。

class Animal {
    name: string;
    age: number;
    constructor(name: string, age: number) {
      this.name = name;
      this.age = age;
    }
    say() {console.log("I am a animal");
    }
  }

  class Dog extends Animal {constructor(name: string, age: number) {super(name, age);
    }
  }

  class Cat extends Animal {say(): void {console.log('miao miao miao')
      }
      // 没有重写 contructor 办法，创立的实例会调用父类的构造函数
  }

Cat.prototype.__proto__ = Animal.prototype

抽象类 abstract:

(function () {
    // 不能用来创立实列，专门用来继承的类
    // 能够增加形象办法
  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 {constructor(name: string, age: number) {super(name, age);
    }
    say(): void {console.log('wang wang wang')
    }
  }

  class Cat extends Animal {say(): void {console.log("miao miao miao");
    }
    // 没有重写 contructor 办法，创立的实例会调用父类的构造函数
  }
})();

接口 interface

const obj: myInterface = {
    name: "John",
    age: 30,
    gender: "男",
    say() {console.log("jiang");
    },
  };
  console.log(obj);

  // 构造用来定义类的构造, 也可当作类型申明应用
  // 可反复申明，类型限度叠加, 接口中，所有办法，都是形象办法
  // 实现接口，就是满足接口的要求
  interface myInterface {
    name: string;
    age: number;
  }

  interface myInterface {
    gender: string;
    say(): void;}

  class Person implements myInterface {
    name: string;
    age: number;
    gender: string;

    constructor(name: string, age: number, gender: string) {
      this.name = name;
      this.age = age;
      this.gender = gender;
    }
    say(): void {throw new Error("Method not implemented.");
    }
  }
  console.log(new Person('jiang',18,'男'));

属性封装：

(function () {
  class Person {
    private _name: string;

    get name(): string {return this._name;}
    set name(value: string) {if (this.name.startsWith("张")) {this._name = value;} else {this._name = "张" + value;}
    }
    age: number;
    constructor(name: string, age: number) {
      this._name = name;
      this.age = age;
    }
  }

  let p = new Person("John", 30);
  console.log(p);

  p.name = "Tom";
  p.age = 10;
  console.log(p);
})();

class+ 属性封装的简写：

  class Dog {constructor(public name: string, private age: number) {}

    // 等同于
    // public name: string;
    // private age: number;
    // constructor(name: string, age: number) {
    //   this.name = name;
    //   this.age = age;
    // }
  }

泛型：

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

// 不指定泛型，会应用类型推断
console.log(fn("1"));
console.log(fn<number>(19));

/* 
    在定义函数或是类是，如果遇到类型不明确就能够应用泛型
    定义了一个示意类型的变量
 */

interface Inter {length: number;}

/* 
泛型限度，须要合乎接口类型限度
T extends Inter 示意泛型 T 必须是 Inter 实现类（子类）*/
function fn2<T extends Inter>(a: T): number {return a.length;}

fn2("1");