在js项目中引入typescript

安装typescript依赖

npm install -D typescript

生成tsconfig.json文件

npx tsc --init

开放一些配置：

{
  "compilerOptions": {
     "target": "es2016",
     "module": "commonjs",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitAny": false,
     "skipLibCheck": true,
+    "allowJs": true,
+    "checkJs": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "rootDir": "./",
+    "outDir": "./types",
+    "jsx": "react"
   }
+  "include": ["src"]
}

React项目下载类型声明文件

npm install --save-dev @types/react @types/react-dom

配置webpack

1、安装依赖

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

2、配置 Babel： 在项目根目录下创建一个 .babelrc 或者在 package.json 中添加一个 babel 字段，配置 Babel 的预设和插件：

{
  "presets": [
    "@babel/preset-env", // 可选，根据目标环境进行代码转换
    "@babel/preset-react", // 必须，处理 React JSX 语法
    "@babel/preset-typescript" // 必须，处理 TypeScript 语法
  ]
}

3、配置webpack

// 可省略后缀
resolve: {
  extensions: ['.js', '.jsx', '.ts', '.tsx']
},
// 使用babel-loader处理ts文件
module: {
  rules: [
    {
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

写入index.d.ts文件

为了减少一些找不到模块的报错，在任意位置新建global.d.ts文件（1、位置需要在tsconfig.json中的include中被包含 2、不能与设置的outDir字段目录相同），内容如下，可自行添加：

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'
declare module '*.scss'
declare module '*.css'
declare module '*.sass'

declare namespace common {
  function setLanguage(lang: string): void
  function getLanguage(): string
  function isApp(): boolean | undefined
  function isIos(): boolean
  function getVersion(): number
}

declare function request(initOptions: Object, interceptors?: any): {
  request: () => void
  get: () => void
  post: () => void
}