TypeScript

两种编译方式

第一种babel

依赖

需要安装 @babel/preset-typescript @babel/preset-env @babel/core babel-loader core-js@3 typescript

项目配置

webpack

module:{
    rules:[
       {
        test: /\.ts$/,
        use: ['babel-loader']
     }
  ]
}

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3
    }],
    ['@babel/preset-typescript']
  ]
}

.browserslistrc

> 1% 
last 2 version
not dead

缺点

无法静态检测

优点

能够提供更好的js语法兼容

第二种ts-loader

依赖

需要安装 ts-loader

项目配置

webpack

module:{
    rules:[
      {
        test: /\.ts$/,
        use: ['ts-loader']
      }
  ]
}

缺点

无法提供良好的js语法兼容

优点

能够提供静态语法检测