在 Svelte 组件中导入 Typescript 模块

Question

我已经设置 svelte-preprocess 所以我可以成功地做到这一点：

<script lang="typescript">
    let someConstant:string = "some constant";
    console.log({someConstant});
</script>

行得通。但我不知道如何外部化这个常数。如果我尝试：

<script lang="typescript">
    import {someConstant} from './SomeTypescript.ts'
    console.log({someConstant});
</script>

我收到此错误消息：

error TS2691: An import path cannot end with a '.ts' extension. Consider importing './SomeTypescript' instead.

当我把它改成

<script lang="typescript">
    import {someConstant} from './SomeTypescript'
    console.log({someConstant});
</script>

我收到这个错误：

Error: Could not resolve './SomeTypescript' from src/tom/ManageAirtableModels.svelte

正确的做法是什么？

Answer 1

安装 typescript 的 rollup 插件来处理非 svelte 文件：

yarn add -D @rollup/plugin-typescript typescript tslib

将 plugin-typescript 添加到 rollup.config.js 中的 plugins 列表：

//....
import autoProcess from 'svelte-preprocess'
import typescript from '@rollup/plugin-typescript'

export default {
  ...
  plugins: [
    typescript(),

    svelte({
      preprocess: autoProcess(),
      ...
    })
    ...
  ]
}

现在 import 不需要 .ts 扩展：

<script lang="typescript">
    import {someConstant} from './SomeTypescript'
    console.log({someConstant});
</script>

在 Svelte 组件中导入 Typescript 模块

Import Typescript modules in Svelte Component

svelte

svelte-3