TypeScript4.0はついに私が待ち望んでいたものを手に入れました

今年の8月6日、MicrosoftはTypeScript4.0リリース候補のリリースを発表しました。ラベル付きタプル要素のサポートがあります。そして、これはまさに私がTypeScriptで待っていたものです。





上部には、意味のあるラベルが割り当てられた引数があります。以下は役に立たない名前の引数ですが、



なぜ私はこれを待っていたのですか?関数開発の例を使って説明しましょう。



柔軟な引数処理をサポートする一般化されたインターフェイス



簡単な例を次に示します。これは、インターフェイスの使用に基づいていますIQueryこのインターフェースは、何かを取得するための要求を実行する関数の特性を説明することを目的としています。常にpromiseを返し、promise(が返すものを説明するジェネリック受け入れますTReturnこのインターフェイスは非常に柔軟性があり、引数をとらない関数や、不明な数の引数をとる関数を作成するときに使用できます(UParams extends any[] = [])。



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


テスト中の関数:findSongAlbum()



このインターフェースを使用して、曲名(title)とアーティスト(artistで音楽アルバムを検索する関数を作成します次のタイプの単一のオブジェクトを返すpromiseを返しますAlbum



type Album = {
  title: string
}


TypeScriptがない場合、このような関数のコードは次のようになります。



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


TypeScriptでそのような関数を記述し、インターフェイスを使用する場合はIQuery、最初の汎用パラメーターとして型を渡す必要がありますAlbumこれにより、promiseが返すものの形状が常にタイプと一致することが保証されますAlbum



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


TypeScript4.0より前に記述されたコード



関数を開発するときは、パラメーターを宣言し、それらのタイプを示す必要もあります。この場合、titleおよびartist文字列です。新しいタイプを宣言し、Paramsそれをの2番目のタイプとして渡しIQueryます。



TypeScript 4.0の新機能を使用せずに記述された例ではParams、タイプのリストで表されます。このリストの各要素は、引数のタイプを定義します。これは、関数が宣言されたときに引数が表示されるのと同じ順序で実行されます。これはタプルの使用例です



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


タイプを分析することによりParams、その最初の要素string、がタイプをstring最初の引数、つまり-に割り当てていることがわかりますtitle。 2番目の引数はstring、当然のことながら、同じ推論の行に従って、string2番目の引数に型を割り当てます- artist。これにより、引数リストタイプが安全になります。



この関数を使ってみましょう。





findSongAlbum()のヒントは、意味のない引数ラベルを表示します



。残念ながら、タプルを使用するこのアプローチでは、関数を操作するときに有用で信頼できるコード引数名​​(ラベル)が得られません。代わりに、関数の引数は次のようになります。args_0: string, args_1: string..。この投稿から、たとえば、最初の引数はタイプでなければならないことしかわかりませんstringラベルにarg_0は、関数の最初のパラメーターが、title探している楽曲の名前()である必要があることが示されていません



TypeScript4.0の機能を活用するコード



現在、TypeScript 4.0リリース候補のリリースに伴い、自由に使用できるタプルにラベルを付けました。それらを使用して、タイプだけでなく、関数パラメーターリストのセマンティックコンテンツも記述することができます。



これで、タイプの各要素にParams、関数を使用するときにIDEに表示されるラベルが提供されますfindSongAlbum



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


そして、これがこの関数での作業の様子です。





findSongAlbum()表示引数のラベルのためのヒントは、私たちは非常に便利であるこれらの引数の意味を理解するのに役立ちます。



あなたは今、見ることができるように、代わりにビューのヒントを、arg_0: string私たちはヒントを与えていますtitle: stringこれは、関数に文字列を渡す必要があるだけでなく、この文字列に正確に何を含める必要があるかがわかったことを意味します。



TypeScriptで特に欠けているものは何ですか?






All Articles