### 插件 ``` npm i ts-loader typescript -D ``` ### 添加`ts-loader`规则 ```js { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } } ``` ### 新建`vue-shims.d.ts`识别单文件vue内的ts代码 ``` // 【注】必须在tsconfig.json中配置typeRoots来读取该配置文件， // 否则vue文件模块无法读取 declare module "*.vue" { import Vue from "vue" export default Vue } ``` ### 项目根目录新建`tsconfig.json` ```js { "include": ["src/*", "src/**/*"], "exclude": ["node_modules"], "compilerOptions": { "strictPropertyInitialization": false, // types option has been previously configured "types": [ // add node as an option "node" ], // typeRoots option has been previously configured "typeRoots": [ // add path to @types "node_modules/@types", "./src/typings" ], // 以严格模式解析 "strict": true, // 在.tsx文件里支持JSX "jsx": "preserve", // 使用的JSX工厂函数 "jsxFactory": "h", // 允许从没有设置默认导出的模块中默认导入 "allowSyntheticDefaultImports": true, // 启用装饰器 "experimentalDecorators": true, "strictFunctionTypes": false, // 允许编译javascript文件 "allowJs": true, // 采用的模块系统 "module": "esnext", // 编译输出目标 ES 版本 "target": "es5", // 如何处理模块 "moduleResolution": "node", // 在表达式和声明上有隐含的any类型时报错 "noImplicitAny": true, "lib": ["dom", "es5", "es6", "es7", "es2015.promise"], "sourceMap": true, "pretty": true } } ``` ### 参考 1. [https://blog.csdn.net/u014633852/article/details/73706459](https://blog.csdn.net/u014633852/article/details/73706459) 2. [https://segmentfault.com/a/1190000011744210?utm_source=tuicool&utm_medium=referral](https://segmentfault.com/a/1190000011744210?utm_source=tuicool&utm_medium=referral)