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.js3.可使用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)=>number
f = 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;
// }
}泛型：
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");