集成ts到webpack中

使用ts-loader

配置babel-loader

ts编辑器只能转换语法，没办法转换新增的语法，所以需要babel来做js的兼容性处理

{test: /\.(js|jsx|ts|tsx)$/i,use:["cache-loader",{loader: "babel-loader",options: {"presets": [["@babel/preset-env", {"targets": {"chrome":"88"},"corejs":"3",// 按需加载"useBuiltIns": "usage"}],"@babel/preset-react"],"plugins": ["@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-runtime"]}},"ts-loader"],// use: 'Happypack/loader?id=js',exclude: [path.resolve("node_modules")],
}

兼容ie浏览器

默认配置下面的targets就可以兼容ie 但是有个箭头函数报错

{loader: "babel-loader",options: {"presets": [["@babel/preset-env", {"targets": {"chrome":"58","ie":"10" },"corejs":"3",// 按需加载"useBuiltIns": "usage"}],"@babel/preset-react"],"plugins": ["@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-runtime"]}
}

配置下面的解决箭头函数报错问题

    output: {path: path.resolve(__dirname, '../dist'),filename: "js/[name].js",publicPath: publicPath,// 告诉webpack 不适用箭头environment: {arrowFunction: true}},

extends 进行类的继承

通过继承可以将多个类中共有的代码写在一个父类中，这样只需要写一次就可让所有的子类都同时拥有父类的属性和方法
名字相同的函数会发生重写

构造函数必须调用super() 表示调用父类的构造函数

super关键字

在类方法中 super 就表示当前类的父类
super.父类方法