Lemoncode TV

Svelte + Typescript + Import Interface

Svelte lleva un tiempo volcado en dar una buena integración con TypeScript, pero como toda desarrollo que implementa nuevos conceptos nos podemos encontrar con alguna sorpresa.

Una de ellas viene cuando queremos importar un interfaz que viene de otro fichero, si intentamos hacerlo de la manera tradicional nos podemos ver con un error en consola :-@.

Pero... ¿Por qué pasa esto? Y, lo más importante ¿Qué podemos hacer para solucionarlo? Pongámonos manos a la obra.

Manos a la obra

Partimos de un proyecto en el que tenemos un fichero que llama order.model.ts, y en este fichero tenemos el siguiente contenido (entre otros exportamos un interfaz Order para que pueda ser consumido desde el exterior):

export interface Item {
  name: string;
  quantity: number;
  price: number;
}

export interface Order {
  itemCollection: Item[];
}

export const createNewItem = (): Item => ({
  name: "",
  quantity: 1,
  price: 0,
});

Vámonos ahora a nuestro componente de Svelte, aquí podemos ver que si intentamos importar el interfaz Order nos da un error:

<script lang="ts">
+  import { Order } from "./order.model";
  import { createNewItem } from "./order.model";

  let order: Order = {
    itemCollection: [

En concreto el mensaje de error es el siguiente:

'Order' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.

¿Qué está pasando aquí? Desde la version 4, svelte-preprocess no realiza chequeos de tipo en tus componentes, sólo se ocupa de transpilarlos a un JavaScript válido, así que...

• Nuestra primera tentación puede ser irnos al tsconfig y empezar a poner valores a false a ver que pasa :).
• También podemos usar svelte-check (pero esto puede hacer un poco más lento nuestro proceso de transpilación).
• O por último...

...Podemos usar una solución más sencilla, simplemente tenemos que añadir justo después de la palabra reservada import la palabra reservada type

<script lang="ts">
-  import { Order } from "./order.model";
+  import type { Order } from "./order.model";
  import { createNewItem } from "./order.model";

  let order: Order = {

Con esto ya nos quitamos errores y podemos seguir importando nuestros ficheros de interface.

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.