乐趣区

关于typescript:typescriptVue-CLI4创建vue项目

jiezi

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

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

以后操作环境

$ node --version
v12.22.1
$ npm --version
6.14.12
$ yarn --version
1.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.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

shims-tsx.d.ts

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

# shims-tsx.d.ts

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;
    }
  }
}

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

退出移动版