$30 off During Our Annual Pro Sale. View Details »

TypeScript 4.9のas const satisfiesが便利

TypeScript 4.9のas const satisfiesが便利

今日開催の「TechFeed Experts Night#11 〜 JavaScript/TypeScript最前線」で発表した資料です。

https://techfeed.io/events/techfeed-experts-night-11

Zennの記事はこちら
https://zenn.dev/moneyforward/articles/typescript-as-const-satisfies

tonkotsuboy_com

January 18, 2023
Tweet

More Decks by tonkotsuboy_com

Other Decks in Programming

Transcript

  1. satisfiesͷಈ࡞ type Person = { age: number name: string }

    const myPerson = { age: 18, name: ["ラーメン", "うどん"] } satisfies Person; type Person = { age: number name: string } const myPerson = { age: 18, name: "千賀" } satisfies Person; OBNF͕TUSJOH͡Όͳ͍ͷͰ/( 0,
  2. ܕ஫ऍͱsatisfies type MyType = { foo: string; }; // 型注釈

    const object1: MyType = { foo: "HELLO", }; // satisfies const object2 = { foo: "HELLO", } satisfies MyType;
  3. ܕ஫ऍͷ৔߹ DPMPS-JTUHSFFO͸VOLOPXOͳͷͰɺ഑ྻͷNBQ ؔ਺͸࢖͑ͳ͍ type ColorList = { [key in "red"

    | "green" | "blue"]: unknown; }; const colorList: ColorList = { red: "#ff0000", green: [0, 255, 0], blue: "#00ffff", }; // unknownなのでNG colorList.green.map((value) => value * 2);
  4. satisfiesͷ৔߹ DPMPS-JTUHSFFO͸OVNCFS<>ʹਪ࿦͞ΕΔͷͰɺ഑ྻͷNBQ ؔ਺͕࢖͑Δ type ColorList = { [key in "red"

    | "green" | "blue"]: unknown; }; const colorList = { red: "#ff0000", green: [0, 255, 0], blue: "#00ffff", } satisfies ColorList; // number[]なのでOK colorList.green.map((value) => value * 2);
  5. widening: Ϧςϥϧܕ͕ϓϦϛςΟϒܕʹ֦େ // "ラーメン"型 const food: "ラーメン" = "ラーメン"; //

    「20」型 const age: 20 = 20; // 推論結果は"⽥中"型 const name = "⽥中"; // 推論結果はtrue型 const isValid = true; ϓϦϛςΟϒܕ // string型 const food: string = "ラーメン"; // number型 const age: number = age; // 推論結果はstring型 let name = "⽥中"; Ϧςϥϧܕ
  6. ഑ྻͷwidening // 推論結果は string[] const myArray = [ "ラーメン", "うどん",

    "梅が枝餅" ]; // 値の書き換えができる myArray[0] = "モツ鍋"; NZ"SSBZ͸<ϥʔϝϯ ͏ͲΜ ക͕ࢬṷ>Ͱ͸ͳ͘ɺTUSJOH<>ʹਪ࿦͞ΕΔ
  7. ΦϒδΣΫτͷwidening // 推論結果 {age: number, name: string} const myObject =

    { age: 18, name: "⽥中", }; // 値の書き換えができる myObject.age = 30; NZ0CKFDU͸\BHF OBNFాத^Ͱ͸ͳ͘ɺ 
 \BHFOVNCFS OBNFTUSJOH^ʹਪ࿦͞ΕΔ
  8. wideningͷ๷ࢭ // nameの推論結果は"⽥中"型 const name = "⽥中" as const; //

    name2の推論結果も"⽥中"型 let name2 = name; MFUએݴͨ͠OBNF΋ాதܕʹͳΔ
  9. ഑ྻͷwidening๷ࢭ + readonlyԽ // 推論結果は // ["ラーメン", "うどん", "梅が枝餅"] const

    myArray = [ "ラーメン", "うどん", "梅が枝餅" ] as const; // 書き換え不可能 myArray[0] = "モツ鍋"; NZ"SSBZ͸λϓϧͷ <ϥʔϝϯ ͏ͲΜ ക͕ࢬṷ>ʹਪ࿦͞ΕΔ
  10. ΦϒδΣΫτͷwidening๷ࢭ // 推論結果は {age: 18, name: "⽥中"} const myObject =

    { age: 18, name: "⽥中", } as const; // 書き換え不可能 myObject.age = 30; NZ0CKFDU͸\BHF OBNFాத^ʹਪ࿦͞ΕΔ
  11. as const satisfiesͷαϯϓϧ type Person = { age: number; name:

    string; tags: string[]; }; 1FSTPOܕʹϚον͢ΔΦϒδΣΫτΛ࡞Δ
  12. BTDPOTUͳ͠ˠXJEFOJOH๷ࢭ❌ TBUJT fi FTͳ͠ˠܕνΣοΫ❌ type Person = { age: number;

    name: string; }; export const myPerson = { age: "⼆⼗歳", name: "⽥中", };
  13. BTDPOTU͋ΓˠXJEFOJOH๷ࢭ⭕ TBUJT fi FTͳ͠ˠܕνΣοΫ❌ type Person = { age: number;

    name: string; }; export const myPerson = { age: "⼆⼗歳", name: "⽥中", } as const;
  14. BTDPOTU͋ΓˠXJEFOJOH๷ࢭ⭕ TBUJT fi FTͳ͠ˠܕνΣοΫ❌ *%&ͷਪ࿦݁Ռදࣔɻ XJEFOJOH๷ࢭ SFBEPOMZ👍 type Person =

    { age: number; name: string; }; export const myPerson = { age: "⼆⼗歳", name: "⽥中", } as const; OVNCFSܕ͕ೖΔ΂͖͕ͩɺ ܕνΣοΫͰ͖͍ͯͳ͍👎
  15. BTDPOTUͳ͠ˠXJEFOJOH๷ࢭ❌ TBUJT fi FT͋ΓˠܕνΣοΫ⭕ type Person = { age: number;

    name: string; }; export const myPerson = { age: "⼆⼗歳", name: "⽥中", } satisfies Person;
  16. type Person = { age: number; name: string; }; export

    const myPerson = { age: "⼆⼗歳", name: "⽥中", } satisfies Person; BTDPOTUͳ͠ˠXJEFOJOH๷ࢭ❌ TBUJT fi FT͋ΓˠܕνΣοΫ⭕ *%&ͷਪ࿦݁Ռදࣔɻ XJEFOJOH͍ͯ͠Δ👎 OVNCFSܕ͕ೖΔ΂͖ՕॴΛ ܕνΣοΫ͍ͯ͠Δ👍
  17. BTDPOTU͋ΓˠXJEFOJOH๷ࢭ⭕ TBUJT fi FT͋ΓˠܕνΣοΫ⭕ type Person = { age: number;

    name: string; }; export const myPerson = { age: "⼆⼗歳", name: "⽥中", } as const satisfies Person;
  18. type Person = { age: number; name: string; }; export

    const myPerson = { age: "⼆⼗歳", name: "⽥中", } as const satisfies Person; BTDPOTU͋ΓˠXJEFOJOH๷ࢭ⭕ TBUJT fi FT͋ΓˠܕνΣοΫ⭕ *%&ͷਪ࿦݁Ռදࣔɻ XJEFOJOH๷ࢭ SFBEPOMZ👍 OVNCFSܕ͕ೖΔ΂͖ՕॴΛ ܕνΣοΫ͍ͯ͠Δ👍
  19. BTDPOTU͋ΓˠXJEFOJOH๷ࢭ⭕ TBUJT fi FT͋ΓˠܕνΣοΫ⭕ type Person = { age: number;

    name: string; }; export const myPerson = { age: 20, name: "⽥中", } as const satisfies Person; मਖ਼ͨ͠ΦϒδΣΫτͰͷ *%&ਪ࿦݁Ռ
  20. URLͷҰཡΛ؅ཧ export const urlList = { apple: "https://www.apple.com/jp/", google: "https://www.google.com/",

    yahoo: "https://www.yahoo.co.jp/", } as const satisfies { // 値は https:// で始まるURLに限定する [key: string]: `https://${string}`; };
  21. Χϥʔίʔυͷྻڍ export const color = { apple: "#65AB51", black: "#000",

    // 中略 white: "#FFFFFF", whiteSmoke: "#F7F7F7", } as const satisfies { [key: string]: `#${string}`; };
  22. εςʔλεͷ഑ྻ export const statusList = [ { status: "processing", title:

    "作業中" }, { status: "cancel", title: "キャンセル" }, { status: "completed", title: "完了" }, ] as const satisfies readonly { status: string; title: string; }[];
  23. ઃఆϑΝΠϧ export const config = { target: "es2021", cache: {

    type: "filesystem", }, output: { asyncChunks: true, folder: "dist", }, } as const satisfies MyConfig;