如何让 Vue 项目快速支持 TypeScript 语法?

简介

JavaScript 作为一种弱类型的语言，类型推断只能提供很有限的支持，TypeScript 提供了一种描述对象形状的方法。可以帮助提供更好的文档，还可以验证你的代码可以正常工作，在一些大型的项目中，使用 TypeScript 非常必要，从代码层次就已经避免了很多错误，而且方便文档的书写，最主要的就是后期迭代特别爽，但是对于没有接触过强类型语言（Java、C）的童鞋来说，TypeScript 上手还是有点困难了，单就目前前端发展趋势来说，TypeScript 还是很重要的，想了解更多 TypeScript 的童鞋可以自己去看 官网。

开始

我们需要利用 webpack 创建一个简单的 vue 项目，为了方便，我就直接拿上一篇文章的 Demo 了，小伙伴可以直接 clone 下来并安装依赖：

git clone https://gitee.com/vv_bug/vue-dist-demo.git && npm install

从 0 开始搭建一个 vue 项目也是非常简单的，强烈推荐大家去看我的另外一篇文章 来和 webpack 谈场恋爱吧。

然后我们试着运行一下项目：

npm run dev

然后打开浏览器看效果：


2-1.png

支持 TypeScript

这里我们提供两种方案，也是目前比较推荐的两种。

方式一

利用 Babel 的 @babel/plugin-transform-typescript 插件来实现。

安装 @babel/core

babel 核心 API。

npm install -D @babel/core --registry https://registry.npm.taobao.org

安装 @babel/plugin-transform-typescript 插件

Babel 的 TypeScript 插件。

npm install -D @babel/plugin-transform-typescript --registry https://registry.npm.taobao.org

安装 babel-loader

babel 加载器。

npm install -D babel-loader --registry https://registry.npm.taobao.org

ok！安装完 Babel 的一些依赖后，我们开始配置 webpack。

我们在工程目录 vue-dist-demo 下创建一个文件 babel.config.js：

touch babel.config.js

然后写入以下代码到 babel.config.js 文件：

module.exports = {
  presets: [
    [
      '@babel/preset-env', // 添加 preset-env 预设做语法转换跟 polyfill 添加
      {
        corejs: 3,
        useBuiltIns: 'usage',
        modules: false,
      },
    ],
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime', // 利用 runtime 做 helpers 跟 regenerator 设置
      {
        corejs: false,
        helpers: true,
        useESModules: false,
        regenerator: true,
        absoluteRuntime: './node_modules',
      },
    ],
  ],
};

找到 webpack 的配置文件 webpack.config.js 文件，然后添加 babel-loader：

... 
.module
        .rule('babel')
            .test(/\.t?j?s?$/) // 对 js、ts 文件进行 babel 配置
            .use('babel-loader')
                .loader('babel-loader')
                .end()
            .end()
...

webpack.config.js 文件全部配置：

const path = require('path');
const config = new (require('webpack-chain'))();
config
    .context(path.resolve(__dirname, '.')) // webpack 上下文目录为项目根目录
    .entry('app') // 入口文件名称为 app
        .add('./src/main.js') // 入口文件为 ./src/main.ts
        .end()
    .output
        .path(path.join(__dirname, './dist')) // webpack 输出的目录为根目录的 dist 目录
        .filename('[name].[hash:8].js') // 打包出来的 bundle 名称为 "[name].[hash:8].js"
        .publicPath('/') // publicpath 配置为 "/"
        .end()
    .resolve
        .extensions
            .add('.js')
            .add('.vue') // 配置以 .js 等结尾的文件当模块使用的时候都可以省略后缀
            .end()
        .end()
    .module
        .rule('babel')
            .test(/\.t?j?s?$/) // 对 js、ts 文件进行 babel 配置
            .use('babel-loader')
                .loader('babel-loader')
                .end()
            .end()
        .rule('vue') // vue-loader 相关配置
            .test(/\.vue$/) // 匹配 .vue 文件
            .use('vue-loader')
                .loader('vue-loader')
                .end()
            .end()
        .end()
    .plugin('vue-loader-plugin') // vue-loader 必须要添加 vue-loader-plugin
        .use(require('vue-loader').VueLoaderPlugin, [])
        .end()
    .plugin('html') // 添加 html-webpack-plugin 插件
        .use(require('html-webpack-plugin'), [
            {
                template: path.resolve(__dirname, './public/index.html'), // 指定模版文件
                chunks: ['app'], // 指定需要加载的 chunk
                inject: 'body', // 指定 script 脚本注入的位置为 body
            },
        ])
        .end()
    .devServer
        .host('0.0.0.0') // 服务器外部可访问
        .disableHostCheck(true) // 关闭白名单校验
        .contentBase(path.resolve(__dirname, './public')) // 设置一个 express 静态目录
        .historyApiFallback({
            disableDotRule: true, // 禁止在链接中使用 "." 符号
            rewrites: [
                { from: /^\/$/, to: '/index.html' }, // 将所有的 404 响应重定向到 index.html 页面
            ],
        })
        .port(8080) // 当前端口号
        .hot(true) // 打开页面热载功能
        .sockPort('location') // 设置成平台自己的端口
        .open(true);
module.exports = config.toConfig();

ok！就是这么简单，接着我们来测试一下。

测试

我们修改一下 src/app.vue：

<template>
    <div class="app">{{ msg }}</div>
</template>

<script lang="ts">
    export default {
        name: "app",
        data(){
            return {
                msg: "hello"
            }
        },
        created() {
            let name: string = "hello ts";
            alert(name);
        }
    }
</script>

可以看到，我们给 script 标签加了一个 lang="ts" 属性，并且在 create 方法中添加了一段 TypeScript 代码，然后我们重新运行看一下效果：

npm run dev
2-2.png

可以看到，webpack 正常编译了我们的 ts 语法，项目正常运行。

方式二

利用 ts-loader 结合官方 typescript 库来实现。

安装 typescript

ts 语法核心 API。

npm install -D typescript --registry https://registry.npm.taobao.org

安装 ts-loader

ts 文件加载器。

npm install -D ts-loader --registry https://registry.npm.taobao.org

除了配置 ts-loader 外，我们还需要在工程目录 vue-dist-demo 下创建一个 ts 配置文件 tsconfig.json：

touch tsconfig.json

然后写入以下代码到 tsconfig.json 文件：

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

然后找到 webpack 配置文件 webpack.config.js，添加 ts-loader：

...
.module
        .rule("type-script") // 配置 ts-loader
            .test(/\.tsx?$/) // loader 加载的条件是 ts 或 tsx 后缀的文件
            .use("ts-loader")
                .loader("ts-loader")
                .options({ // ts-loader 相关配置
                    transpileOnly: true, // 只用于编译
                    appendTsSuffixTo: ['\\.vue$'] // 给 .vue 文件添加后缀
                })
                .end()
            .end()
...

webpack.config.js 文件全部配置：

const path = require('path');
const config = new (require('webpack-chain'))();
config
    .context(path.resolve(__dirname, '.')) // webpack 上下文目录为项目根目录
    .entry('app') // 入口文件名称为 app
        .add('./src/main.ts') // 入口文件为 ./src/main.ts
        .end()
    .output
        .path(path.join(__dirname, './dist')) // webpack 输出的目录为根目录的 dist 目录
        .filename('[name].[hash:8].js') // 打包出来的 bundle 名称为 "[name].[hash:8].js"
        .publicPath('/') // publicpath 配置为 "/"
        .end()
    .resolve
        .extensions
            .add('.js')
            .add('.vue') // 配置以 .js 等结尾的文件当模块使用的时候都可以省略后缀
            .end()
        .end()
    .module
        .rule("type-script") // 配置 ts-loader
            .test(/\.tsx?$/) // loader 加载的条件是 ts 或 tsx 后缀的文件
            .use("ts-loader")
                .loader("ts-loader")
                .options({ // ts-loader 相关配置
                    transpileOnly: true, // 只用于编译
                    appendTsSuffixTo: ['\\.vue$'] // 给 .vue 文件添加后缀
                })
                .end()
            .end()
        .rule('vue') // vue-loader 相关配置
            .test(/\.vue$/) // 匹配 .vue 文件
            .use('vue-loader')
                .loader('vue-loader')
                .end()
            .end()
        .end()
    .plugin('vue-loader-plugin') // vue-loader 必须要添加 vue-loader-plugin
        .use(require('vue-loader').VueLoaderPlugin, [])
        .end()
    .plugin('html') // 添加 html-webpack-plugin 插件
        .use(require('html-webpack-plugin'), [
            {
                template: path.resolve(__dirname, './public/index.html'), // 指定模版文件
                chunks: ['app'], // 指定需要加载的 chunk
                inject: 'body', // 指定 script 脚本注入的位置为 body
            },
        ])
        .end()
    .devServer
        .host('0.0.0.0') // 服务器外部可访问
        .disableHostCheck(true) // 关闭白名单校验
        .contentBase(path.resolve(__dirname, './public')) // 设置一个 express 静态目录
        .historyApiFallback({
            disableDotRule: true, // 禁止在链接中使用 "." 符号
            rewrites: [
                { from: /^\/$/, to: '/index.html' }, // 将所有的 404 响应重定向到 index.html 页面
            ],
        })
        .port(8080) // 当前端口号
        .hot(true) // 打开页面热载功能
        .sockPort('location') // 设置成平台自己的端口
        .open(true);
module.exports = config.toConfig();

测试

重命名 src/main.js 为 src/main.ts，然后跟方式一一样，修改一下 src/app.vue 文件：

<template>
    <div class="app">{{ msg }}</div>
</template>

<script lang="ts">
    export default {
        name: "app",
        data(){
            return {
                msg: "hello"
            }
        },
        created() {
            let name: string = "hello ts-loader";
            alert(name);
        }
    }
</script>

然后我们重新运行看一下效果：

npm run dev
2-3.png

可以看到，webpack 正常编译了我们的 ts 语法，项目正常运行。

总结

“方式一” 还是有局限性的，只是单纯的去转换 ts 语法，在平时项目开发中还是推荐使用 “方式二”，因为更符合 TypeScript 官网规范，支持的功能也更丰富，而且通过设置 tsconfig.json 配置文件简单清晰明了，并且能够与 IDE 完美结合，实现 ts 语法智能提示功能。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,670评论 5赞 460
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,928评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,926评论 0赞 320
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,238评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,112评论 4赞 356
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,138评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,545评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,232评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,496评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2赞 310
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,226评论 3赞 313
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,600评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2赞 335

推荐阅读更多精彩内容