目錄

• 腳手架搭建

• d.ts文件聲明

• vue-property-decorator 裝飾器使用

• vuex-class 裝飾器使用

• typescript按需轉(zhuǎn)換ES6 Api

webpack 完整配置可以參考 typescript-vue-eslint-starter [ https://github.com/vok123/typescript-vue-eslint-starter ]

歡迎提建議，如果覺(jué)得有用的給個(gè)star哈~

↓↓↓↓↓↓高能時(shí)刻↓↓↓↓↓↓

開(kāi)局一只蔡徐坤, 漲薪全靠vue + ts [https://www.bilibili.com/video/av50374517/?spm_id_from=333.788.videocard.4]

腳手架搭建

1. 安裝依賴(lài)

• 開(kāi)發(fā)依賴(lài)

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/experimental-utils @typescript-eslint/parser @typescript-eslint/typescript-estree eslint eslint-config-standard eslint-plugin-standard eslint-plugin-import eslint-plugin-promise eslint-loader eslint-plugin-node eslint-plugin-vue typescript ts-loader

• 項(xiàng)目依賴(lài)

npm i -S vue-class-component vue-property-decorator vuex-class

2. Webpack loader配置 (ts-loader/eslint-loader)

完整webpack配置 [https://github.com/vok123/typescript-vue-eslint-starter/blob/master/build/webpack.config.js]

module: {
  rules: [
    {
      test: /\.ts(x)?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/\.vue$/],
        transpileOnly: true,
        happyPackMode: false
      }
    },
    {
      test: /\.(js|vue|ts|tsx|jsx)$/,
      enforce: 'pre',
      exclude: /node_modules/,
      loader: 'eslint-loader',
      options: {
        fix: false,
        extensions: ['.js', '.jsx', '.vue', '.ts', '.tsx'],
        cache: false,
        emitWarning: true,
        emitError: false
      }
    }
  ];
}

3. 根目錄添加eslint配置文件 .eslintrc.js

module.exports = {
  plugins: ['vue', '@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    env: { es6: true },
    sourceType: 'module'
  },
  root: true,
  env: {
    browser: true,
    node: true,
    serviceworker: true
  },
  extends: ['plugin:vue/base', 'plugin:@typescript-eslint/recommended', 'plugin:vue/essential', 'standard'],
  rules: {
    // 設(shè)置默認(rèn)eslint規(guī)則
    'one-var': 0,
    'arrow-parens': 0,
    'generator-star-spacing': 0,
    'no-debugger': 0,
    'no-console': 0,
    semi: [2, 'always'],
    'no-extra-semi': 2,
    'space-before-function-paren': 0,
    eqeqeq: 0,
    'spaced-comment': 0,
    'no-useless-escape': 0,
    'no-tabs': 0,
    'no-mixed-spaces-and-tabs': 0,
    'new-cap': 0,
    camelcase: 0,
    'no-new': 0,
    indent: 'off',
    semi: 'off',
    // 設(shè)置typescript-eslint規(guī)則
    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin/docs/rules
    '@typescript-eslint/semi': ['error'],
    '@typescript-eslint/indent': ['error', 2],
    '@typescript-eslint/explicit-function-return-type': 0
  }
};

4. 根目錄添加 tsconfig.json

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

d.ts文件聲明

src/@types/shims-vue.d.ts

• 聲明.vue文件

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

• 聲明組件實(shí)例屬性或者方法 ( 類(lèi)似 this.$route ) 來(lái)源[https://github.com/vuejs/vue-router/blob/dev/types/vue.d.ts]

declare module "vue/types/vue" {
  interface Vue {
    $message: (msg: string): void;
    $balala: string;
  }
}
// 在組件中使用
this.$balala
this.$message('Hello world');

• 聲明new Vue自定義屬性或者方法 (類(lèi)似 new Vue({ router: router })) 來(lái)源[https://github.com/vuejs/vue-router/blob/dev/types/vue.d.ts]

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    i18n: any
  }
}

// 使用
new Vue({
  i18n, ...
});

• 聲明第三方npm包

// 聲明 element-ui
declare module 'element-ui'

// 聲明 axios
declare module 'axios' {
  import Axios from 'axios/index';
  export default Axios;
}

vue-property-decorator 裝飾器使用

• 常用裝飾器及方法

• 用法

  • vue 鉤子寫(xiě)法

  // javascript
  <script>
  export default {
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    activated() {},
    deactivated() {},
    beforeDestroy() {},
    destroyed() {},
    errorCaptured() {}
  }
  </script>
  
  // --------typescript--------
  <script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  
  @Component
  export default class App extends Vue {
    beforeCreate() {}
    created() {}
    beforeMount() {}
    mounted() {}
    beforeUpdate() {}
    updated() {}
    activated() {}
    deactivated() {}
    beforeDestroy() {}
    destroyed() {}
    errorCaptured() {}
  }
  
  </script>
  
  

  • Component

  
  // javascript
  
  import helloWorld from './helloWorld.vue';
  export default {
    components: {
      helloWorld
    }
  }
  
  // --------typescript--------
  
  import helloWorld from './helloWorld.vue';
  import { Component, Vue } from 'vue-property-decorator';
  
  @Component({
    components: {
      helloWorld
    }
  })
  export default class App extends Vue {}
  
  

  • Prop

  // javascript
  export default {
    props: {
      msg: {
        type: String,
        default: 'Hello world',
        required: true,
        validator: (val) => (val.length > 2)
      }
    }
  }
  
  
  // --------typescript--------
  
  import { Component, Vue, Prop } from 'vue-property-decorator';
  
  @Component
  export default class HelloWorld extends Vue {
    @Prop({
      type: String,
      default: 'Hello world',
      required: true,
      validator: (val) => (val.length > 2)
    }) msg!: string
  }
  
  

  • Watch

  // javascript
  
  export default {
    data() {
      return {
        value: ''
      };
    },
    watch: {
      value: {
        handler() {
          console.log(this.value);
        },
        deep: true,
        immediate: true
      }
    }
  }
  
  // --------typescript--------
  
  import { Component, Vue, Watch } from 'vue-property-decorator';
  
  @Component
  export default class App extends Vue {
    value: string = ''
    @Watch('value', { deep: true, immediate: true })
    valueWatch() {
      console.log(this.value);
    }
  }
  
  

  • Mixins

  // javascript
  
  // -info.js
  export default {
    methods: {
      mixinsShow() {
        console.log('徐蔡坤');
      }
    }
  }
  
  // -hello-world.vue
  import mixinsInfo from './info.js';
  export default {
    mixins: [mixinsInfo],
    mounted() {
      this.mixinsShow(); // 徐蔡坤
    }
  }
  
  // --------typescript--------
  // -info.ts
  import { Component, Vue } from 'vue-property-decorator';
  
  @Component
  export default class MixinsInfo extends Vue {
      mixinsShow() {
        console.log('徐蔡坤');
      }
  }
  
  // -hello-world.vue
  import { Component, Vue, Mixins } from 'vue-property-decorator';
  import mixinsInfo from './info.ts';
  
  @Component
  export default class HelloWorld extends Mixins(mixinsInfo) {
    mounted() {
      this.mixinsShow(); // 徐蔡坤
    }
  }
  
  

  • Emit

  // javascript
  
  // -children.vue
  <template>
    <button @click="$emit('submit', '唱, 跳')">提交</button>
  </template>
  
  // -parent.vue
  <template>
    <children @submit="submitHandle"/>
  </template>
  
  <script lang="ts">
  import children from './children.vue';
  export default {
    components: {
      children
    },
    methods: {
      submitHandle(msg) {
        console.log(msg); // 唱, 跳
      }
    }
  }
  </script>
  
  // --------typescript--------
  // -children.vue
  <template>
    <button @click="submit">提交</button>
  </template>
  
  <script lang="ts">
  import { Component, Vue, Emit } from 'vue-property-decorator';
  
  @Component
  export default class Children extends Vue {
    @Emit()
    submit() {
      return '唱, 跳';
    }
  }
  </script>
  
  // -parent.vue
  <template>
    <children @submit="submitHandle"/>
  </template>
  
  <script lang="ts">
  import children from './children.vue';
  import { Component, Vue } from 'vue-property-decorator';
  
  @Component({
    components: {
      children
    }
  })
  export default class Parent extends Vue {
    submitHandle(msg: string) {
      console.log(msg); // 唱, 跳
    }
  }
  </script>
  
  

  • Provide/Inject

  // javascript
  
  // -children.vue
  <script>
  export default {
    inject: ['root'],
    mounted() {
      console.log(this.root.name); // rap, 籃球
    }
  }
  </script>
  
  // -parent.vue
  
  <template>
    <children />
  </template>
  <script>
  import children from './children.vue';
  export default {
    components: {
      children
    },
    data() {
      return {
        name: 'rap, 籃球'
      };
    },
    provide() {
      return {
        root: this
      };
    }
  }
  </script>
  
  
  // --------typescript--------
  
  // -children.vue
  
  <script lang="ts">
  import { Component, Vue, Inject } from 'vue-property-decorator';
  
  @Component
  export default class Children extends Vue {
    @Inject() root!: any
    mounted() {
      console.log(this.root.name); // rap, 籃球
    }
  }
  </script>
  
  // -parent.vue
  
  <template>
    <children />
  </template>
  
  <script lang="ts">
  import children from './children.vue';
  import { Component, Vue, Provide } from 'vue-property-decorator';
  @Component({
    components: {
      children
    }
  })
  export default class Parent extends Vue {
    name: string = 'rap, 籃球'
    @Provide()
    root = this.getParent()
    getParent() {
      return this;
    }
  }
  </script>
  
  

  • 計(jì)算屬性

  // javascript
  
  export default {
    data() {
      return {
        hobby: '唱, 跳, rap, 籃球'
      };
    },
    computed: {
      msg() {
        return '我也會(huì)' + this.hobby;
      }
    },
    mounted() {
      console.log(this.msg); // 我也會(huì)唱, 跳, rap, 籃球
    }
  }
  
  // --------typescript--------
  
  // -hello-world.vue
  import { Component, Vue } from 'vue-property-decorator';
  
  @Component
  export default class HelloWorld extends Vue {
    hobby: string = '唱, 跳, rap, 籃球'
    get msg() {
      return '我也會(huì)' + this.hobby;
    }
    mounted() {
      console.log(this.msg); // 我也會(huì)唱, 跳, rap, 籃球
    }
  }
  
  

vuex-class 裝飾器使用

• vuex typescript 基礎(chǔ)定義

  // -store/store.ts
  
  import Vue from 'vue';
  import Vuex, { StoreOptions } from 'vuex';
  import user from './modules/user';
  
  Vue.use(Vuex);
  interface RootState {
    version: string;
  }
  const store: StoreOptions<RootState> = {
    strict: true,
    state: {
      version: '1.0.0'
    },
    modules: {
      user
    }
  };
  
  export default new Vuex.Store<RootState>(store);
  
  
  
  // -store/modules/user.ts
  
  import { Module } from 'vuex';
  export interface UserInfo {
    uId: string;
    name: string;
    age: number;
  }
  
  interface UserState {
    userInfo: UserInfo;
  }
  
  const user: Module<UserState, any> = {
    namespaced: true,
    state: {
      userInfo: {
        uId: '',
        name: '',
        age: 0
      }
    },
    getters: {
      isLogin(state) {
        return !!state.userInfo.uId;
      }
    },
    mutations: {
      updateUserInfo(state, userInfo: UserInfo): void {
        Object.assign(state.userInfo, userInfo);
      }
    },
    actions: {
      async getUserInfo({ commit }): Promise<void> {
        let { userInfo } = await getUserInfo();
        commit('updateUserInfo', userInfo);
      }
    }
  };
  
  export default user;
  
  

  • vuex-class 裝飾器

  <script lang="ts">
  import { Component, Vue } from 'vue-property-decorator';
  import { State, Getter, Action } from 'vuex-class';
  import { UserInfo } from './store/modules/user';
  
  @Component
  export default class App extends Vue {
    @State('version') version!: string
    @State('userInfo', { namespace: 'user' }) userInfo!: UserInfo
    @Getter('isLogin', { namespace: 'user' }) isLogin!: boolean
    @Action('getUserInfo', { namespace: 'user' }) getUserInfo!: Function
    mounted() {
      this.getUserInfo();
      console.log(this.version); // 1.0.0
    }
  }
  
  </script>
  
  

  • 在非vue組件的.ts中獲取store數(shù)據(jù)

  // test.ts
  
  import store from './store/store';
  
  if (store.getters['user/isLogin'] === false) {
    console.log('未登錄');
  }
  
  

typescript按需轉(zhuǎn)換ES6 Api

默認(rèn)情況下typescript在轉(zhuǎn)換語(yǔ)法為es3或者es5時(shí)并不會(huì)轉(zhuǎn)換ES6 Api, 例如(Object.values, Array.fill ...)
在這種情況下我們可以使用 (ts-polyfill) [https://github.com/ryanelian/ts-polyfill] 定向指定需要轉(zhuǎn)換的api