Penjelasan terperinci tentang antara muka dalam kemahiran TypeScript_javascript

Dalam TypeScript, antara muka digunakan sebagai kekangan Apabila disusun ke dalam JavaScript, semua antara muka akan dipadamkan kerana tiada konsep antara muka dalam JavaScript.

Mari kita lihat contoh mudah:

function printLabel(labelledObj: { label: string }) {
  console.log(labelledObj.label);
}

var myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

Kemudian dalam kaedah ini, jenis labeledObj ialah {label: string}, yang mungkin kelihatan agak rumit, tetapi jika kita melihat pada pengisytiharan myObj di bawah, kita akan tahu bahawa ini adalah pengisytiharan dengan atribut saiz ( nilai ialah 10) dan objek dengan atribut label (nilai "Objek Saiz 10"). Oleh itu, jenis parameter kaedah berlabelObj ialah {label: string}, yang bermaksud bahawa parameter mempunyai atribut label jenis rentetan.

Namun, jika ditulis begini, kaedah ini masih kelihatan agak mengelirukan. Kemudian anda boleh menggunakan antara muka untuk menentukan jenis parameter kaedah ini.

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

var myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

Atribut pilihan
Kadangkala, kita tidak memerlukan atribut untuk wujud, jadi kita boleh menggunakan atribut pilihan untuk mentakrifkannya.

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
  var newSquare = { color: "white", area: 100 };
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

var mySquare = createSquare({ color: "black" });

Kemudian kami memasukkan objek yang melaksanakan antara muka SquareConfig ke dalam kaedah createSquare.

Memandangkan ia boleh diketepikan sepenuhnya, mengapa kita perlu mentakrifkannya? Mentakrifkan sifat pilihan mempunyai dua kelebihan berbanding tidak mentakrifkannya sama sekali. 1. Jika terdapat atribut, jenis boleh dikekang, yang sangat kritikal 2. Anda boleh mendapatkan gesaan sintaks pintar Jika anda tersilap menulis warna dalam badan kaedah sebagai collor, maka kompilasi tidak akan lulus.

Jenis Kaedah

Dalam JavaScript, fungsi kaedah ialah jenis asas. Dalam pemikiran berorientasikan objek, pelaksanaan antara muka dicapai oleh kelas Sebagai jenis, bolehkah berfungsi melaksanakan antara muka? Jawapannya ya.

Dalam TypeScript, kami boleh menggunakan antara muka untuk mengekang tandatangan kaedah.

interface SearchFunc {
 (source: string, subString: string): boolean;
}

var mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
 var result = source.search(subString);
 if (result == -1) {
  return false;
 }
 else {
  return true;
 }
}

Dalam kod di atas, kami mentakrifkan antara muka, yang mengekang tandatangan kaedah ini mempunyai dua parameter rentetan dan mengembalikan nilai Boolean. Dalam sekeping kod kedua kami mengisytiharkan pelaksanaan antara muka ini.

Perlu diingatkan bahawa pengkompil hanya menyemak sama ada jenis itu betul (jenis parameter, jenis nilai pulangan), jadi kita boleh menukar nama parameter kepada sesuatu yang lain.

var mySearch: SearchFunc;
mySearch = function(src: string, sub: string) {
 var result = src.search(sub);
 if (result == -1) {
  return false;
 }
 else {
  return true;
 }
}

Ini juga boleh disusun dan diluluskan.

Jenis tatasusunan
Di atas kami menentukan jenis kaedah dalam antara muka, jadi bagaimanakah jenis tatasusunan harus ditakrifkan? Sangat mudah.

interface StringArray {
 [index: number]: string;
}

var myArray: StringArray;
myArray = ["Bob", "Fred"];

Kemudian myArray ialah tatasusunan, dan pengindeks adalah nombor jenis dan elemen adalah rentetan.

Dalam takrifan antara muka, nama pengindeks secara amnya ialah indeks (sudah tentu ia boleh ditukar kepada sesuatu yang lain, tetapi secara amnya nama itu disimpan sebagai indeks). Jadi tukar kepada

interface StringArray {
 [myIndex: number]: string;
}

var myArray: StringArray;
myArray = ["Bob", "Fred"];

Juga ok.

Perlu diingat bahawa jenis pengindeks hanya boleh menjadi nombor atau rentetan.

interface Array{
  [index: number]: any;
}

interface Dictionary{
  [index: string]: any;
}

Dua perenggan di atas boleh disusun dan diluluskan.

Perkara terakhir yang perlu diambil perhatian ialah jika antara muka sudah menjadi jenis tatasusunan, jenis atribut lain yang ditakrifkan dalam antara muka mestilah jenis elemen tatasusunan. Contohnya:

interface Dictionary {
 [index: string]: string;
 length: number;  // error, the type of 'length' is not a subtype of the indexer
}

Kemudian ia tidak akan disusun, dan panjang perlu ditukar kepada jenis rentetan.

Gunakan kelas untuk melaksanakan antara muka
Dalam keadaan biasa, kami masih terbiasa menggunakan kelas untuk melaksanakan antara muka yang diperlukan, dan bukannya menggunakan antara muka secara langsung seperti di atas.

interface ClockInterface {
  currentTime: Date;
}

class Clock implements ClockInterface {
  currentTime: Date;
  constructor(h: number, m: number) { }
}

Dalam TypeScript, kata kunci kelas digunakan untuk mengisytiharkan, yang sama dengan EcmaScript 6.

Selain itu, kami boleh menggunakan antara muka untuk mengekang kaedah yang ditakrifkan dalam kelas.

interface ClockInterface {
  currentTime: Date;
  setTime(d: Date);
}

class Clock implements ClockInterface {
  currentTime: Date;
  setTime(d: Date) {
    this.currentTime = d;
  }
  constructor(h: number, m: number) { }
}

Dalam TypeScript, kita boleh menentukan pembina untuk antara muka.

interface ClockInterface {
  new (hour: number, minute: number);
}

Jika kami naif, kami mungkin menulis seperti ini:

interface ClockInterface {
  new (hour: number, minute: number);
}

class Clock implements ClockInterface {
  currentTime: Date;
  constructor(h: number, m: number) { }
}

Ini tidak akan berfungsi! ! ! Oleh kerana pembina adalah statik, kelas hanya boleh melaksanakan bahagian contoh antara muka.

Kemudian pembina yang ditakrifkan dalam antara muka ini tidak mempunyai kesan? Memandangkan TypeScript menyediakan fungsi ini, ia pastinya tidak sia-sia. Kaedah yang diisytiharkan agak istimewa:

interface ClockStatic {
  new (hour: number, minute: number);
}

class Clock {
  currentTime: Date;
  constructor(h: number, m: number) { }
}

var cs: ClockStatic = Clock;
var newClock = new cs(7, 30);

Biasanya kami menulis Jam baharu, di sini kami menghalakan kelas Jam ke antara muka ClockStatic. Perlu diingatkan bahawa jenis pembolehubah newClock adalah apa-apa.

Antara muka yang diwarisi
Seperti kelas, antara muka juga boleh melaksanakan warisan, menggunakan kata kunci lanjutan.

interface Shape {
  color: string;
}

interface Square extends Shape {
  sideLength: number;
}

var square = <Square>{};
square.color = "blue";
square.sideLength = 10;

Sudah tentu, berbilang antara muka juga boleh diwarisi.

interface Shape {
  color: string;
}

interface PenStroke {
  penWidth: number;
}

interface Square extends Shape, PenStroke {
  sideLength: number;
}

var square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

Perlu diambil perhatian bahawa walaupun ia disokong untuk mewarisi berbilang antara muka, jika jenis sifat dengan nama yang sama yang ditakrifkan dalam antara muka yang diwarisi adalah berbeza, kompilasi tidak akan lulus.

interface Shape {
  color: string;
  test: number;
}

interface PenStroke {
  penWidth: number;
  test: string;
}

interface Square extends Shape, PenStroke {
  sideLength: number;
}

那么这段代码就无法编译通过了，因为 test 属性的类型无法确定。

同时使用上面所述的类型
如果仅能单一使用某种类型，那么这接口也未免太弱了。但幸运的是，我们的接口很强大。

interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;
}

var c: Counter;
c(10);
c.reset();
c.interval = 5.0;

这样就使用到三种类型了，分别是方法（接口自己是个方法）、属性、方法（定义了方法成员）。

以上所述就是本文的全部内容了，希望大家能够喜欢。