### 插件 ``` 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)