CODEWITHSUNDEEP
typescriptimportsveltedeclaration
rodrigocfd
rodrigocfd

Reputation: 8014

Why do I need to use the "type" keyword when importing types in Svelte?

I'm coming from the React world, and I'm trying to learn Svelte 5.

Suppose I have the following file:

// types.ts

export interface Person {
    name: string;
}

In React, I can import the Person declaration as:

// Component.tsx

import {Person} from './types';

function Component() {
    return <></>;
}

But in Svelte, I need to use the type keyword in the declaration:

// Component.svelte

<script lang="ts">
import type {Person} from './types';
</script>

If I don't use type I see an error:

// Component.svelte

<script lang="ts">
import {Person} from './types';
</script>

The requested module 'http://localhost:8080/src/types.ts'
  doesn't provide an export named: 'Person'

Why is type needed?

Is there any configuration I can do to lift this requirement?

Upvotes: 0

Views: 67

Answers (3)

brunnerh
brunnerh

Reputation: 184251

Why is type needed?

So the pre-processor can tell that this an import that needs to be removed. If the import is not removed, it will not be valid since the types just don't exist at runtime.

There used to be a TS config option to easily enforce this: "importsNotUsedAsValues": "error"

This could be combined with various other flags which was hard to understand, so those have been replaced with verbatimModuleSyntax, the documentation of this option also explains the problems with processing of imports in great detail.

Is there any configuration I can do to lift this requirement?

No.

Svelte files are currently processed in isolation and the types are only stripped not analyzed, so the tools need to be told what is a value and what is a type.

Upvotes: 1

Amanda
Amanda

Reputation: 599

The tsconfig.json setting that is related to that requirement is verbatimModuleSyntax (introduced in v5 to simplify three previous settings).

import type is a helper for TypeScript in processing type-only imports. When it's compiling, TypeScript doesn't need to compile types into JavaScript, so if an import is used only for types, it can be ignored during compilation. If verbatimModuleSyntax is turned off, TypeScript does some checks to see whether an import is a type or a value by checking the source file exports.

Compilers other than TypeScript may also use this information when deciding whether to emit a value, but may not do the same checks that TypeScript does to check if exports are a type or a value.

Svelte recommends that verbatimModuleSyntax is set to true when working with svelte, and it is set to true by default when the ./svelte-kit/tsconfig.json is generated for SvelteKit projects.

In the provided example, the compiler may assume the import Person is a value because there is no type indicator, not find that exported value Person in the source file (because it is a interface/type that doesn't emit to JavaScript), and throws the error because Person doesn't exist in the source file. Having import type means it can ignore the import and not try to process it.

Since I haven't read through svelte's code, I don't know if svelte's preprocessor/compiler require that syntax. Based on the reported errors and the recommendations in the documentation though, it seems like it may be required for svelte to preprocess/compile.

Upvotes: 1

Jos&#233; Ram&#237;rez
Jos&#233; Ram&#237;rez

Reputation: 2315

The import type feature was introduced by TypeScript v3.8. You can read its exact purpose and benefits there.

Although I did try to find an accurate and definitive answer to your question, I could not find any. For example, the behavior doesn't seem to be configurable via tsconfig.json, meaning there doesn't seem to exist a property or combination of properties that would make TypeScript treat "import type" as a must do vs a nice to do.

My non-authoritative answer, then, would be that most likely the Svelte extension may have been updated to forcefully require "import type". If this is the case, it is probably most likely done because the Svelte pre-processor might require this syntax, as in "the pre-processor won't work properly unless types are imported with import type" kind of thing.

Maybe a Svelte team member can approach us and tell us if my assumption is correct or not, or maybe some curious programmer could go dig into the pre-processor/extension code bases.

This, of course, is assuming you're seeing this error in VS Code, and not some other editor. I only know of a Svelte extension for VS Code, but maybe there are others for other IDE's that I don't know about.

Upvotes: 0

Related Questions