TS使用 typescript

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 = (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)=>numberf = function(n1,n2):number{ return n1+n2; }

array类型：

// 表示数字数组 let a:number[]; let b:Array;

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; // } }

【TS使用】泛型：

function fn(a: T): T { return a; }// 不指定泛型，会使用类型推断 console.log(fn("1")); console.log(fn(19)); /* 在定义函数或是类是，如果遇到类型不明确就可以使用泛型定义了一个表示类型的变量 */interface Inter { length: number; }/* 泛型限制，需要符合接口类型限制 T extends Inter 表示泛型T必须是Inter实现类（子类） */ function fn2(a: T): number { return a.length; }fn2("1");