带有 Vue js 的打字稿

Question

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

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

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

Answer 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 编写所有内容。