带有 Vue js 的打字稿

Posted 2023-02-23

【中文标题】带有 Vue js 的打字稿

【英文标题】：Typescript with Vue js

【发布时间】：2018-12-07 04:30:47

【问题描述】：

您好，我有一个问题到现在还没有找到答案/解决方案... 我希望将打字稿包含在 Vue 项目中，但不直接包含在组件级别。 我打算做的是，创建一些 .ts 文件并将它们编译为 .js 文件，这样我就可以引用/导入从 .ts 中提取的这些 .js 文件并在组件中使用它们...... 比如……

<template>
...
</template>    
<script>
  import file from './file.js';
...
</script>
<style>
...
</style>

然后在组件的脚本标签内定义的方法中使用来自 file.js 的代码。 我想知道...这可能吗（如果是的话如何？）这是一个好方法吗？我计划对我的大部分组件使用这种方法，因此它们有一个单独的导入脚本。

【问题讨论】：

正如 Harshal 所说，您最终可能会用 TypeScript 编写所有内容。要开始，我绝对推荐使用 Vue GUI (cli v3) 来引导事物。手动实现 TypeScript 相当麻烦。

【参考方案1】：

是的。有可能的。如果您打算直接在 TypeScript 中编写一些组件，您的 .vue 文件将如下所示：

<template>
     <!-- Some html -->
</template>

<script lang="ts">
    import file from './file.js';
</script>

你的代码的一部分在 TypeScript 中，一部分在 javascript 中是非常好的。如果您使用的是 Webpack 或其他，请确保正确配置了 ts-loader 和 babel-loader。

对于 TypeScript，您需要设置 allowJs、implicit any 等标志，禁用 strict 模式以减少将 JS 文件导入 TypeScript 时的摩擦，反之亦然。

就好的方法而言，我建议不要执行您建议的工作流程。您的混合 TypeScript 和 JS 工作流程将是：

使用像 Webpack 这样的模块打包器（Rollup 与 Vue + TypeScript 有问题） 一次编译，即不要等待 TypeScript 编译，然后在 .vue 文件中使用编译后的代码。 必须有三个装载程序：ts-loader、babel-loader、vue-loader。没有它是不可能的。 使用 TypeScript 时，您不必在 import 语句中指定文件扩展名，例如 .js 或 .ts。 另外，在 TypeScript 中编写您的入口文件，即 main.ts 或 index.ts。它会为您省去很多痛苦。

一旦您开始编写并看到 TypeScript 的强大功能，您最终将开始使用 TypeScript 编写所有内容。