vue+TypeScript须要注意的点

时间 2019-12-08

标签 vue+typescript vue typescript 须要注意繁體版

原文原文链接

一.引入TypeScript

// ts-loader typescript 必须安装，其余的相信你之后也会装上的
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
复制代码

ts-loader：TypeScript 为 Webpack 提供了 ts-loader，其实就是为了让webpack识别 .ts .tsx文件
tslint-loader跟tslint：我想你也会在.ts .tsx文件约束代码格式（做用等同于eslint）
tslint-config-standard：tslint 配置 standard风格的约束

二.修改webpack配置文件（webpack.base.conf.js）

1.入口文件修改成main.ts

entry: {
    app: './src/main.ts'
}
复制代码

2.扩展名resolve.extensions新增.ts后缀

extensions: ['.js', '.vue', '.json', '.ts']
复制代码

3.添加解析ts文件的规则

{
      test: /\.ts$/,
      exclude: /node_modules/,
      enforce: 'pre',
      loader: 'tslint-loader',
},
{
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
         appendTsSuffixTo: [/\.vue$/]
      }
}
复制代码

三：添加 tsconfig.json

ts-loader 会检索当前目录下的 tsconfig.json 文件，根据里面定义的规则来解析.ts文件（就跟.babelrc的做用同样）javascript

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "isolatedModules": true,
    "lib": [
      "dom",
      "es5",
      "es6",
      "es7",
      "es2015.promise",
      "scripthost"
    ],
    "sourceMap": true,
    "pretty": true,
    "strictFunctionTypes": false,
    "importHelpers": true
  }
}	
复制代码

四：添加 tslint.json

{
    "extends": "tslint-config-standard",
    "globals": {
      "require": true
    },
    "rules": {
      "arrow-return-shorthand": true,
      "callable-types": true,
      "class-name": true,
      "comment-format": [
        true,
        "check-space"
      ],
      "curly": true,
      "deprecation": {
        "severity": "warn"
      },
      "eofline": true,
      "forin": true,
      "import-blacklist": [
        true,
        "rxjs",
        "rxjs/Rx"
      ],
      "import-spacing": true,
      "indent": [
        true,
        "spaces"
      ],
      "interface-over-type-literal": true,
      "label-position": true,
      "max-line-length": [
        true,
        140
      ],
      "member-access": false,
      "member-ordering": [
        true,
        {
          "order": [
            "static-field",
            "instance-field",
            "static-method",
            "instance-method"
          ]
        }
      ],
      "no-arg": true,
      "no-bitwise": true,
      "no-console": [
        true,
        "debug",
        "info",
        "time",
        "timeEnd",
        "trace"
      ],
      "no-construct": true,
      "no-debugger": true,
      "no-duplicate-super": true,
      "no-empty": false,
      "no-empty-interface": true,
      "no-eval": true,
      "no-inferrable-types": [
        true,
        "ignore-params"
      ],
      "no-misused-new": true,
      "no-non-null-assertion": true,
      "no-shadowed-variable": true,
      "no-string-literal": false,
      "no-string-throw": true,
      "no-switch-case-fall-through": true,
      "no-trailing-whitespace": true,
      "no-unnecessary-initializer": true,
      "no-unused-expression": true,
      "no-use-before-declare": true,
      "no-var-keyword": true,
      "object-literal-sort-keys": false,
      "space-before-function-paren": ["error", "never"],
      "ter-indent": 4,
      "one-line": [
        true,
        "check-open-brace",
        "check-catch",
        "check-else",
        "check-whitespace"
      ],
      "prefer-const": true,
      "quotemark": [
        true,
        "single"
      ],
      "radix": true,
      "semicolon": [
        true,
        "always"
      ],
      "triple-equals": [
        true,
        "allow-null-check"
      ],
      "typedef-whitespace": [
        true,
        {
          "call-signature": "nospace",
          "index-signature": "nospace",
          "parameter": "nospace",
          "property-declaration": "nospace",
          "variable-declaration": "nospace"
        }
      ],
      "typeof-compare": true,
      "unified-signatures": true,
      "variable-name": false,
      "whitespace": [
        true,
        "check-branch",
        "check-decl",
        "check-operator",
        "check-separator",
        "check-type"
      ]
    }
  }	
复制代码

五：让 ts 识别 .vue

因为 TypeScript 默认并不支持 *.vue 后缀的文件，因此在 vue 项目中引入的时候须要建立一个 vue-shim.d.ts 文件，放在项目项目对应使用目录下，例如 src/vue-shim.d.tshtml

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}	  
复制代码

意思是告诉 TypeScript *.vue 后缀的文件能够交给 vue 模块来处理。vue

而在代码中导入 *.vue 文件的时候，须要写上 .vue 后缀。缘由仍是由于 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件：java

import Component from 'components/component.vue'     
复制代码

六：改造vue-router

由于 ts 没法识别 require，因此按需加载路由的时候须要安装声明文件npm i @types/webpack-env -save-dev；而后才能够用const rank = r => require.ensure([], () => r(require('../pages/rank/rank')), 'rank'); 这样的写法；node

七：开始修改App.vue文件

在script 标签上加上 lang="ts", 意思是让webpack将这段代码识别为typescript 而非javascript
修改vue组件的构造方式( 跟react组件写法有点相似, 详见官方 )，以下图
用vue-property-decorator语法改造以前代码

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({})
export default class App extends Vue {
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>
复制代码

八：改造 .vue 文件

npm i vue-class-component vue-property-decorator --savereact

vue-class-component：强化 Vue 组件，使用 TypeScript/装饰器加强 Vue 组件
vue-property-decorator：在 vue-class-component 上加强更多的结合 Vue 特性的装饰器

1.vue-class-component

vue-class-component 对 Vue 组件进行了一层封装，让 Vue 组件语法在结合了 TypeScript 语法以后更加扁平化：jquery

<template>
  <div>
    <input v-model="msg">
    <p>msg: {{ msg }}</p>
    <p>computed msg: {{ computedMsg }}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'

  @Component
  export default class App extends Vue {
    // 初始化数据
    msg = 123

    // 声明周期钩子
    mounted () {
      this.greet()
    }

    // 计算属性
    get computedMsg () {
      return 'computed ' + this.msg
    }

    // 方法
    greet () {
      alert('greeting: ' + this.msg)
    }
  }
</script>
复制代码

使用时须要注意的问题webpack

问题1: ts 没法识别$ref

解决办法：es6

直接在 this.refs.lyricsLines as HTMLDivElement;
在export default class xxx extends Vue里面声明所有的$ref 的类型

$refs: {
    audio: HTMLAudioElement,
    lyricsLines: HTMLDivElement
}
复制代码

问题2: 怎么把mixin引入

@Component({
	/*components: {
    	Swipe
	},*/
    mixins: [mixin]
})
复制代码

2.vue-property-decorator

vue-property-decorator 是在 vue-class-component 上加强了更多的结合 Vue 特性的装饰器，新增了这 7 个装饰器：web

@Emit
@Inject
@Model
@Prop
@Provide
@Watch
@Component (从 vue-class-component 继承)

在这里列举几个经常使用的@Prop/@Watch/@Component

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

@Component
export class MyComponent extends Vue {
  
  @Prop()
  propA: number = 1

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Prop({ type: null })
  propD: any

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }
}
复制代码

上面的代码至关于：

export default {
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
    propD: { type: null }
  }
  methods: {
    onChildChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    }
  }
}	
复制代码

九：注意点

1.若是你引用第三方无类型声明的库，那就须要本身编写x.d.ts文件

2.若是引用 ui 组件的时候，若是控制台出现Property '$xxx' does not exist on type 'App'的话，那么能够在vue-shim.d.ts增长

declare module 'vue/types/vue' {
  interface Vue {
    $xxx: any,
  }
}
复制代码

其余相似的报错：好比我写了一个自定义的权限指令在vue文件中直接this.auth会报错Property 'auth' does not exist on type 'orderList'.

解决办法：(this as any).auth('TESTXMC_order-status-index');

3.如何全局使用window的变量？？

declare global{
    interface Window {
        DEBUG: string;
        API_HOST: string
    }
}  

(window as any).DEBUG = 'dev';        
复制代码

4.如何引入jquery?

npm install --save jquery
npm install --save-dev @types/jquery
复制代码

在index.html里面引入

<script src="node_modules/jquery/dist/jquery.js"></script>
复制代码