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;
}

3
tipo não pode ser estendido como extensão de interface. tipos são apenas apelidos para um tipo.
— PSL


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.


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 .


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'
}

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.


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 :)


4

type no typescript é usado para fazer referência a tipos já existentes . 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
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.