带有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时，无需在导入语句中指定文件扩展名，例如.js或.ts。
• 还要在TypeScript中写入条目文件main.ts或index.ts。这样可以减轻您的痛苦。

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