En TypeScript, ¿cuál es la diferencia entre tipo e interfaz?

114

¿Cuáles son las diferencias entre los siguientes?

type Foo = { 
    foo: string 
};
interface Foo {
   foo: string;
}
Martiansnoop
fuente
3
el tipo no se puede extender como extensión de interfaz. los tipos son solo alias de un tipo.
PSL
4
Orientación disponible aquí: basarat.gitbooks.io/typescript/content/docs/types/…
basarat
2
Utilizo principalmente tipos para datos externos, por ejemplo, de un archivo JSON, o si solo está escribiendo funciones sin usar clases OOP.
Kokodoko
1
Encontré este artículo útil que explica las diferencias - medium.com/@martin_hotell/…
Sandeep GB
1
La respuesta aceptada está desactualizada. Explicación actualizada publicada aquí (ya que Google parece favorecer ese hilo): stackoverflow.com/questions/37233735/…
jabacchetta

Respuestas:

125

Las interfaces se pueden ampliar

interface A {
  x: number;
}
interface B extends A {
  y: string;
}

y tambien aumentado

interface C {
  m: boolean;
}
// ... later ...
interface C {
  n: number;
}

Los alias de tipo, sin embargo, pueden representar algunas cosas que las interfaces no pueden

type NumOrStr = number | string;
type NeatAndCool = Neat & Cool;
type JustSomeOtherName = SomeType;

Entonces, en general, si solo tiene un tipo de objeto simple, como se muestra en su pregunta, una interfaz suele ser un mejor enfoque. Si desea escribir algo que no se puede escribir como interfaz, o simplemente quiere darle un nombre diferente a algo, un alias de tipo es mejor.

Ryan Cavanaugh
fuente
3
Type aliases, however, can represent some things interfaces can'tMe parece que sus ejemplos NeatAndCooly JustSomeOtherNamese pueden crear como interfaz que amplíe el existente Neat, Coolo SomeTypetipos.
Rudey
En efecto el segundo y tercer ejemplos se pueden crear con una interfaz:interface NeatAndCool extends Neat, Cool {} interface JustSomeOtherName extends SomeType {}
peterjwest
3
La extensión de dos interfaces no siempre producirá el mismo resultado que un tipo de intersección, y no todos los tipos se pueden extender (mientras que todos los tipos pueden tener alias o colocarse en uniones / intersecciones)
Ryan Cavanaugh
1
Entonces, ¿cuál es la ventaja del tipo? ¿Podemos decir que cuando tenemos interfaz, el tipo no es útil?
Mostafa Saadatnia
4

Además, se puede implementar una interfaz .

Dave Ford
fuente
1
Y un objeto puede implementar múltiples interfacesclass Thing implements Neat, Cool
Kokodoko
1
A qué te refieres ? también Type can b implementado
nadav
3
Esto debería ser un comentario, no una respuesta en mi opinión.
Michael Kunst
Estimado Dave, debería dejar un comentario, no una respuesta. También basado en esta respuesta, su respuesta no es exactamente correcta.
Mehrdad88sh
4

Tipos es algo así como Interfaces y viceversa: ambos pueden implementarse mediante una clase. pero hay algunas diferencias importantes: 1. cuando Type es implementado por una clase, las propiedades que pertenecen al Type deben ser inicializadas dentro de la clase, mientras que con Interface deben ser declaradas. 2. como mencionó @ryan: la interfaz puede extender otra interfaz. Los tipos no pueden.

type Person = {
    name:string;
    age:number;
}

// must initialize all props - unlike interface
class Manager implements Person {
    name: string = 'John';
    age: number = 55;

    // can add props and methods
    size:string = 'm';
}

const jane : Person = {
    name :'Jane',
    age:46,

    // cannot add more proprs or methods
    //size:'s'
}
nadav
fuente
4

Las diferencias entre estos también están ya en este hilo.

type Foo = {
    foo: string
};
interface Foo {
    foo: string;
}

Aquí type Fooyinterface Foo parece casi similar por lo que es confuso.

interfaceEs contrato que las siguientes propiedades (aquí foo:string) deben estar allí en un objeto. interfaceno lo es class. Se utiliza cuando el idioma no admite herencia múltiple. Entonces interfacepuede ser una estructura común entre diferentes clases.

class Bar implements Foo {
    foo: string;
}

let p: Foo = { foo: 'a string' };

Pero typey interfacese utilizan en contextos muy diferentes.

let foo: Foo;
let today: Date = new Date();

Aquí typede fooes Fooy todayes Date. Es como una declinación variable que contiene la información del tipo de otra variable. typees como un superconjunto de interfaces, clases, firmas de funciones, otros tipos o incluso valores (como type mood = 'Good' | 'Bad'). Al final se typedescribe la posible estructura o valor de una variable.

amit77309
fuente
4

Es incorrecto decir "Se pueden implementar interfaces", ya que también se pueden implementar tipos

type A = { a: string };


class Test implements A {

    a: string;
}

Aunque puede hacer esto, no puede implementar un tipo que sea una Unión de tipos, lo cual tiene mucho sentido honestamente :)

Dan
fuente
4

type en el mecanografiado se utiliza para hacer referencia a tipos ya existentes . No se puede extender como interface. Ejemplos de typeson:

type Money = number;
type FormElem = React.FormEvent<HTMLFormElement>;
type Person = [string, number, number];

puede usar Rest y Spread en tipos:

type Scores = [string, ...number[]];
let ganeshScore = ["Ganesh", 10, 20, 30]
let binodScore = ["Binod", 10, 20, 30, 40]

La interfaz, por otro lado, le permite crear un NUEVO TIPO.

interface Person{
  name: string,
  age: number, 
}

Interface can be extended with extends keyword.
interface Todo{
  text: string;
  complete: boolean;
}

type Tags = [string, string, string]

interface TaggedTodo extends Todo{
 tags: Tags
}
udeep shrestha
fuente