TypeScript 4.0 akhirnya memiliki apa yang saya tunggu-tunggu

Pada 6 Agustus tahun ini, Microsoft mengumumkan rilis kandidat rilis TypeScript 4.0. Ada dukungan untuk Elemen Tuple Berlabel . Dan inilah yang saya tunggu-tunggu di TypeScript.

Di bagian atas adalah argumen yang telah diberi label bermakna. Di bawah ini adalah argumen dengan nama yang tidak berguna.



Mengapa saya menunggu ini? Izinkan saya menjelaskan ini menggunakan contoh mengembangkan fungsi.

Antarmuka umum yang mendukung penanganan argumen yang fleksibel

Berikut contoh yang disederhanakan. Ini didasarkan pada penggunaan antarmuka IQuery. Antarmuka dimaksudkan untuk mendeskripsikan karakteristik fungsi yang melakukan permintaan untuk mendapatkan sesuatu. Itu selalu mengembalikan sebuah janji dan menerima penjelasan umum apa yang janji ( TReturn) kembali . Antarmuka ini cukup fleksibel, Anda dapat menggunakannya saat membuat fungsi yang tidak menggunakan argumen, atau menggunakan argumen dalam jumlah yang tidak diketahui ( UParams extends any[] = []).

interface IQuery<TReturn, UParams extends any[] = []> {
  (...args: UParams): Promise<TReturn>
}

Fungsi yang diuji: findSongAlbum ()

Kami, menggunakan antarmuka ini, akan menulis fungsi yang mencari album musik berdasarkan judul lagu ( title) dan artis ( artist). Ini mengembalikan sebuah janji yang mengembalikan satu objek berjenis Album:

type Album = {
  title: string
}

Tanpa TypeScript, kode untuk fungsi tersebut mungkin terlihat seperti ini:

const findSongAlbum = (title, artist) => {
  //   ...
  
  const albumName = '1989';
  return Promise.resolve({
     title: albumName
  });
}

Jika Anda menulis fungsi seperti itu di TypeScript dan menggunakan antarmuka IQuery, maka jenis tersebut harus diteruskan ke sana sebagai parameter umum pertama Album. Ini memastikan bahwa bentuk dari apa yang dijanjikan akan selalu cocok dengan tipenya Album.

const findSongAlbum: IQuery<Album> = (title, artist) => {
  //   ...
  
  const albumName = '1989';
  return Promise.resolve({
     title: albumName 
  });
}

Kode ditulis sebelum TypeScript 4.0

Saat mengembangkan fungsi kita, kita juga perlu mendeklarasikan parameter dan menunjukkan tipe yang dimilikinya. Dalam hal ini, titledan artistadalah string. Mari nyatakan tipe baru ,, Paramsdan berikan sebagai tipe kedua untuk IQuery.



Dalam contoh, yang ditulis tanpa menggunakan fitur baru TypeScript 4.0, itu Paramsakan diwakili oleh daftar jenis. Setiap elemen dari daftar ini mendefinisikan tipe argumen. Ini dilakukan dengan urutan yang sama di mana argumen muncul saat fungsi dideklarasikan. Ini adalah contoh penggunaan tupel .

type Params: [string, string]
const findSongAlbum: IQuery<Album, Params> = (title, artist) => {
  //   ...
  
  const albumName = '1989';
  return Promise.resolve({
     title: albumName
  });
}

Dengan menganalisis tipe Params, Anda dapat mengetahui bahwa elemen pertamanya string,, menetapkan tipe ke stringargumen pertama, yaitu, - title. Argumen kedua, yang juga terlihat seperti string, secara alami, mengikuti alur penalaran yang sama, memberikan tipe pada stringargumen kedua - artist. Ini akan membuat tipe daftar argumen aman.



Mari kita coba bekerja dengan fungsi ini.





Petunjuk untuk findSongAlbum () menampilkan label argumen yang tidak berarti



. Sayangnya, pendekatan untuk menggunakan tupel ini tidak memberi kita nama argumen kode yang berguna dan dapat diandalkan (label) saat bekerja dengan suatu fungsi. Sebaliknya, kita diberitahu bahwa argumen fungsi tersebut adalahargs_0: string, args_1: string... Dari postingan ini, saya hanya bisa belajar, misalnya, bahwa argumen pertama harus bertipe string. Label arg_0tidak memberi tahu saya bahwa parameter pertama dari fungsi tersebut haruslah nama ( title) dari komposisi musik yang saya cari.

Kode yang memanfaatkan fitur TypeScript 4.0

Sekarang, dengan rilis kandidat rilis TypeScript 4.0, kami telah memberi label tupel yang dapat kami gunakan. Kita bisa menggunakannya untuk mendeskripsikan tidak hanya tipe, tetapi juga konten semantik dari daftar parameter fungsi.



Sekarang setiap elemen tipe Paramsakan diberikan label yang akan ditampilkan di IDE saat menggunakan fungsi findSongAlbum:

type Params: [title: string, artist: string]
const findSongAlbum: IQuery<Album, Params> = (title, artist) => {
  //   ...
  
  const albumName = '1989';
  return Promise.resolve({
     title: albumName
  });
}

Dan berikut adalah tampilannya bekerja dengan fungsi ini.





Petunjuk untuk findSongAlbum () menampilkan label argumen untuk membantu kita memahami arti dari argumen ini, yang sangat berguna.



Seperti yang Anda lihat, sekarang, alih-alih petunjuk tampilan, arg_0: stringkami diberi petunjuk title: string. Ini berarti bahwa kita sekarang tahu tidak hanya bahwa fungsinya perlu diteruskan string, tetapi juga apa sebenarnya isi string ini.



Apa yang sangat Anda lewatkan di TypeScript?