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

最新推荐文章于 2024-07-24 16:02:13 发布

vv_小虫

最新推荐文章于 2024-07-24 16:02:13 发布

阅读量1.6k

点赞数 1

分类专栏：前端框架 html5学习笔记文章标签： vue typescript js

本文链接：https://blog.csdn.net/vv_bug/article/details/109656636

版权

本文介绍了如何将TypeScript引入Vue项目，提供了两种方法：一是通过Babel和@babel/plugin-transform-typescript转换，二是使用ts-loader。文章详细阐述了每种方法的步骤，包括所需安装的依赖和配置。推荐在实际项目中使用ts-loader，因为它更符合TypeScript规范，能提供更丰富的功能和IDE集成。

摘要由CSDN通过智能技术生成

简介

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

然后打开浏览器看效果：

在这里插入图片描述

支持 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()