vite 默认就支持 TS， 不过react需要加一些配置。

创建 tsconfig.json 如果有 jsconfig.json的话， 就把jsconfig改名为tsconfig

添加ts配置，最终如下参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "allowJs": true,
    "isolatedModules": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "common/*": ["src/common/*"],
      "config/*": ["src/config/*"],
      "store/*": ["src/store/*"]
    },
    "outDir": "dist"
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src/**/*"]
}

添加 react 的global 类型补充

1
2
3
4
5
6
7
8
9
10
11
12
declare module '*.scss' {
  interface IClassNames {
    [className: string]: string
  }
  const classNames: IClassNames
  export = classNames
}
 
declare module '*.png' {
  const src: string
  export default src
}

（可选）使用 @vitejs/plugin-react vite 插件，移除掉 jsxInject: import React from 'react'，这样可以避免重复引入 React 导致的报错