[英]How to import/export Typescript type/interface in Svelte file using Sapper?
I'm trying to create a svelte component (using TypeScript), create a type, export it and import it into another file.我正在尝试创建一个苗条的组件(使用 TypeScript),创建一个类型,将其导出并将其导入另一个文件。
Options.svelte
=> svelte component that also exports type Options.svelte
=> 还导出类型的苗条组件index.svelte
=> import component and use type index.svelte
=> 导入组件并使用类型I have a component, for example:我有一个组件,例如:
Options.svelte
<script lang="ts" context="module">
export type Option = {
label: string
};
</script>
<script lang="ts">
export let options: Option[]
</script>
{#each options as option}
<div>{option.label}</div>
{/each}
And I use that component in another file, for example:我在另一个文件中使用该组件,例如:
index.svelte
<script lang="ts">
import Options from './Options.svelte'
import type Option from './Options.svelte'
let options: Option[] = [{ label: 'one' }, { label: 'two' }]
</script>
<Options bind:options />
This continues to give me the following error when running svelte-check --ignore src/node_modules/@sapper
:运行
svelte-check --ignore src/node_modules/@sapper
时,这继续给我以下错误:
Error: Type '{ label: string; }' is missing the following properties from type 'SvelteComponentDev': $set, $on, $destroy, $capture_state, and 2 more. (ts)
Error: JSX element class does not support attributes because it does not have a '$$prop_def' property. (ts)
Error: Type definitions are missing for this Svelte Component. It needs a class definition with at least the property '$$prop_def' which should contain a map of input property definitions.
Example:
class ComponentName { $$prop_def: { propertyName: string; } }
'SwitchMulti' cannot be used as a JSX component.
Its instance type 'SvelteComponentDev' is not a valid JSX element.
Property '$$prop_def' is missing in type 'SvelteComponentDev' but required in type 'ElementClass'. (ts)
How might I export/import the TypeScript type/interface from the svelte component to the index.svelte
file so that I may use it?如何将 TypeScript 类型/接口从 svelte 组件导出/导入到
index.svelte
文件,以便我可以使用它?
I followed what is written in this answer , but cannot figure out how to import it without constant errors.我遵循了这个答案中所写的内容,但无法弄清楚如何在没有持续错误的情况下导入它。 Is this an issue with
svelte-check
?这是
svelte-check
的问题吗?
I can confirm that this issue is specific to svelte-check
(current version 1.1.17)
.我可以确认这个问题是特定于
svelte-check
(current version 1.1.17)
的。
I can run sapper dev
and there are no errors.我可以运行
sapper dev
并且没有错误。
As mentioned by dummdidumm in their answer , the first error is result of a typo, I should instead have the following import (I was importing it as default - which is the component itself, not the type):正如dummdidumm 在他们的回答中提到的,第一个错误是拼写错误的结果,我应该有以下导入(我将它作为默认导入 - 这是组件本身,而不是类型):
import type { Option } from './Options.svelte'
The other errors still persist whenever I pass an attribute to a custom component built with TypeScript.每当我将属性传递给使用 TypeScript 构建的自定义组件时,其他错误仍然存在。
The error is misleading.该错误具有误导性。 You import the type as a default import.
您将类型导入为默认导入。 The default import is the component.
默认导入是组件。 You should write
import type { Option } from './Options.svelte'
instead.您应该改写
import type { Option } from './Options.svelte'
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.