在vue单文件组件中使用typescript初探

Typescript由于其更多的规则，类型限制，代码更高的可预测性，可控性和可维护性，近2年发展迅速，React和Angular底层已经用TS重写，vue3.0预计在2020也会用TS重写，但是很多开发者已经蠢蠢欲动了。

vue-cli3.0已经支持typescript配置，脚手架已经把该配置的给配置好了。
vue-cli3.0不再直接暴露webpack相关配置，如果需要个性化配置需要在vue.config.js中完成，与开发环境相关的需要在根目录下创建对应的配置文件，比如测试环境.env.pro_test，正式环境.env.production，具体可参考官方文档：https://cli.vuejs.org/zh/guide/

路由配置

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home.vue";

Vue.use(VueRouter);

function importComponent(component: string): Object {
  return () => import(/* webpackChunkName: "about" */ "@/views/" + component);
}
const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/about",
    name: "about",
    component: importComponent("About")
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

单文件组件

有脚手架的帮助，省去了大量配置与转换工作，开发者只需要在实现业务需求上遵循Typesrcript语法即可，有了eslint，typescript在变量类型上的约束，可以大大减少错误率，还是比较方便的。
效果如下：