持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

TS中的面向对象内容和JS以及Java很相似，这里做一个简单介绍，方便有一定基础的同学很快的上手了解

1. 类

• 正常定义的属性为对象属性，需要先实例化对象之后才能使用
• static 修饰的属性是类属性
• readonly 只读属性，不能修改
• method() {} 方法
• constructor() {} 构造方法，使用new关键字调用
• extends 继承父类，super关键字可以调用父类的东西
• abstract 抽象类

class demo extends father{
    var: num = val // 实例属性
    static var2: num = val2 // 类属性
    
    sayHi() {} // 方法
    
    constructor() {
        this.var = val3;
    } // 构造方法
}

2. 接口

• TS中的interface可以重名，两者会叠加在一起，其他与Java类似
• 实现接口使用implements关键词
• 接口中只能有抽象方法
• 如下面所示的两个同名接口，一个实现类要实现这个接口时，两个方法都要实现。

interface demo{
    name: string;
    method() {};
}
interface demo{
    method2() {};  
}

3. 属性的封装

• private 与Java中的定义类似，同样可以配套get()与set()方法

4. 泛型

在定义函数或者类时使用，起到动态规范类型的作用

• function fun(a )
  • 可以在调用时指定T的类型（推荐）
  • 也可以直接进行类型推断
• 泛型也可以指定多个 function fun<k, t>
• 泛型T一定要是Inter的实现类

5.webpack打包流程

• 首先，应该调用npm init -y生成package.json文件
• 之后，运行npm i -D webpack webpack-cli typescript ts-loader 安装依赖
• 编写配置文件webpack.config.js

  // 引入一个包
  const path = require("path");
  
  // webpack中的所有配置信息都应该写在module.exports中
  module.exports = {
      // 指定入口文件
       entry: index.ts;
       
      // 指定打包文件放在哪个目录
      output: {
          path: path.resolve(__dirname, "dist"); 
          filename: "xxx"        
      }
      // 打包文件使用的模块
      module: {
          rules: {
              // 生效的文件
              test:
              // 生效的方法
              use: "ts-loader"
              // 已出的文件
              exclude: 
          }
      }
  
  }