在vue我的项目中应用ts，有两种形式：

1.全新我的项目：应用vue cli4脚手架创立vue我的项目时，选中typescript，会主动配置好ts相干环境。开箱即用。
2.已有我的项目：应用vue cli4增加vue官网配置的ts相干插件。
vue add typescript

以后操作环境

$ node --versionv12.22.1$ npm --version6.14.12$ yarn --version1.22.5$ vue --version@vue/cli 4.5.13

vue cli4主动实现了那些ts配置

这里咱们次要看一下vue cli4脚手架主动配置了那些ts配置

1.装置依赖

dependencies 依赖

"vue-class-component": "^7.2.3",//提供应用Class 语法写Vue组件"vue-property-decorator": "^9.1.2"//在Class语法根底上提供一些辅助装璜器。加强的class 形容组件的工具

devDependencies 依赖

"@typescript-eslint/eslint-plugin": "^4.18.0",//应用ESlint 校验 Typescript 代码。其实ts有本人的校验工具，tslint，然而不好用，所以大多是应用eslint+该工具来校验"@typescript-eslint/parser": "^4.18.0",//将ts转为 AST 供Eslint 校验应用。是@typescript-eslint/eslint-plugin中外部应用的插件"@vue/cli-plugin-typescript": "~4.5.0",//是vue-cli的一个插件，将ts相干的工具集成起来，将ts+ts-loader+fork-ts-checker-webpack-plugin 集成，进行更快的类型查看，是一个对立的集成调度者。"@vue/eslint-config-typescript": "^7.0.0",//为eslint 提供对于ts的校验规定"typescript": "~4.1.5"//typescript编译器，提供类型校验和转换js性能

2. 生成ts配置文件tsconfig.json

默认曾经配置了许多能够开箱即用的性能

{  "compilerOptions": {    "target": "esnext",    "module": "esnext",    "strict": true,    "jsx": "preserve",    "importHelpers": true,    "moduleResolution": "node",    "experimentalDecorators": true,    "skipLibCheck": true,    "esModuleInterop": true,    "allowSyntheticDefaultImports": true,    "sourceMap": true,    "baseUrl": ".",    "types": [      "webpack-env",      "jest"    ],    "paths": {      "@/*": [        "src/*"      ]    },    "lib": [      "esnext",      "dom",      "dom.iterable",      "scripthost"    ]  },  "include": [    "src/**/*.ts",    "src/**/*.tsx",    "src/**/*.vue",    "tests/**/*.ts",    "tests/**/*.tsx"  ],  "exclude": [    "node_modules"  ]}

3. src下新增两个文件

shims-vue.d.ts

ts是没方法辨认 以.vue 结尾的模块的（eg：import xx from xx.vue， 该语句ts辨认不了），通过该文件做适配解决，使我的项目中加载.vue 模块的文件时不报错。个别不批改。该文件意思是：申明所有以 .vue结尾的文件模块，其类型都是vue构造函数。

# shims-vue.d.tsdeclare module "*.vue" {  import Vue from "vue";  export default Vue;}

shims-tsx.d.ts

如果要在我的项目中应用tsx 或者jsx 刻画组件模块的话，补充了一些类型申明。如果没有这些类型申明，在jsx中应用这些成员的时候，会找不到。如果我的项目中没有应用jsx，能够将该文件疏忽掉

# shims-tsx.d.tsimport 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;    }  }}

4. 都是用.ts 后缀 代替原来的.js 后缀