Importing TypeScript types into a module

[spandl]

I'm trying to import a TypeScript .ts file into a Typescript module, but getting an error:

SyntaxError: The requested module '../types.js?sha=cd372fb85148700fa88095e3492d3f9f5beb43e555e5ff26d95f5a6adc36f8e6' does not provide an export named 'IGenericVizStyles'

Here is my setup

1. Module preset.ts makes a reference to type.js (using js extension as described in the docs)

import { IGenericVizStyles } from '../types.js';

2. types.ts looks like this

export interface IGenericVizStyles {
    [key: string]:
    | number
    | string
    | string[]
    | boolean
    | Date
    | IGenericVizStyles;
}

I assume, that during the compilation to js, all types are removed and the file then becomes empty.

I'm just wondering how I can type my TS modules without including all types in the same page (types are reused over multiple modules).

I did see the warning:

Framework does not perform type checking during preview or build. If you want the additional safety of type checks, considering using [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html).

But I still would want my modules using types in VS.

[spandl]

Would I need to run the tsc command with the package file?
I'm a bit confused on what tsc is actually doing...

Thanks for a quick explainer!

[mbostock]

You need to use import type (“type-only imports”) when importing a type. Either:

import type {IGenericVizStyles} from "../types.js";

Or:

import {type IGenericVizStyles} from "../types.js";

[spandl]

Nice 🤩

Learned something new!
Thanks!