Em Typescript, qual é a diferença entre tipo e interface?

114

Quais são as diferenças entre o seguinte?

type Foo = { 
    foo: string 
};
interface Foo {
   foo: string;
}
Martiansnoop
fonte
3
tipo não pode ser estendido como extensão de interface. tipos são apenas apelidos para um tipo.
PSL
4
Orientação disponível aqui: basarat.gitbooks.io/typescript/content/docs/types/…
basarat
2
Eu uso principalmente o tipo para dados externos, por exemplo, de um arquivo JSON, ou se você estiver apenas escrevendo funções sem usar classes OOP.
Kokodoko de
1
Achei este artigo útil que explica as diferenças - medium.com/@martin_hotell/…
Sandeep GB
1
A resposta aceita está desatualizada. Explicação atualizada postada aqui (já que esse tópico parece ser preferido pelo Google): stackoverflow.com/questions/37233735/…
jabacchetta

Respostas:

125

As interfaces podem ser estendidas

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

e também aumentado

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

Aliases de tipo, no entanto, podem representar algumas coisas que as interfaces não podem

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

Portanto, em geral, se você tiver apenas um tipo de objeto simples, conforme mostrado em sua pergunta, uma interface geralmente é uma abordagem melhor. Se você deseja escrever algo que não pode ser escrito como uma interface, ou deseja apenas dar um nome diferente a algo, um alias de tipo é melhor.

Ryan Cavanaugh
fonte
3
Type aliases, however, can represent some things interfaces can'tParece-me seus exemplos NeatAndCoole JustSomeOtherNamepodem ser criados como interfaces que estendem os existentes Neat, Coolou SomeTypetipos.
Rudey,
Na verdade, o segundo e o terceiro exemplos podem ser criados com uma interface:interface NeatAndCool extends Neat, Cool {} interface JustSomeOtherName extends SomeType {}
peterjwest
3
A extensão de duas interfaces nem sempre produzirá o mesmo resultado que um tipo de interseção, e nem todos os tipos podem ser estendidos (enquanto todos os tipos podem ter aliases ou colocados em uniões / interseções)
Ryan Cavanaugh
1
Então, qual é a vantagem do tipo? Podemos dizer que quando temos interface, o tipo não é útil?
Mostafa Saadatnia
4

Além disso, uma interface pode ser implementada .

Dave Ford
fonte
1
E um objeto pode implementar várias interfacesclass Thing implements Neat, Cool
Kokodoko
1
o que você quer dizer ? também o tipo pode ser implementado
nadav
3
Isso deve ser um comentário, não uma resposta.
Michael Kunst
Caro Dave, você deve deixar um comentário, não uma resposta. Também com base nessa resposta, sua resposta não está exatamente certa.
Mehrdad88sh
4

Tipos é mais ou menos como Interfaces e vice-versa: ambos podem ser implementados por uma classe. mas existem algumas diferenças importantes: 1. quando Type é implementado por uma classe, as propriedades que pertencem ao Type devem ser inicializadas dentro da classe, enquanto com Interface elas devem ser declaradas. 2. como @ryan mencionou: A interface pode estender outra interface. Tipos não podem.

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
fonte
4

As diferenças entre estes também já estão neste tópico.

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

Aqui type Fooe interface Fooparece quase semelhante, por isso é confuso.

interfaceÉ um contrato que as seguintes propriedades (aqui foo:string) devem estar lá em um objeto. interfacenão é class. É usado quando o idioma não oferece suporte à herança múltipla. Portanto, interfacepode haver uma estrutura comum entre diferentes classes.

class Bar implements Foo {
    foo: string;
}

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

Mas typee interfacesão usados ​​em contextos muito diferentes.

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

Aqui typede fooé Fooe todayé Date. É como uma eliminação de variável que contém a informação do tipo de outra variável. typeé como um superconjunto de interfaces, classes, assinatura de função, outros tipos ou mesmo valores (como type mood = 'Good' | 'Bad'). No final typedescreve a possível estrutura ou valor de uma variável.

amit77309
fonte
4

É errado dizer "As interfaces podem ser implementadas", pois os tipos também podem ser implementados

type A = { a: string };


class Test implements A {

    a: string;
}

Embora você possa fazer isso, você não pode implementar um tipo que seja uma união de tipos, o que faz totalmente sentido, honestamente :)

Dan
fonte
4

type no typescript é usado para fazer referência a tiposexistentes . Não pode ser estendido como interface. Exemplos de typesão:

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

você pode usar os tipos Rest e Spread:

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

A interface, por outro lado, permite que você crie um NOVO 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
fonte