时间戳

首页 > 解决方案 > 带有 Vue js 的打字稿

typescript - 带有 Vue js 的打字稿

问题描述

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

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

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

标签： typescriptvue.jsvue-component

解决方案

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

<template>
     <!-- Some HTML -->
</template>

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

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

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

至于是一种好方法，我建议不要执行您建议的工作流程。您的混合 TypeScript 和 JS 工作流程将是：

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

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

推荐阅读