原有vue项目支持typescript
-
安装依赖
npm i vue-class-component vue-property-decorator --save
npm i ts-loader typescript tslint tslint-loader tslint-config-standard -D
初始化tsconfig
npx tsc --init
会自动生成 tsconfig.json (把"allowJs": true, 这个打开)允许文件中存在js,要不需要改太多东西
新增这些配置:
和compilerOptions 同级
"include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], // ts 排除的文件 "exclude": ["node_modules"]
vue.config.js
configureWebpack: { resolve: { extensions: [".ts", ".tsx", ".js", ".json"] }, module: { rules: [ { test: /\.ts$/, exclude: /node_modules/, enforce: 'pre', loader: 'tslint-loader' }, { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } } ] } },
新建ts解析.vue 在src目录下添加俩文件
shims-tsx.d.ts
// shims-tsx.d.ts src目录下 import Vue, { VNode } from 'vue'; declare global { namespace JSX { // tslint:disable no-empty-interface interface Element extends VNode {} // tslint:disable no-empty-interface interface ElementClass extends Vue {} interface IntrinsicElements { [elem: string]: any; } } }
shims-vue.d.ts
// shims-vue.d.ts src目录下 declare module '*.vue' { import Vue from 'vue'; export default Vue; } //为了typescript做的适配定义文件,因为.vue文件不是一个常规的文件类型, //TypeScript是不能理解vue文件是干嘛的,加这一段是是告诉 TypeScript,vue文件是这种类型的。 //没有这个文件,会发现 import 导入的所有.vue类型的文件都会报错。 //axios报错 declare module 'axios' { interface AxiosInstance { (config: AxiosRequestConfig): Promise<any> } }
添加tslint.json
{ "extends": "tslint-config-standard", "globals": { "require": true } }
main.js改成main.ts 配置vue.config.js的入口为 main.ts
pages: { index: { entry: 'src/main.ts', } },
安装 @typescript-eslint/parser 将eslint校验改成 @typescript-eslint/parser
npm install @typescript-eslint/parser --save
更改.eslintrc.js
parserOptions: { parser: '@typescript-eslint/parser' },
-