4

¿Cuál es la diferencia entre tipos(type) e interfaces(interface) en Typescript? ¿Es solo sintaxis o la elección tiene mayores consecuencias?

interface A {
campo1: number
campo2: string
} 

type A = {
campo1: number
campo2: string
};
1
  • Aquí hay una pregunta excelente al respecto en SO en inglés. En general, lo que más veo hacer es usar interfaces para todo excepto las cosas que no se pueden hacer con una interfaz, como crear tuplas o extender tipos básicos (number, undefined...)
    – Benito-B
    el 19 dic. 2021 a las 15:00

1 respuesta 1

3

Si existen algunas diferencias, por ejemplo, un alias de tipos no se puede volver a abrir para agregar nuevas propiedades, mientras que una interfaz siempre es extensible.

interface A {
    campo1: number,
    campo2: string
} 

interface A {
    campo3: number
}

const a: A = {
  campo1: 1,
  campo2: 'hola',
  campo3: 12
};

/*
type B = {
    campo1: number,
    campo2: string
} 

type B = {
    campo3: number
}

// ESTO DEVOLVERÁ UN ERROR: Duplicate identifier 'B'
*/

En los alias de tipos podemos generar tipos mapeados. La palabra clave in se puede utilizar para iterar sobre todos los elementos en una unión de claves.

type Keys = "firstname" | "surname"

type DudeType = {
  [key in Keys]: string
}

const test: DudeType = {
  firstname: "Pedro",
  surname: "Pablo"
}

Desafortunadamente, no podemos aprovechar ésto en una declaración de interfaz.

type Keys2 = "firstname" | "surname"
/*
interface DudeInterface {
  [key in Keys2]: string
}
// ERROR: A mapped type may not declare properties or methods.
*/

En este tutorial se habla algo sobre las diferencias entre tipos e interfaces: Información general sobre las interfaces en TypeScript

En este enlace puede ver más: TypeScript interface vs. type

1
  • esta sería una respuesta perfecta si mencionara además los tipos condicionales y el uso de infer.
    – ffflabs
    el 15 abr. 2022 a las 1:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.