TypeScript(李立超)

最新推荐文章于 2024-08-11 10:01:02 发布

婷宝_知萌

最新推荐文章于 2024-08-11 10:01:02 发布

阅读量269

点赞数

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/weixin_58017233/article/details/131581763

版权

以JavaScript为基础构建的语言，一个JavaScript的超集，对js进行了扩展

01.TS简介

TS 完全支持js

在js里面引入了类型的概念，让js由动态语言变为静态语言

安装node.js的作用：

TS需要进行编译，编译成为js,需要解析器，解析器是使用node.js写的

使用tsc文件名   // 在黑窗口进行编译之后在所对应的文件下面会产生对应的js文件，js就可以直接在网页中执行了

下载Node.js. 官网链接
安装Node.js 安装路径尽量是纯英文的，不要有特殊符号或中文。一路next，无需选择其他。安装完成后，打开命令行或powershell，输入node -v，如果出现版本号，就证明安装成功了。
使用npm全局安装typescript 进入命令行输入：npm i -g typescript npm是node的包管理器。安装完成后，在命令行输入tsc，就证明typescript安装成功了。
创建一个ts文件进入代码文件夹，新建一个文本文档，将其文件名修改为01_helloTS.ts。 注意：在实际开发过程中，命名最好以字母开头，不要以数字开头。 打开后，输入console.log('Hello TS');
使用tsc对ts文件进行编译在文件夹路径栏中输入cmd打开命令行。在命令行中输入tsc 文件名对该文件进行编译。完成后在该文件夹下会出现一个01_helloTS.js文件，即编译器已经将ts代码编译为js代码。

如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测

02.TS类型声明

类型声明是TS中一个非常重要的特点，通过类型声明可以指定TS中变量(参数、形参)的类型。
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则复制，否则报错。

let c=false;

指定函数返回值的类型

ts中的类型声明也可以用在参数和返回值上面

// 参数的类型声明
function sum(a:number,b:number){
return a+b;
}
sum(a:123,b:456)

// 返回值的类型声明
function sum(a:number,b:number):number{
return a+b;
}
let result=(a:123,b:456)

03.TS中的类型（1）

类型	例子	描述
number	1, -33, 2.5	任意数字
string	‘hi’, “hi”, `hi`	任意字符串
boolean	true、false	布尔值true或false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:‘孙悟空’}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A, B}	枚举，TS中新增类型

字面量注：字面量类似于常量，只能赋一次值，不能再修改了。

let a: 10;
a = 10;  // 这是可以的
a = 11;  // 这会报错

可以使用 | 来连接多个类型，又称为联合类型。可以用来限制变量赋值在某几个值之间：是或的意思

// 可以使用 | 来连接多个类型，又称为联合类型。用来限制变量在某几个值之间。
let b: "male" | "female";
b = "male";  
b = "female";  // b = "male"或b = "female"都可以，不会报错。
b = "hello";  // b不能赋值为hello。只能赋值为male或female。

注：| 不仅可以连接字面量，也可以连接其他类型作为联合类型，如：

let c: boolean | string;  // c既能被赋值为布尔值，也能被赋值为字符串。
c = true;
c = "hello";

any 和unknow

any 表示的是任意类型，一个变量设置为类型any后相当于对该变量关闭了TS的类型检测。在TS中不建议使用any类型。声明变量时如果不指定类型，则TS解析器会自动判断变量的类型为any(隐式的any)。一个类型为any的变量，可以赋值给任意变量，且不会报错。

let a:string;
let b:any;   //b 的类型是any,它可以赋值给任意类型
b=10;
a=b;
// 存储number数据类型为any的b赋值给类型为string的a,不会报错

unknown unknown 表示未知类型。与any的区别：一个类型为unknown的变量，赋值给其他类型变量时编译器会报错。即一个类型为unknown的变量，不能直接赋值给其他变量。

补充：类型断言 类型断言，字面理解就是确定变量的数据类型。有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：

// 变量名 as 类型;
s = e as string;
// <类型>变量名
s = <string>e;

它之所以不被称为「类型转换」，是因为转换通常意味着某种运行时的支持。但是，类型断言纯粹是一个编译时语法，同时，它也是一种为编译器提供关于如何分析代码的方法。

类型断言可以用来告诉解析器变量的实际类型。

let s: string;
let e: string;
e = "hello";
s = e as string;  // 告诉解析器变量e的实际类型是string

unknow 表示未知类型的值

any,它可以赋值给任意类型

unkonw实际上就是一个类型安全的any

unkonw；类型的变量，不能直接赋值给其他变量【可以加一个判断或者类型断言】

void和never

主要用来设置函数的返回值

// void 用来表示空，以函数为例，就表示没有返回值的函数
function fn():void{
}
// never 表示永远不会返回结果  用来报错的
【程序报错之后立马结束没有返回值】
function fn2():never{
    throw new Error('报错了')
}

04.TS的类型（2）

object
// object 表示一个js对象
let a:object;
a={};
a=function(){}


// {}  用来指定对象中可以包含哪些属性
// 语法： {属性名：属性值，属性名：属性值}  里可以有多个
let b:{name:String,age?:number}  // 这个里面可以指定属性
b={name:'孙悟空'};
// 在属性后面加问号 表示这个内容是可选的 可以有或者可以没有
   // [propName:String]:any 表示任意类型的属性
       c={name:'猪八戒'，age:18,gander:'男'};

希望限制函数的参数，有几个返回值，返回值是什么类型的
    let d:(a:number,b:number)=>number;
// 设置函数结构的类型声明
// 语法：(形参：类型,形参：类型…………)=>返回值

array

string []表示字符串数组。 number []表示数值数组。

let f: string[];
f = ['a', 'b', 'c'];

还可以这样声明数组Array<类型>：

let g:Array<number>;  // 等价于 let g: number[];
g = [1, 2, 3];

数组的类型声明：①类型[] ② Array<类型>

tuple

tuple，元组，就是固定长度的数组，即其中的元素个数是固定的。语法 [类型, 类型, ...]，一般不会特别长。

let h: [string, number];
h = ['a', 10];

enum 枚举

将所有可能的情况一个个列出来。用法：

enum Gender{
	male = 0,
	female = 1
}

let i: {name: string, gender: Gender};
i = {
	name: '孙悟空',
	gender: Gender.male
}

console.log(i.gender === Gender.male)  // 运行后输出true

enum Color {
	Red,
	Green,
	Blue,
}
let c: Color = Color.Green;

enum Color {
	Red = 1,
	Green,
	Blue,
}
let c: Color = Color.Green;

enum Color {
	Red = 1,
	Green = 2,
	Blue = 4,
}
let c: Color = Color.Green;

补充：除了用 | 连接两个类型以外，还可以用 & 进行连接，表示该变量要同时具有用&连接的所有类型的属性。用法：

let j: {name: string} & {age: number};
j = {name: '孙悟空', age: 18};

类型的别名 可以简化类型的使用。

type myType = 1 | 2 | 3 | 4 | 5;
let k: myType;
// 这样给类型起别名，要比下面这样正常写简单方便：
// let k: 1 | 2 | 3 | 4 | 5;

k = 1;
l = 2;  这里的k可以等于myType里面包含的数

05.TS编译选项

自动编译文件

编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。
示例：

   tsc xxx.ts -w

自动编译整个项目

如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。
但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json tsc --init 能自动创建【有注释】的配置文件
tsconfig.json是一个JSON文件，添加配置文件后，只需tsc 命令即可完成对整个项目的编译
tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
配置选项：
- include 用来指定那些ts文件需要被编译
  - 定义希望被编译文件所在的目录
  - 默认值：[“*/”]
  - 示例：
```
"include":["src/**/*", "tests/**/*"]
```
  上述示例中，所有src目录和tests目录下的文件都会被编译
  
  路径： **表示任意目录 *表示任意文件
exclude
- 定义需要排除在外的目录
- 默认值：[“node_modules”, “bower_components”, “jspm_packages”]
- 示例：
  - ```
  "exclude": ["./src/hello/**/*"]
```
- 上述示例中，src下hello目录下的文件都不会被编译
extends
- 定义被继承的配置文件
- 示例：
  - ```
  "extends": "./configs/base"
```
- 上述示例中，当前配置文件中会自动包含config目录下base.json中的所有配置信息
files
- 指定被编译文件的列表，只有需要编译的文件少时才会用到
- 示例：
- - - - "files": [ "core.ts", "sys.ts", "types.ts", "scanner.ts", "parser.ts", "utilities.ts", "binder.ts", "checker.ts", "tsc.ts" ]
      - 列表中的文件都会被TS编译器所编译
- compilerOptions
  - 编译选项是配置文件中非常重要也比较复杂的配置选项
  - 在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 …
        
        示例：
        
        "compilerOptions": { "target": "ES6", "lib": ["ES6", "DOM"], "outDir": "dist", "outFile": "dist/aa.js" }
      - module
        
        设置编译后代码使用的模块化系统【指定要使用的模块化的规范】
        
        可选值：
        
        CommonJS、UMD、AMD、System、ES2020、ESNext、None
        
        示例：
        
        "compilerOptions": { "module": "CommonJS" }
      - outDir
        
        编译后文件的所在目录
        
        默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
        
        示例：
        
        "compilerOptions": { "outDir": "dist" }
        
        设置后编译后的js文件将会生成到dist目录
      - outFile
        
        将所有的文件编译为一个js文件【将代码合并为一个文件】
        
        默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中
        
        示例：
        
        "compilerOptions": { "outFile": "dist/app.js" }
      - rootDir
        
        指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录
        
        示例：
        
        "compilerOptions": { "rootDir": "./src" }
      - allowJs
        
        是否对js文件编译，默认是false
      - checkJs
        
        是否对js文件进行检查【是否检查js代码是否符合语法规范，默认是false】
        
        示例：
        
        "compilerOptions": { "allowJs": true, "checkJs": true }
      - removeComments
        
        是否删除注释
        
        默认值：false,使用true进行编译之后，产生的js文件里面不会有注释
      - noEmit
        
        不对代码进行编译【不生成编译之后的文件】
        
        默认值：false
      - sourceMap
        
        是否生成sourceMap
        
        默认值：false
    - 严格检查
      - strict
        
        启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
      - alwaysStrict
        
        总是以严格模式对代码进行编译【用来设置编译后的文件是否使用严格模式，默认是false】
      - noImplicitAny
        
        禁止隐式的any类型【不允许隐式的any类型】
      - noImplicitThis
        
        禁止类型不明确的this 【不允许不明确类型的this】
      - strictBindCallApply
        
        严格检查bind、call和apply的参数列表
      - strictFunctionTypes
        
        严格检查函数的类型
      - strictNullChecks
        
        严格的空值检查
      - strictPropertyInitialization
        
        严格检查属性是否初始化
    - 额外检查
      - noFallthroughCasesInSwitch
        
        检查switch语句包含正确的break
      - noImplicitReturns
        
        检查函数没有隐式的返回值
      - noUnusedLocals
        
        检查未使用的局部变量
      - noUnusedParameters
        
        检查未使用的参数
    - 高级
      - allowUnreachableCode
        
        检查不可达代码
        
        可选值：
        
        true，忽略不可达代码
        
        false，不可达代码将引起错误
      - noEmitOnError
        
        有错误的情况下不进行编译【当有错误时不生成编译后的文件】
        
        默认值：false

06. babel可以帮助我们解决兼容性的问题

@babel/preset-env——给我们预先设置了不同的环境，安装之后使我们的代码可以兼容到不同的环境

babal-loader——把babel和webpack进行结合

core-js ——js运行环境或者说模拟js运行环境，【让老版本的浏览器用到新版本的技术】因为这个里面2内容比较多所以在babel里面有一个配置可以让我们按需进行选择

npm i -D @babel/core @babel/preset-env babel-loader core-js

安装完成之后修改配置文件，webpack.config.js

// 指定webpack打包时要使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            // 用ts-loader 处理以ts结尾的文件
            {
                // test 指定的是规则生效的文件
                test: /\.ts$/,    // 表示去【匹配所有以ts结尾的文件
                // t要使用的loader
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader: "babel-loader",
                        // 设置babel
                        options: {
                            // 设置预定义的环境
                            presets: [
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        targets: {
                                            "chrome": "88"   // 这里可以根据自己的需要进行选择

                                        },
                                        // 指定corejs的版本
                                        "corejs": "3",
                                        // 使用corejs的方式  "usage" : 按需进行加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader',

                ],
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },

IE浏览器不支持箭头函数babel可以把箭头函数转换为普通函数

是webpack执行打包的时候自动生成的，没有经过babel,所以会出问题，

 // 入口文件指定完成之后对文件进行打包，把文件输出到指定的位置  【指定打包文件所在的目录】
    output: {
        // 指定打包文件的目录     __dirname,是一个成员，用来动态获取当前文件模块所属的绝对路径
        //  所以说path:path.resolve(__dirname,"dist")就是在打包之后的文件夹上拼接了一个文件夹，在打包时，直接生成。
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的文件名
        filename: "bundle.js",
        // 告诉webpack不使用箭头函数   重要：添加这个就可以把箭头函数转换为function 函数，就可以了
        environment: {
            arrowFunction: false
        }
    },

我们新加了一个加载器，所以我们直接在module里面进行修改就可以了

07. 面向对象简介

简而言之，面向对象就是程序之中所有的操作都需要通过对象来完成。【一个事物到了程序里，就以对象的形式存在】举例来说，

操作浏览器要使用windows对象；
操作网页要使用document对象；
操作控制台要使用console对象。

一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。

在程序中所有的对象都被分成了两个部分，即数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性，而功能就被称为方法。所以简而言之，在程序中一切皆是对象。

08. 类的简介（class）

类就是对象的模型，可以通过类创建对象

要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。 要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象。举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。

定义类：

class 类名{
	属性名: 类型;
    constructor(参数：类型){
    this.属性名=参数;
    }
    方法名(){
     ...
    }
}

类包含属性和方法。【对象中包含了两个部分：属性方法】属性属性包括实例属性和类属性(静态属性)。实例属性需要通过类创建的对象的实例来访问，而类属性通过在实例属性前添加关键字static来定义，可以通过类名来直接访问。

示例：

class Person{
    // 定义实例属性，需要通过对象的实例去访问。
	name: string = '';
    age: number = 0;

    // 在属性前使用static关键字可以定义类属性(即静态属性)，类属性(静态属性)不需要创建对象就能访问，即可以通过类来直接访问。
    static score: number = 100;
}

// 通过对象的实例去访问实例属性
const xiaoming = new Person();
xiaoming.name = '小明';
xiaoming.age = 18;
console.log(xiaoming.age);

// 通过类来直接访问类属性
console.log(Person.score);

在属性前加readonly关键字，可以将属性设置为只读属性，后续不可修改。

方法

class 类名 {
	方法名(){
		...
	}
}
class Person{
    // 定义实例属性，需要通过对象的实例去访问。
	name: string = '';
    age: number = 0;

    // 在属性前使用static关键字可以定义类属性(即静态属性)，类属性(静态属性)不需要创建对象就能访问，即可以通过类来直接访问。
    static score: number = 100;

    // 定义实例方法
    sayHello(){
        console.log("hello!");
    }

    // 如果方法以static开头，则该方法是类方法，即静态方法，不需要创建对象就能访问，即可以通过类来直接访问。。
    static sayNo(){
        console.log("No!")
    }
}

// 通过对象的实例去访问实例属性
const xiaoming = new Person();
xiaoming.name = '小明';
xiaoming.age = 18;
console.log(xiaoming.age);

// 通过类来直接访问类属性
console.log(Person.score);

// 通过对象的实例去访问实例方法
xiaoming.sayHello();

// 通过类来直接访问类方法
Person.sayNo();

9 构造函数和this

构造函数

class 类名{
	constructor() {
		...
	}
}

构造函数在对象创建时调用

调用new 类名()就相当于调用该类中的构造函数，即调用new Dog()就相当于调用Dog类中的构造函数

在构造函数中，当前对象就是当前新建的那个对象，例如dog1 = new Dog()，当前对象就是指dog1。

class Dog{
    name: string;
    age: number;

    // 构造函数 constructor
    // 构造函数在对象创建时调用
    constructor(){
        console.log("构造函数执行了~")
        // 在实例方法中，this就表示当前的实例
        // 在构造函数中，当前对象就是当前新建的那个对象
        console.log(this);
    }

    bark(){
        console.log('汪汪汪！');
    }
}

const dog1 = new Dog();  // 调用new Dog()就相当于调用Dog类中的构造函数
const dog2 = new Dog();

在构造函数中，可以通过this向新建的对象中添加属性。

为了使新建的对象拥有个性化的属性，可以通过构造函数来传递参数，赋值给新建对象的属性：

class Dog{
	name: string;
    age: number;
    // 构造函数 constructor
    // 构造函数在对象创建时调用
    constructor(name: string, age: number){
        // 在构造函数中，可以通过this向新建的对象中添加属性
        this.name = name;
        this.age = age;
    }
}

const dog1 = new Dog("小黑", 2);  
// 调用new Dog()就相当于调用Dog类中的构造函数
const dog2 = new Dog("小白", 3);

this 就表示当前对象

10 继承简介

通过继承，可以将多个类中共有的代码写在一个父类中，这样只需要写一次即可让所有的子类都同时拥有父类中的属性和方法。

class Dog{
    name: string;
    age: number;

    // 构造函数 constructor
    // 构造函数在对象创建时调用
    constructor(name: string, age: number){
        // 在构造函数中，可以通过this向新建的对象中添加属性
        this.name = name;
        this.age = age;
    }

    bark(){
        console.log('汪汪汪！');
    }
}

class Cat{
    name: string;
    age: number;

    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }

    bark(){
        console.log('喵喵喵！');
    }
}

可以发现，Dog和Cat两类中的内容几乎完全相同，显得代码非常冗余可以新建一个Animal类

class Animal{
    name: string;
    age: number;

    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }

    bark(){
        console.log('动物在叫');
    }
}

定义一个表示狗的类，使Dog类继承Animal类

class Dog extends Animal{

}

此时，Animal被称为父类，Dog类被称为子类。使用继承后，子类将会拥有父类所有的方法和属性。

class Animal{
    name: string;
    age: number;

    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }

    bark(){
        console.log('动物在叫');
    }
}

// 定义一个表示狗的类，使Dog类继承Animal类
// 此时，Animal被称为父类，Dog类被称为子类
// 使用继承后，子类将会拥有父类所有的方法和属性
class Dog extends Animal{

}

// 定义一个表示猫的类，使Cat类继承Animal类
class Cat extends Animal{

}

const dog1 = new Dog("小黑", 5);
const cat1 = new Cat("咪咪", 3);

console.log(dog1);
dog1.bark();
console.log(cat1);
cat1.bark();

这样的话，是不是Dog和Cat就没有区别了？不是的如果希望在子类中添加一些父类中没有的属性和方法，直接添加就好：

class Animal{
    name: string;
    age: number;

    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }

    bark(){
        console.log('动物在叫');
    }
}

// 定义一个表示狗的类，使Dog类继承Animal类
// 此时，Animal被称为父类，Dog类被称为子类
// 使用继承后，子类将会拥有父类所有的方法和属性
class Dog extends Animal{
    run(){
    console.log(this.name + "在跑~");
    }
}

// 定义一个表示猫的类，使Cat类继承Animal类
class Cat extends Animal{

}

const dog1 = new Dog("小黑", 5);
const cat1 = new Cat("咪咪", 3);

console.log(dog1);
dog1.bark();
dog1.run();  // 在子类Dog中添加的方法，只有Dog类的对象才有
console.log(cat1);
cat1.bark();

方法重写：如果在子类中添加了和父类相同(重名)的方法，则在该子类中，子类方法会覆盖掉父类方法，父类中本来的方法不会改变。

class Dog extends Animal{
    run(){
    console.log(this.name + "在跑~");
    }
    bark(){
        console.log(this.name + "在叫~");
    }
}

const dog1 = new Dog("小黑", 5);
dog1.bark();
dog1.run();

11 super关键字

super表示父类。

class Animal{
    name: string;
    age: number;

    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }

    bark(){
        console.log('动物在叫');
    }
}

class Dog extends Animal{
    bark(){
        // 在类的方法中，super就表示当前类的父类
        super.bark();
        console.log(this.name + "在叫~");
    }
}

const dog1 = new Dog("小黑", 5);

console.log(dog1);
dog1.bark();

super的常用之处： 如果在子类中写了构造函数，在子类的构造函数中必须对父类的构造函数进行调用，否则就会报错。原因是在子类中重写构造函数时，父类的构造函数会被覆盖，不会执行。为了保证父类的构造函数正确执行以对父类属性初始化，就需要在子类的构造函数中调用父类的构造函数。

class 子类名 extends 父类名{
	子类新加属性名: 类型;
	
	constructor(父类构造函数参数, 子类需传的参数){
		super(父类构造函数参数);
		this.子类新加属性名 = 子类需传的参数;
	}
}
class Animal{
    name: string;
    age: number;

    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }

    bark(){
        console.log('动物在叫');
    }
}

class Dog extends Animal{
    color: string;

    constructor(name: string, age: number, color: string){
        // 在子类的构造函数中必须对父类的构造函数进行调用
        super(name, age);
        this.color = color;
    }


    bark(){
        // 在类的方法中，super就表示当前类的父类
        super.bark();
        console.log(this.name + "在叫~");
    }
}

const dog1 = new Dog("小黑", 5, "黑色");

console.log(dog1);
dog1.bark();
// 运行结果
/*
Dog { name: '小黑', age: 5, color: '黑色' }
动物在叫
小黑在叫~
*/

12 抽象类

在实际中，我们不希望父类被用来创建对象，这时需要在声明父类时在前面加上 abstract 关键字，使其成为一个抽象类。抽象类和其他类区别不大，只是不能用来创建对象，只能被继承。抽象类就是专门用来被继承的类。

抽象类中可以声明抽象方法。抽象方法在声明时使用 abstract 开头，没有方法体，只能定义在抽象类中，该抽象类的子类必须对抽象方法进行重写，否则就会报错。

abstract class Animal{
    name: string;
    age: number;

    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }

    // 定义一个抽象方法
    abstract bark(): void;
}

class Dog extends Animal{

    bark(){
        // 在子类中，必须对抽象方法进行重写
        console.log(this.name + "在叫~");
    }
}

const dog1 = new Dog("小黑", 5);
console.log(dog1);
dog1.bark();

13 接口

接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法，同时接口也可以当成类型声明去使用。

// 接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法
// 同时接口也可以当成类型声明去使用
interface myInterface{
    name: string;
    age: number;
}

const obj: myInterface = {
    name: '小明',
    age: 18,
};

接口可以重复声明，相当于对该接口的补充声明

// 接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法
// 同时接口也可以当成类型声明去使用
interface myInterface{
    name: string;
    age: number;
}


// 接口可以重复声明，相当于对该接口的补充声明
interface myInterface{
    gender: string;
}

const obj: myInterface = {
    name: '小明',
    age: 18,
    gender: '男'
};

接口可以在定义类的时候去限制类的结构。

接口和抽象类的不同点： 接口中的所有属性都不能有实际的值，接口只定义对象的结构，而不考虑实际值，在接口中，所有的方法都是抽象方法；而抽象类中可以有抽象方法(不允许有方法体)，也可以有实质的方法和可赋值的属性。

定义类时，可以使类去实现一个接口，实现接口就是使类满足接口的要求。

interface myInterface1 {
    name: string;
    age: number;
    sayHello(): void;  // 接口中的方法不允许有方法体，只能声明
}


class myClass implements myInterface1{
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    sayHello(): void {
        console.log('hello!');
    }
}

接口其实就是定义了一个规范，对类作出限制。

定义类时，可以使类去实现一个接口，实现接口就是使类满足接口的要求

14 属性的封装

class Person{
    name: string;
    age: number;

    constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }
}

const per1 = new Person('孙悟空', 18);

现在属性是在对象中设置的，可以随意进行修改

per1.name = '猪八戒';
per1.age = 20;
console.log(per1);

// Person { name: '猪八戒', age: 20 }

属性可以任意被修改会导致对象中的数据变得非常不安全。

如果我们不想让对象的属性被任意修改，可以在属性前添加属性的修饰符

public 修饰的属性可以在任意位置访问(修改)默认值

protected 受保护的属性，只能在当前类和和当前类的子类中访问(修改)

class A {
    protected num: number;
    constructor(num: number) {
        this.num = num;
    }
}

class B extends A {
    test() {
        console.log(this.num);  
    }
}

const b1 = new B(12);
b1.test(); // 12

private 私有属性，只能在当前类内部(不包含子类)进行访问(修改)

通过在类中添加get方法，使得私有属性可以被外部访问：

class Person{
    // 将属性设置为私有属性
    private _name: string;
    private _age: number;

    constructor(name: string, age: number){
        this._name = name;
        this._age = age;
    }

    // 在内部添加方法，使得外部可以获取到私有属性_name
    getName(){
        return this._name;
    }
}

const per1 = new Person('孙悟空', 18);


console.log(per1.getName()); // 孙悟空

通过在类中添加set方法，使得私有属性可以被外部修改：

class Person{
    // 将属性设置为私有属性
    private _name: string;
    private _age: number;

    constructor(name: string, age: number){
        this._name = name;
        this._age = age;
    }

    // 在内部添加方法，使得外部可以获取到私有属性_name
    getName(){
        return this._name;
    }

    // 添加setter方法，用来设置私有属性的值
    setName(value: string){
        this._name = value;
    }
}

const per1 = new Person('孙悟空', 18);


// 直接赋值 per1._name = '猪八戒' 会报错，因为_name是私有属性
per1.setName('猪八戒');


console.log(per1.getName()); // 猪八戒

有了setter和getter方法，属性的访问修改控制权就掌握在了自己手中。为了避免非法数据，可以在set方法中添加判断语句，数据合法才会被赋值：

class Person{
    // 将属性设置为私有属性
    private _name: string;
    private _age: number;

    constructor(name: string, age: number){
        this._name = name;
        this._age = age;
    }

    // 在内部添加方法，使得外部可以获取到私有属性_name
    getName(){
        return this._name;
    }

    // 添加set方法，用来设置私有属性的值
    setName(value: string){
        this._name = value;
    }

    getAge(){
        return this._age;
    }

    setAge(value: number){
        // 判断value大于等于0，才会被赋值
        if(value >= 0) {
            this._age = value;
        }
    }
}

const per1 = new Person('孙悟空', 18);	

// 直接赋值 per1._name = '猪八戒' 会报错，因为_name是私有属性
per1.setName('猪八戒');
	
console.log(per1.getName());

getter方法用来读取属性； setter方法用来设置属性；它们被称为属性的存取器。

上述getter方法和setter方法虽然能够保证数据安全，但是有点过于繁琐。在TS中，提供了一种更为方便的属性存取方式：

get 私有属性名() {
	...
}

在类中添加get 属性名()方法，可以使属性外部更加方便地被访问外部通过【对象.属性名】访问属性时，就会自动调用该方法:

class Person{
    // 将属性设置为私有属性
    private _name: string;
    private _age: number;

    constructor(name: string, age: number){
        this._name = name;
        this._age = age;
    }

    // 在类中添加get 属性名()方法，可以使属性外部更加方便地被访问
    // 外部通过【对象.属性名】访问属性时，就会自动调用该方法
    get name() {
        console.log('get name()执行了！');
        return this._name;
    }
}

const per1 = new Person('孙悟空', 18);

console.log(per1.name); 
/* 运行结果
get name()执行了！
孙悟空
*/

通过这样的设置，我们在外部访问私有属性时无需再通过per1.getName()的方式，而是和普通公开属性的访问方法相同，只需per1.name这样即可。

同理，属性修改也可以使用上述方式，即在类中添加

set 私有属性名(参数: 参数类型) {
	...
}

在外部修改私有属性时，和普通公开属性的修改方法相同，通过对象.属性 = 值的方法来修改即可。

class Person{
    // 将属性设置为私有属性
    private _name: string;
    private _age: number;

    constructor(name: string, age: number){
        this._name = name;
        this._age = age;
    }

    // 在类中添加get 属性名()方法，可以使属性外部更加方便地被访问
    // 外部通过【对象.属性名】访问属性时，就会自动调用该方法
    get name() {
        console.log('get name()执行了！');
        return this._name;
    }

    // 外部通过【对象.属性名】修改属性值时，就会自动调用该方法
    set name(value: string) {
        console.log('set name()执行了！');
        this._name = value;
    }
}

const per1 = new Person('孙悟空', 18);

console.log(per1.name);

per1.name = '猪八戒';
/* 运行结果
get name()执行了！
孙悟空
set name()执行了！
*/

属性声明更为方便的写法： 可以直接将属性定义在构造函数中

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

这段代码就等价于

class Person{
    // 将属性设置为私有属性
    private _name: string;
    private _age: number;

    constructor(name: string, age: number){
        this._name = name;
        this._age = age;
    }
}

在使用时：

const per2 = new Person1('小红', 10);

15 泛型【不确定的类型】

在定义函数或类时，如果遇到类型不明确，就可以使用泛型。

指定一个泛型，语法：

// 类型明确时，函数的定义语法
function fn1(a: number): number {
    return a;
}

// 类型不明确时，   eg:<T>  括号里面描述泛型一般用大写
function fn2<T>(a: T): T {
    return a;
}

其中，T可以换成任意字符

类型不明确时也可以使用any，不会报错，但是使用any会默认把编译器的类型检查关闭，不安全。此外，也无法体现上式代码中参数类型和返回值类型相同的特点。

泛型使用了TS中的类型自动推断。

// 不指定泛型，TS可以自动对类型进行推断
fn(12)

如果有时候类型复杂、推断不出来，也可以手动指定：

// 指定泛型
fn<string>('hello');

指定多个泛型：

// 指定多个泛型
function fn2<T, K>(a: T, b: K): T {
    console.log(b);
    return a;
}

console.log(fn2(1, 'b'));　
/*
b
1
*/

对泛型所属的类型作出限制：

// T extends Inter表示泛型T必须是Inter的一个实现类(或子类)
interface Inter{
    mylength: number;
}

// T extends Inter表示泛型T必须是Inter的一个实现类(或子类)
function fn3<T extends Inter>(a: T): number {
    return a.mylength;
}

fn3({mylength: 123});

泛型在声明类时也可以使用：

  // 泛型在声明类时也可以使用
class myClass<T> {
      name: T;

      constructor(name: T) {
        this.name = name;
      }
  }
  
const mc = new myClass<string>('孙悟空');
  console.log(mc);
// myClass { name: '孙悟空' }