Di Typecript, apa perbedaan antara type dan interface?

114

Apa perbedaan antara berikut ini?

type Foo = { 
    foo: string 
};
interface Foo {
   foo: string;
}
martiansnoop
sumber
3
jenis tidak dapat diperpanjang seperti ekstensi antarmuka. jenis hanyalah alias untuk suatu jenis.
PSL
4
Panduan tersedia di sini: basarat.gitbooks.io/typescript/content/docs/types/…
basarat
2
Saya kebanyakan menggunakan tipe untuk data eksternal, misalnya dari file JSON, atau jika Anda hanya menulis fungsi tanpa menggunakan kelas OOP.
Kokodoko
1
Saya menemukan artikel ini bermanfaat yang menjelaskan perbedaan - medium.com/@martin_hotell/…
Sandeep GB
1
Jawaban yang diterima sudah ketinggalan zaman. Penjelasan yang diperbarui diposting di sini (karena utas itu tampaknya disukai oleh Google): stackoverflow.com/questions/37233735/…
jabacchetta

Jawaban:

125

Antarmuka dapat diperpanjang

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

dan juga ditambah

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

Alias ​​tipe, bagaimanapun, dapat mewakili beberapa hal yang tidak dapat dilakukan antarmuka

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

Jadi secara umum jika Anda hanya memiliki tipe objek biasa, seperti yang ditunjukkan dalam pertanyaan Anda, antarmuka biasanya merupakan pendekatan yang lebih baik. Jika Anda mendapati diri Anda ingin menulis sesuatu yang tidak dapat ditulis sebagai antarmuka, atau hanya ingin memberi nama yang berbeda, alias tipe lebih baik.

Ryan Cavanaugh
sumber
3
Type aliases, however, can represent some things interfaces can'tSepertinya saya contoh Anda NeatAndCooldan JustSomeOtherNamedapat dibuat sebagai antarmuka yang memperluas yang ada Neat, Coolatau SomeTypejenis.
Rudey
Memang contoh kedua dan ketiga dapat dibuat dengan antarmuka:interface NeatAndCool extends Neat, Cool {} interface JustSomeOtherName extends SomeType {}
peterjwest
3
Memperluas dua antarmuka tidak akan selalu menghasilkan hasil yang sama sebagai jenis persimpangan, dan tidak semua jenis dapat diperpanjang (sedangkan semua jenis dapat di-alias atau dimasukkan ke dalam persatuan / persimpangan)
Ryan Cavanaugh
1
Jadi apa keuntungan dari tipe? Bisakah kita mengatakan ketika kita memiliki antarmuka, jenisnya tidak berguna?
Mostafa Saadatnia
4

Juga, sebuah antarmuka dapat diimplementasikan .

Dave Ford
sumber
1
Dan sebuah objek dapat mengimplementasikan banyak antarmukaclass Thing implements Neat, Cool
Kokodoko
1
apa yang kamu maksud ? juga Jenis b dapat diimplementasikan
nadav
3
Ini harus menjadi komentar bukan jawaban imo.
Michael Kunst
Dear Dave, Anda harus meninggalkan komentar, bukan jawaban. Juga berdasarkan jawaban ini jawaban Anda tidak sepenuhnya benar.
Mehrdad88sh
4

Tipe seperti Antarmuka dan sebaliknya: keduanya dapat diimplementasikan oleh kelas. tetapi ada beberapa perbedaan penting: 1. ketika Type diimplementasikan oleh sebuah kelas, properti milik Type harus diinisialisasi di dalam kelas, sedangkan dengan Interface mereka harus dideklarasikan. 2. seperti yang disebutkan @ryan: Antarmuka dapat memperluas Antarmuka lain. Tipe tidak bisa.

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

Perbedaan antara ini juga sudah ada di utas ini.

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

Disini type Foodan interface Footampilannya hampir mirip sehingga membingungkan.

interfaceadalah kontrak bahwa properti berikut (di sini foo:string) harus ada di objek. interfacetidak class. Ini digunakan ketika bahasa tidak mendukung Warisan Ganda. Jadi interfacebisa menjadi struktur umum antara kelas yang berbeda.

class Bar implements Foo {
    foo: string;
}

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

Tetapi typedan interfacedigunakan dalam konteks yang sangat berbeda.

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

Ini typedari fooadalah Foodan todayadalah Date. Ini seperti deklerasi variabel yang menyimpan informasi jenis variabel lain. typeseperti superset antar muka, kelas, tanda tangan fungsi, jenis lain atau bahkan nilai (seperti type mood = 'Good' | 'Bad'). Di bagian akhir typemenjelaskan kemungkinan struktur atau nilai variabel.

amit77309
sumber
4

Salah jika mengatakan "Antarmuka dapat diimplementasikan" karena tipe juga dapat diterapkan

type A = { a: string };


class Test implements A {

    a: string;
}

Meskipun Anda dapat melakukan ini, Anda tidak dapat menerapkan tipe yang merupakan gabungan tipe, yang benar-benar masuk akal :)

Dan
sumber
4

tipe di skrip ketikan digunakan untuk mereferensikan tipe yang sudah ada . Itu tidak bisa diperpanjang seperti interface. Contohnya typeadalah:

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

Anda dapat menggunakan Istirahat dan Spread dalam tipe:

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

Antarmuka, di sisi lain, memungkinkan Anda membuat JENIS BARU.

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
sumber