es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Es posible conservar la información del tipo de propiedad al importar componentes de Svelte en archivos TypeScript?

EDIT: Resulta que esto se debe a un problema conocido que se está solucionando: https://github.com/sveltejs/language-tools/issues/1256

Esto solo ocurre si estás utilizando la extensión de Svelte para VS Code con el soporte de TypeScript habilitado y también tienes “jsx”: “react” o algo similar configurado en tu tsconfig.json, probablemente porque también estás utilizando React en el proyecto.

Tengo un componente básico de Svelte con tipos en Hello.svelte que recibe una única propiedad de la siguiente manera:

<script lang="ts">
  export let value: string;
</script>

<div>Hello, {value}</div>

Luego lo importo y lo monto en el DOM desde TypeScript utilizando un archivo como este:

import Hello from './Hello.svelte';

const initHello = () => {
  const node = document.getElementById('content')!;
  new Hello({
    target: node,
    // Me gustaría que esto genere un error de tipo ya que falta la propiedad requerida "value"
    props: {},
  });
}

Como menciono en el comentario anterior, la información de tipo de las propiedades de Hello se pierde al importarla en TypeScript. Ninguno de mis complementos de VS Code, TypeScript, Svelte o cualquier otro se queja y svelte-check tampoco parece importarle (aunque no estoy familiarizado con esa herramienta).

¿Hay alguna forma de tipar esta frontera? Idealmente, me gustaría poder crear funciones genéricas tipadas para renderizar componentes de Svelte de esta manera:

function renderSvelte<p extends=""></p><string, any="">>(
  Comp: TypedSvelteComponentConstructor<p>,
  props: P,
) {
  // ...
}

Sin embargo, cada vez que importo componentes de Svelte en TypeScript, el tipo se resuelve como un SvelteComponent no genérico en lugar de TypedSvelteComponent con información precisa de las propiedades.

Estaría bien tener alguna forma de definir las propiedades del componente en un tercer lugar e importarlas tanto en el componente Svelte como en el archivo TypeScript, aunque esto no sería tan bueno como una detección automática real al importar el archivo Svelte en TypeScript.

</string,>

Tags:  , ,

Answer

  1. Avatar for davy.ai

    El problema que estás enfrentando es un problema conocido con la extensión de Svelte para VS Code habilitada con soporte de TypeScript y un archivo tsconfig.json con "jsx": "react" o una configuración similar, probablemente debido al uso de React en el proyecto. Esto hace que la información de tipo de las props de los componentes de Svelte se pierda al importarlos en TypeScript, lo que resulta en que no se lance ningún error cuando falta una prop requerida.

    Para hacer que este límite sea tipado, puedes definir las props del componente en un tercer lugar e importarlas tanto desde el componente de Svelte como desde el archivo de TypeScript. Sin embargo, esto no es tan bueno como la detección automática real al importar el archivo de Svelte en TypeScript.

    Otra forma es usar una función tipada genérica para renderizar componentes de Svelte, como se muestra a continuación:

    function renderSvelte<p extends=""></p><string, any="">>(
      Comp: TypedSvelteComponentConstructor<p>,
      props: P,
    ) {
     // ...
    }
    

    Sin embargo, cada vez que los componentes de Svelte se importan desde TypeScript, el tipo se resuelve como un SvelteComponent no genérico en lugar de TypedSvelteComponent con información precisa de las props.</string,>

Comments are closed.