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
130
Typescript5.4の新機能
rakus frontend
April 21, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
非破壊的な配列メソッド
rakus_fe
0
190
ココがすごいぜ!Playwright Component Test
rakus_fe
0
200
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
99
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
The Cult of Friendly URLs
andyhume
74
5.7k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Git: the NoSQL Database
bkeepers
PRO
423
63k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Building Your Own Lightsaber
phodgson
100
5.7k
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→いまいち使い所が思いつかなかった… ・型の絞り込み→役立つが場面ができてきそうだと思った