TypeScriptのクロージャで型エ ラーにハマった話

TypeScriptのクロージャで型エラーにハマった話です。

Transcript

1. TypeScriptのクロージャで型エ ラーにハマった話 Yukihiro Uejo
2. 自己紹介 • 自己紹介 ◦ エンジニア職への就職（アプリのバックエンド）を目指して、日々勉強中です。 経験者と初心者の中間くらいだと思ってます。（実務２年 →個人開発３年） ▪ 実務２年では、主にJavaとSQLで管理会計のWEBアプリを開発 ▪ 個人開発では、主にセキュリティと VPSでオンプレっぽくインフラを勉強して いました。 ◦ Pythonでバックエンドの開発をやってます。 ▪ 最近はNext.jsとTypeScriptでフロントの開発もしています。 2
3. クロージャとは “クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシ カル環境）への参照の組み合わせです。言い換えれば、クロージャは内側の関数 から外側の関数スコープへのアクセスを提供します。JavaScript では、関数 が作成されるたびにクロージャが作成されます。” クロージャ https://developer.mozilla.org/ja/docs/Web/JavaScript/Closure s mdn web docsから引用
4. つまり • これはクロージャではなく const foo = () => { console.log(“Hello”) } • これはクロージャ let bar = “Hello” const foo = () => { console.log(bar) }
5. Array.prototype.map()でも同じことが言える • これはクロージャではなく [1, 2, 3].map((value)=> {return value + 1}) • これはクロージャ let bar = 1 [1, 2, 3].map((value)=> {return value + bar})
6. ところで
7. Reactでは以下のような処理がよくある • Web APIでデータを取ってきて、データが取れてきている場合、取ってきた データを使ってmap()の中でReact.Nodeに変換する処理。 • TypeScirptになれていない自分は、↑のmap()の関数内で起こる型エラー にハマってしまった。 • retunする前に、データがundefinedでないことをチェックしているのに、 なぜ型エラーが起きる？
8. サンプルコード
9. // 2分の１の確率でundefinedが入る let foo: undefined | string = ["ABC", undefined][Math.floor(Math.random() * 2)] // ここではエラーが発生する foo.substring(1) if (foo !== undefined) { // ここではエラーが発生しない foo.substring(1) } if (foo !== undefined) { [1, 2, 3].map((value) => { // ここではエラーが発生する foo.substring(value) }) }
10. 結果からいうと • クロージャの中で型のチェックをする必要があった。
11. エラーが生じた理由 • map()だとしっくりこなかったが、以下のような変数の関数の代入だと理由がはっきりわか る。 let foo: string | undefined = 1 const bar = () => { foo.substring(1) } • barが実際に呼ばれるタイミングでは fooがundefinedになっている可能性は十分に考えら れるため、TypeScriptはfooの型をstringに確定することができない。 （というか多分TypeScript独自の挙動ではない）
12. まとめ • クロージャは内側の関数から外側の関数スコープへのアクセスできるもの。 • 外側の変数を内側の関数で参照する場合、外側で確定させた型は内側の関数 では利用できない。 • そのため、必要であればクロージャの中で型を確定させる必要がある。