TypeScript

🌸 您好，欢迎您的阅读，等君久矣，愿与君畅谈.
🔭 § 始于颜值 § 陷于才华 § 忠于人品 §
📫 希望我们可以进一步交流，共同学习，共同探索未知的技术世界 稀土掘金 OR GitHub.

---

# 5. 使用 webpack 打包 ts 代码

1. webpack.config.js 文件配置 webpack

   // 引入路径管理的包
   const path = require('path');
   
   //webpack中所有的配置信息都写在module.exports中 
   module.exports = {
     // 指定入口文件路径
     entry:'./test.ts',
   
     // 指定打包文件所在目录
     output:{
       // 指定打包文件的目录
       path:path.resolve(__dirname,'dist'),
       // 打包后文件的名字
       filename:"bundle.js"
     },
     // 指定webpack打包时要使用的模块
     module:{
       // 指定要加载的规则
       rules:[
         {
           // 指定规则生效的文件，使用正则语法
           test:/\.ts$/,//ts文件生效
           // 要使用的loader
           use:'ts-loader',
           // 要排除的文件
           exclude:/node-modules/
         }
       ]
     }
   }

# 6. 面向对象

1. 在程序中把一切事物当作对象编写

# 7. 类的简介

1. 类的实现

   class Person {
     name:string = 'hello'
     age:number = 18
     readonly aa:number = 12
     // constructor(parameters) {
       
     // }
   }
   const person = new Person(); 
   console.log(person);
   person.aa = 18 //报错，只读属性，不能修改。

2. 属性分为两种

   1. 实例属性：直接定义的属性，需要通过对象的实例去访问。

      class Person{
        name:string = 'hello'
      }
      const person = new Person();
      person.name;

   2. 类属性 | 静态属性：使用 static 关键字修饰的属性，直接通过类去访问。

      class Person{
        static name:string = 'test'
      }
      Person.name;

   3. readonly : 只读属性，无法修改

3. 方法分为两种

   1. 实例方法：需要使用对象的实例去访问。
   2. 类方法 | 静态方法：直接使用类去访问。

4. constructor : 称为构造函数，构造函数会在创建对象时调用。

   class Per {
     name:string = '王二'
     age = 12
     constructor(name:string,age:number) {
       // 在实例方法中，this就表示当前的实例
       // 在构造函数中当前对象就是新建对象
       // 可以通过this向新建对象中添加属性
       this.name = name
       this.age = age
     }
     speak(){
       console.log("hahahha");
       // 在方法中可以使用this来表示当前调用方法的对象
       console.log(this.name);
     }
   }
   const per = new Per('张三',30);
   console.log(per);
   console.log(per.name);
   per.speak();

# 8. 继承

1. 简介

   class Animal {
     name:string
     age:number
     constructor(name:string,age:number) {
       this.name = name
       this.age = age
     }
     talk() {
       console.log("动物在说话!");
       
     }
   }
   //子类继承父类，Animal为父类，Dog为子类，子类将会拥有父类所有的属性和方法
   class Dog extends Animal{
     run(){
       console.log(`${this.name}在奔跑!`);
     }
     // 子类将会把父类中相同的方法覆盖掉，被称为重写
     talk(){
         console.log(`汪汪汪`);
     }
   }
   class Cat extends Animal{
     talk(){
       console.log(`喵喵喵`);
     }
   }
   const dog = new Dog('小狗',2);
   const cat = new Cat('小猫',4);
   dog.talk();
   cat.talk();
   dog.run();

2. super

   class Ani {
     name:string
     constructor(name:string){
       this.name = name
     }
     sayHello(){
       console.log(`动物在说话!000`);
     }
   }
   class Doff extends Ani {
     age:number;
     constructor(name:string,age:number){
       // 若子类中写构造函数，则把父类中构造函数覆盖（重写），在子类构造函数中必须对父类中构造函数进行调用
       super(name);//调用父类中构造函数
       this.age = age
     }
     sayHello(){
       // 在类的方法中super就表示当前类的父类
         super.sayHello();
     }
   }
   const doff = new Doff('旺财',3);
   console.log(doff);
   doff.sayHello();

3. 抽象类

   /* 
     以abstract开头的类是抽象类，
     抽象类不能用来创建对象，
     抽象类就是专门用来被继承的类。
    */
   abstract class Animala {
     name:string
     constructor(name:string) {
       this.name = name
     }
     /* 
       抽象方法使用abstract开头，没有方法体，
       抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
      */
     abstract sayHello():void
   }
   class Dogg extends Animala{
     age:number
     constructor(name:string,age:number) {
       super(name);
       this.age = age;
     }
     sayHello(){
         console.log(`${this.name}说话!`);
     }
   }
   const dogg = new Dogg('旺财1',2);
   dogg.sayHello();

# 9. 接口

1. 接口的使用

   // 类型声明(不能重复声明)，描述一个对象的类型
   type myType = {
     name:string,
     age:number
   };
   const obj:myType = {
     name:'test',
     age:12
   }
   // 接口用来定义一个类结构，定义类中应该包含哪些属性和方法
   // 同时接口也可以当成类型声明使用(可以重复声明)
   interface myInterface{
     name:string,
     age:number
   }
   const object:myInterface = {
     name:'demo',
     age:12
   }
   // 接口可以在定义类时限制类的结构，
   // 接口中所有的属性都不能有实际的值，
   // 接口只定义对象的结构，而不考虑实际值，在接口中所有的方法都是抽象方法
   interface myInter{
     name:string;
     age:number;
     sayHello():void;
   }
   // 定义类时可以使类去实现一个接口,实现接口就是使类满足接口的要求
   class MyClass implements myInter{
     name: string;
     age: number;
     constructor(name:string,age:number){
       this.name = name
       this.age = age
     }
     sayHello(): void {
         console.log(`hello !`);
     }
   }