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// 运行编译后的.jsnode hello.js3.可应用ts-node，一次性实现ts的编译与运行
// 装置ts-nodenpm install -g ts-node// 运行tsts-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)=>numberf = 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");