Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Typescript5.4の新機能

rakus frontend
April 21, 2024
190

 Typescript5.4の新機能

rakus frontend

April 21, 2024
Tweet

Transcript

  1. 型の絞り込み 5.4以前 function getUrls(url: string | URL, names: string[]) {

    if (typeof url === "string") { url = new URL(url); } return names.map(name => { // if (typeof url === "string") return; url.searchParams.set("name", name); return url.toString(); }); } 関数クロージャ内で型情報が 保持されなかった 関数内でもう一度型情報 を絞り込む必要がなくなっ た
  2. 型の絞り込み 注意点 function printValueLater(value: string | undefined) { // ここで呼び出すことが可能

    // toUpperCaseFn(); if (value === undefined) { value = "missing!"; } function toUpperCaseFn() { // エラーが発生する console.log(value.toUpperCase()); } // エラーは発生しない const toUpperCaseFn2 = () => console.log(value.toUpperCase()); } functionで関数宣言をした場 合、ホイスティングができるた め、型情報は保持されない
  3. NoInfer ・5.4から新しく追加されたユーティリティ型 ・不要な型推論をブロックすることができる function createStreetLight<C extends string>(colors: C[], defaultColor?: C)

    { // ... } // blueはcolorsの配列に含まれていないのにエラーにならない createStreetLight(["red", "yellow", "green"], "blue"); // defaultColorからCが推論されるのを防ぐ function createStreetLight<C extends string>(colors: C[], defaultColor?: NoInfer<C>) { // ... }