Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Typescript5.4の新機能
Search
rakus frontend
April 21, 2024
0
290
Typescript5.4の新機能
rakus frontend
April 21, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
47
ErrorBoundaryとSuspenseの導入検討
rakus_fe
1
730
日付をもう少し真面目に勉強中
rakus_fe
0
42
React19 β をざっと見る
rakus_fe
0
310
Reactのパフォーマンス改善例
rakus_fe
0
500
非破壊的な配列メソッド
rakus_fe
0
340
ココがすごいぜ!Playwright Component Test
rakus_fe
0
520
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
240
Featured
See All Featured
Designing for Performance
lara
610
69k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Building Adaptive Systems
keathley
43
2.7k
Documentation Writing (for coders)
carmenintech
74
5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Being A Developer After 40
akosma
90
590k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Agile that works and the tools we love
rasmusluckow
330
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Become a Pro
speakerdeck
PRO
29
5.5k
Transcript
TypeScript5.4の新機能 村山陽亮
型の絞り込み 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(); }); } 関数クロージャ内で型情報が 保持されなかった 関数内でもう一度型情報 を絞り込む必要がなくなっ た
型の絞り込み 注意点 function printValueLater(value: string | undefined) { // ここで呼び出すことが可能
// toUpperCaseFn(); if (value === undefined) { value = "missing!"; } function toUpperCaseFn() { // エラーが発生する console.log(value.toUpperCase()); } // エラーは発生しない const toUpperCaseFn2 = () => console.log(value.toUpperCase()); } functionで関数宣言をした場 合、ホイスティングができるた め、型情報は保持されない
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>) { // ... }
まとめ ・NoInfer→いまいち使い所が思いつかなかった… ・型の絞り込み→役立つが場面ができてきそうだと思った