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
220
Typescript5.4の新機能
rakus frontend
April 21, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
28
ErrorBoundaryとSuspenseの導入検討
rakus_fe
0
380
日付をもう少し真面目に勉強中
rakus_fe
0
21
React19 β をざっと見る
rakus_fe
0
250
Reactのパフォーマンス改善例
rakus_fe
0
370
非破壊的な配列メソッド
rakus_fe
0
280
ココがすごいぜ!Playwright Component Test
rakus_fe
0
360
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
160
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
93
13k
The Cost Of JavaScript in 2023
addyosmani
43
5.9k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Pragmatic Product Professional
lauravandoore
31
6.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Unsuck your backbone
ammeep
668
57k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
YesSQL, Process and Tooling at Scale
rocio
167
14k
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→いまいち使い所が思いつかなかった… ・型の絞り込み→役立つが場面ができてきそうだと思った