vue+typescript

目录解析：

|-- .browserslistrc     # browserslistrc 配置文件 (用于支持 Autoprefixer)
    |-- .eslintrc.js        # eslint 配置
    |-- .gitignore
    |-- babel.config.js     # babel-loader 配置
    |-- package-lock.json
    |-- package.json        # package.json 依赖
    |-- postcss.config.js   # postcss 配置
    |-- README.md
    |-- tsconfig.json       # typescript 配置
    |-- vue.config.js       # vue-cli 配置
    |-- public              # 静态资源 (会被直接复制)
    |   |-- favicon.ico     # favicon图标
    |   |-- index.html      # html模板
    |-- src
    |   |-- App.vue         # 入口页面
    |   |-- main.ts         # 入口文件 加载组件 初始化等
    |   |-- shims-tsx.d.ts
    |   |-- shims-vue.d.ts
    |   |-- assets          # 主题 字体等静态资源 (由 webpack 处理加载)
    |   |-- components      # 全局组件
    |   |-- router          # 路由
    |   |-- store           # 全局 vuex store
    |   |-- styles          # 全局样式
    |   |-- views           # 所有页面
    |-- tests               # 测试

多了tsconfig.json、shims-tsx.d.ts、shims-vue.d.ts这几个文件，那这几个文件是干嘛的呢：

• tsconfig.json: typescript配置文件,主要用于指定待编译的文件和定义编译选项
• shims-tsx.d.ts: 允许.tsx 结尾的文件，在 Vue 项目中编写 jsx 代码
• shims-vue.d.ts: 主要用于 TypeScript 识别.vue 文件，Ts 默认并不支持导入 vue 文件

在 vue 中使用 typescript 非常好用的几个库：

• vue-class-component: vue-class-component是一个 Class Decorator,也就是类的装饰器

• vue-property-decorator: vue-property-decorator是基于 vue 组织里 vue-class-component 所做的拓展import { Vue, Component, Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'

• vuex-module-decorators: 用 typescript 写 vuex 很好用的一个库import { Module, VuexModule, Mutation, Action, MutationAction, getModule } from 'vuex-module-decorators'

组件声明

创建组件的方式变成如下

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Test extends Vue {

}

data 对象

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Test extends Vue {
  private name: string;
}

Prop 声明

@Prop({ default: false }) private isCollapse!: boolean;
@Prop({ default: true }) private isFirstLevel!: boolean;
@Prop({ default: "" }) private basePath!: string;

• !: 表示一定存在，?: 表示可能不存在。这两种在语法上叫赋值断言

• @Prop(options: (PropOptions | Constructor[] | Constructor) = {})

• PropOptions，可以使用以下选项：type，default，required，validator

• Constructor[]，指定 prop 的可选类型

• Constructor，例如 String，Number，Boolean 等，指定 prop 的类型

method

js 下是需要在 method 对象中声明方法，现变成如下

public clickFunc(): void {
  console.log(this.name)
  console.log(this.msg)
}

Watch 监听属性

@Watch("$route", { immediate: true })
private onRouteChange(route: Route) {
  const query = route.query as Dictionary<string>;
  if (query) {
  this.redirect = query.redirect;
  this.otherQuery = this.getOtherQuery(query);
  }
}

• @Watch(path: string, options: WatchOptions = {})

• options 包含两个属性 immediate?:boolean 侦听开始之后是否立即调用该回调函数 / deep?:boolean 被侦听的对象的属性被改变时，是否调用该回调函数

• @Watch('arr', { immediate: true, deep: true }) onArrChanged(newValue: number[], oldValue: number[]) {}

computed 计算属性

public get allname() {
  return 'computed ' + this.name;
}

allname 是计算后的值，name 是被监听的值

vuex

在使用 store 装饰器之前，先过一下传统的 store 用法吧

export default  {
    namespaced:true,
    state:{
        foo:""
    },
    getters:{
        getFoo(state){ return state.foo}
    },
    mutations:{
        setFooSync(state,payload){
            state.foo = payload
        }
    },
    actions:{
        setFoo({commit},payload){
            commot("getFoo",payload)
        }
    }
}

然后开始使用vuex-module-decorators

import {
  VuexModule,
  Mutation,
  Action,
  getModule,
  Module
} from "vuex-module-decorators";

• VuexModule 用于基本属性
  export default class TestModule extends VuexModule { }
  VuexModule 提供了一些基本属性，包括 namespaced,state,getters,modules,mutations,actions,context

• @Module 标记当前为 module
  @Module({ dynamic: true, store, name: "settings" }) class Settings extends VuexModule implements ISettingsState { }
  module 本身有几种可以配置的属性:

• namespaced:boolean 启/停用 分模块

• stateFactory:boolean 状态工厂

• dynamic:boolean 在 store 创建之后，再添加到 store 中。开启 dynamic 之后必须提供下面的属性

• name:string 指定模块名称

• store:Vuex.Store 实体 提供初始的 store

• @Mutation 标注为 mutation
  @Mutation private SET_NAME(name: string) { // 设置用户名 this.name = name; }

• @Action 标注为 action
  @Action public async Login(userInfo: { username: string; password: string }) { // 登录接口，拿到token let { username, password } = userInfo; username = username.trim(); const { data } = await login({ username, password }); setToken(data.accessToken); this.SET_TOKEN(data.accessToken); }

• getModule 得到一个类型安全的 store，module 必须提供 name 属性
  export const UserModule = getModule(User);