typescript 相关概念

news2024/11/24 2:54:11

TypeScript 开发环境搭建
1. 下载Node.js
  1. 14.15.1版本64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
  2. node官网： Node.js
2. 安装Node.js
3. 使用npm全局安装typescript
  1. 进入命令行
  2. 输入: npm i -g typescript
4. 创建一个ts文件
5. 使用tsc对ts文件进行编译
  1. 进入命令行进入
  2. ts文件所在目录
  3. 执行命令：tsc 文件名.ts
typtscript类型
1. 类型声明
  1. 通过类型声明可以指定TS中变量（参数、形参）的类型
  2. 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
  3. 简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值
  4. 语法：
```
let 变量：类型；
let 变量：类型 = 值;
function fn（参数：类型，参数：类型）：类型{
	...
}
```
2. 自动类型判断
  1. typescriptTS拥有自动的类型判断机制
  2. 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
  3. 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明
3. ts类型
  1. 常用类型
  2. 类型定义：
    1. 字面量：用| 表示或
    2. any：设置any相当于对该变量关闭了ts检测。可以赋值给其他变量，影响其他变量的类型 --- 避免使用
    3. unknown：表示位置的类型的值。他不能赋值其他类型的值。
      1. 解决：可以对unknown的值进行类型判断
    4. 类型断言：可以用来告诉解析器变量的实际类型
      1. 语法：变量 as 类型
      2. <类型> 变量
    5. void：用来表示为空，主要表示函数返回值为空，返回null也是表示为空
    6. never:表示永远不会返回结果
    7. {}：用来指定对象包含哪些属性
      1. 语法：{属性：属性值} eg： let b : {name: string}
      2. 在属性后加?，表示属性是可选的 eg：let b : {name: string， age?: number }
      3. 属性后面加任意：eg： let b : {name: string， [propName: string]: any }
    8. 设置函数结构的类型声明
      1. 语法：（形参：类型，形参：类型，...）=> 返回值
      2. eg：let d: (a:number, b:number) => number
    9. 数组表示：
      1. 表示：类型[]
        
        let e:string[]; 表示字符串 ;
        
        let f:number[]; 表示数字的数组
      2. 表示：Array<类型>
        
        let g: Array<number>
    10. 元组，元组就是固定长度的数组
      1. 写法：h: [string, string]; h = ['a', 'b']
    11. 枚举：enum
      1. 写法： let i : {name:string,gender:string}
      2. enum Gender{male=0,femal=1}
  3. 拓展：
    1. &：表示同时：let j: { name: string } & { age: number };
    2. |：
      1. 使用
      2. 类型的别名
        
        type myType = 1|2| 3|4| 5; let k: myType;
编译选项
1. 自动编译文件
  1. 编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。
  2. 示例：tsc xxx.ts -w
2. 自动编译整个项目
  1. 如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。
  2. 但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.
  3. jsontsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译
  4. 配置选项：在tsconfig.json文件
    1. include
      1. 定义希望被编译文件所在的目录
      2. 默认值：["/*"]
      3. **示例：
        
        "include": ["src//", "tests/**/"]
        
        上述示例中，所有src目录和tests目录下的文件都会被编译
    2. exclude
      1. 定义需要排除在外的目录
      2. 默认值： ["node_modules", "bower_components", "jspm_packages"]
      3. 示例：
    3. compilerOptions
      1. 编译选项是配置文件中非常重要也比较复杂的配置选项
      2. 在compilerOptions中包含多个子选项，用来完成对编译的配置
        
        项目选项
        
        target
        
        设置ts代码编译的目标版本
        
        可选值：ES3 (默认)、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
        
        示例：compilerOptions": {"target": "ES6"}
        
        如上设置，我们所编写的ts代码将会被编译为ES6版本的js代码
        
        lib
        
        指定代码运行时所包含的库（宿主环境）
        
        可选值：ES5、ES6/ES2015、 ES7/ES2016、ES2017、ES2018、 ES2019、ES2020、 ESNext、 DOM、WebWorker、 ScriptHost
        
        示例：{"lib": ["es6", "DOM"]}
        
        outDir
        
        用来指定编译后文件所在目录
        
        可选值：
        
        示例：
        
        outFile --- 用的不多
        
        将代码合并为一个文件
        
        allowJS
        
        是否对js文件进行编译，默认为false
        
        checkJS
        
        是否检查js代码是否符合语法规范
        
        removeComments：
        
        是否移除注释
        
        noEmit：
        
        不生成编译后的文件

类的介绍

属性的定义：
1. 实例属性: p.name
2. 类属性：Person.name
  1. eg: readonly name:string = 'zhangsan'

方法的定义：

实例方法：p.learn()
类方法：Person.learn()

构造函数

属性直接在类中定义

赋值是在类的构造函数赋值的：constructor(){}

class Person {
	name: string,
	age: number,
	
	constructor(name:string, age:number){
		// this表示当前对象的实例对象
		this.name = name;
		this.age = age;
	}
	
	eat(){
		console.log('吃饭')
	}
}


const p1 = new Person(name: 'zhangsan', age: 18);
const p2 = new Person(name:'lisi', age: 30);

p1.eat();

继承
1. Dog extends Animal
  1. 此时，Animal被称为父类，Dog被称为子类
  2. 使用继承后，子类将会拥有父类所有的方法和属性-
  3. 通过继承可以将多个类中共有的代码写在一个父类中，
    1. 这样只需要写一次即可让所有的子类都同时拥有父类中的属性
    2. 如果希望在子类中添加父类中没有的属性或方法，直接加就行
    3. 如果不满足父类中的方法，可以在本类中做重写（这种子类覆盖掉父类方法的形式，就是方法的重写）
  4. 父类也叫做超类，super
```
class Animal {
	name: string;
	constructor(name: string) {
		this.name = name;
	}
	sayHello() {
		console.log('在说话');
	}
}


class Dog extends Animal{ 
	age: number;
	constructor(name: string,age:number){
		// 如果在子类中写了构造函数，在子类构造函数必须对父类构造函数进行调用
		super();   // 调用父类构造函数
		this.age = age;
	}
	sayHello() {
		// 在类的方法中 super就表示当前类的父类
		//super.sayHello();
		console.log('汪汪汪')
	}
}

const dog = new Dog(name:'阿黄',age: 3);
```
  5. 抽象类
    1. 以abstract开头的类是抽象类，抽象类和其他类区别不大，只是不能用来创建对象抽象类就是专门用来被继承的关
    2. 作用：不能被创建实例
    3. 特点：可以创建抽象方法，通用方法
    4. 抽象方法：
      1. 定义一个抽象方法
      2. 抽象方法使用 abstract开头，没有方法体
      3. 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
        
        abstract class Animal { name: string; constructor(name: string) { this.name = name; } abstract sayHello():void; }
      4. 子类需要重写父类的抽象方法
定义接口：interface
1. 描述一个对象类型（使用别名） ----- 只能声明一个
```
abstract class Animal {
	name: string;
	constructor(name: string) {
		this.name = name;
	}
	
	abstract sayHello():void;
}
```
2. 接口用来定义一个类结构（使用interface） ---- 可以声明多个
```
interface myInterface{
    name: string;
    age: number;
}
interface myInterface{
    gender: string;
}

const obj: myInterface = { 
    name: 'sss',
    age: 111,
    gender:'男'
};
```
  注意：接口中的所有属性都不能有实际的值，接口值定义对象的结构，而不考虑实际的值。在接口中定义的方法都是抽象方法
3. 定义类时，可以使类去实现一个接口，实现接口就是使类满足接口的要求
4. 作用：接口主要是对类的定义规范
泛型：
1. 在定义函数或是类时，如果遇到类型不明确就可以使用泛型
```
function fn<T>(a:T):T{
    return a;
}
```
2. 可以直接调用具有泛型的函数
  1. 不指定泛型：fn(a:10);
  2. 指定泛型：fn<string>(a: 'hellow');
3. 可以传多个参数
```
function fn2<T, K>(a: T, b: K):T{
	console.log(b);
	return a;
}
fn2<number, string>(a: 123, b: 'hello');
```
4. 可以使用interface：T extends Inter 表示泛型T必须是Inter实现类（子类）
```
interface Inter{
	length: number;
}
function fn3<T extends Inter>(a: T): number{ 
	return a.length;
}

fn3( a: 10);
```