Vue2.5+ Typescript 引入全面指南

Vue2.5+ Typescript 引入全面指南

系列目录:

写在前面

写这篇文章时的我,Vue使用经验三个多月,Typescript完全空白,
花了大概三个晚上把手头项目迁移至Typescript,因此这篇文章更像个入门指引。

总原则

两大原则:

最小依赖引入

由于我个人从Javascript到Typescript的升级,更倾向于平滑顺移,因此,我对新依赖的引入整体保持克制原则,只引入了必要项,以尽量贴近原生vue写法:

  • typescript
  • ts-loader

以下依赖均未引入:

  • vue-class-component:官方维护,学习成本小,但与vuex融合性较差,计划等官方完善对vuex支持后再考虑引入
  • vue-property-decorator:非官方维护,一定学习成本
  • vuex-class:非官方维护,在 vue-class-component 基础上补充一定vuex支持(支持有限)
  • vuex-ts-decorators/vuex-typescript等:非官方维护,学习成本极高
PS: 后总结,vue官方维护的 vue-class-component 还是很有必要引入的,文末有详细说明。

PS: tslint-loader由于对vue的支持尚不完美,作为可选项文末有详细说明。

既然用了 Typescript,不到万不得已不用 any!

any 任意类型的存在,在我看来就是个潘多拉魔盒,一旦开启,很容易养成偷懒的习惯,碰到难题就上 any。因此,我的建议是,尽量不要去碰它,除非你无路可走。

Vue-cli 生成项目启用 Typescript

注:这里只介绍Webpack模板下使用。

vue init webpack <项目名称> 生成的项目需做如下改动以兼容 Typescript:

依赖安装

npm i --save-dev typescript ts-loader 安装必要依赖。推荐使用 npm 8及以上版本。

Webpack 配置

./build/webpack.base.conf.js,作如下改动:

  • entry入口文件main.js改为main.ts
entry: {
  app: './src/main.ts'
}
  • resolve.extensions添加.ts
resolve: {
  extensions: ['.js', '.ts', '.vue', '.json']
}
  • module.rules添加.ts解析规则:
module: {
  rules: [
    {
      test: /\.tsx?$/,
      loader: 'ts-loader',
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/\.vue$/]
      }
    }
  ]
}

tsconfig.json

项目根路径下添加文件tsconfig.json,官方推荐配置如下:

// tsconfig.json
{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,
    // 如果使用 webpack 2+ 或 rollup,可以利用 tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

vue-shim.d.ts

src目录下添加文件vue-shim.d.ts

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

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

.js 文件重命名为 .ts 文件

src/main.js开始,包括src/router/index.js等逐一从.js重命名为.ts

注意:重命名后对vue文件的import,需添加.vue后缀

因为Typescript默认只识别*.ts文件,不识别*.vue文件

之前:

import App from './App'
import HelloWorld from '@/components/HelloWorld'

需改为:

import App from './App.vue'
import HelloWorld from '@/components/HelloWorld.vue'

.vue 文件改造

要点:

  • <script>标签添加lang="ts"声明
  • 使用Vue.extend定义组件

示例:

// src/components/HelloWorld.vue
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
})
</script>

npm run dev

至此运行项目,即可正常运行,vue对typescript的初步引入,基本完成。

TSLint

2017-12-6更新:
当前(2017年12月),对.vue文件,VSCode编辑器的编辑时提示,有了一个非官方方案(官方进度见以下issue,仍均未解决),TSLint Vue

简单讲,一给力小哥 Fork 了 VSCode 官方的 TSLint插件,添加了对 Vue 文件的支持。小哥更新蛮频繁的,基本上第一时间跟随官方插件的最新版,亲测可用。

使用方式:VSCode Plugin,关闭 TSLint,下载并启用 TSLint Vue即可:
TSLint Vue Plugin


当前(2017年11月),对.vue文件,可以在关闭no-consecutive-blank-lines检查前提下,开启构建时TSLint支持;至于VSCode编辑器的编辑时提示,完全没有。

详见TSLint的 issue 及vetur的 issue

不幸的是,也不能拿ESLint将就用,不然一堆如下的Error等着你:
Typescript ESLint Errors

所以,只剩俩选择,要么关了,要么按照下面的配置将就着用:

  • 添加依赖
npm i --save-dev tslint tslint-loader tslint-config-standard
  • module.rules移除eslint-loader,添加tslint-loader预处理
// ./build/webpack.base.conf.js
module: {
  rules: [
    // {
    //   test: /\.(js|vue)$/,
    //   enforce: 'pre',
    //   exclude: /node_modules/,
    //   use: {
    //     loader: 'eslint-loader',
    //     options: {
    //       formatter: require('eslint-friendly-formatter')
    //     }
    //   }
    // },
    {
      test: /\.ts$/,
      exclude: /node_modules/,
      enforce: 'pre',
      loader: 'tslint-loader'
    },
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: vueLoaderConfig
    },
  ]
}
  • vue-loader中开启tslint-loader选项:
// ./build/vue-loader.conf.js

const merge = require('webpack-merge')

module.exports = {
  loaders: merge(utils.cssLoaders({
      sourceMap: isProduction
        ? config.build.productionSourceMap
        : config.dev.cssSourceMap,
      extract: isProduction
    }), {
      ts: ['ts-loader', 'tslint-loader']
    }
  ),
  ... // 其他内容
}
  • 项目根路径下添加文件tslint.json
// tslint.json
{
  "extends": "tslint-config-standard",
  "globals": {
    "require": true
  },
  "rules": {
    "no-consecutive-blank-lines": false
  }
}

no-consecutive-blank-lines 关闭的解释 见这里

简单翻译,vue-loadertslint-loader结合使用,就像是把.vue文件里的<template><style>等非js内容全部置为了空行一样,为此,只能关闭此检查。

重新运行npm run dev,即可看到构建时可能输出的tslint警告(tslint默认级别warning,不阻断构建,如需error级别,可自行修改)
Typescript TSLint Warning

vue-class-component 的必要性

原生vue组件写法会导致一很烦的问题:

data()如果如下形式定义数组,将会被推导为[]never类型:

export default Vue.extend({
  data () {
    return {
      list: []  // type: []never
    }
  }
})

这样一来,此array直接废掉,因为不能往上附加值,只能如此提前声明:

export default Vue.extend({
  data () {
    const list: string[] = []
    return {
      list: list
    }
  }
})

而引入vue-class-component后的class写法,则可以一行搞定:

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

@Component
export default class HelloWorld extends Vue {
  list: string[] = []

  hello () {
    list.push('Hello world')
  }
}
</script>

我个人是考虑到 vue-class-componentvuexmapState, mapGetters 等函数支持较差,(可以借助vuex-class引用),再加Decorators并不是我对typescript的核心需求(Interface才是!),决定的暂缓引入,先不增加复杂度。

Vuex

见文章 Vue2.5+ Typescript 引入全面指南 - Vuex篇

完整代码

见 Github 库:vue-vuex-typescript-demomaster 分支为整合 vuex 示例,basic 分支为不含 vuex 的基础示例。

556 声望
28 粉丝
0 条评论
推荐阅读
Vue2.5+ Typescript 引入全面指南 - Vuex篇
Vue2.5+ Typescript 引入全面指南 - Vuex篇 系列目录: Vue2.5+ Typescript 引入全面指南 Vue2.5+ Typescript 引入全面指南 - Vuex篇 前言 Vuex 正是我下决心引入Typescript的核心痛点。与 vuex 相关的代码中,到...

盘风95阅读 57.7k评论 13

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木149阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青54阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.4k评论 6

556 声望
28 粉丝
宣传栏