TypeScript 笔记

报错处理

1. tsconfig.json "Cannot write file ... because it would overwrite input file. 处理方式：在 compilerOptions 选项中增加 outDir: "./dist" 属性

安装

安装 TypeScript 编译器和 loader

npm install --save-dev typescript ts-loader

配置 tsconfig.json

支持 JSX，并将 TypeScript 编译到 ES5

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true, //可选
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

配置 webpack.config.js

以下配置将会指定 ./src/index.ts 为入口文件，并通过 ts-loader 加载所有 .ts 和 .tsx 文件，并在当前目录 输出 一个 bundle.js 文件

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  devtool: "inline-source-map", //可选
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

安装第三方库的类型提示

以 lodash 为例

npm install --save-dev @types/lodash