第3回 TypeScriptを使おう

Transcript

1. 第3回 TypeScriptを使おう ～分からないなら書け～ らり
2. 突然ですが、問題です こちらのオブジェクト、変数aとbには型がついてませんが、受け入 れる側で型を準備しているため、型エラーが発生しています これのような書き方はいいでしょうか、悪いでしょうか
3. 答え 型の宣言は、値の宣言をした時に当てましょう JSの仕様を知らないと、cのようなコードを書いてしまう しかし、変数宣言で型をちゃんとつけてないため、なん のエラーも出ない もし型推論に頼ってる方がいれば、JSを完全に理解して いる人か、TypeScriptを知らない人(過激)
4. 型推論 型を明示的に宣言してないと、型を勝手に推論してつけてくれる constとletでは、推論結果が異なる ただ、明示的に型を宣言すれば、気にする必要はない
5. 関数の型の宣言 足し算関数を例にして、説明します 最終目的としては、数値、もしくは数値の文字列が来た時に、足し算をして返す関数を 作ります
6. 関数の型の宣言 まず、普通に関数を用意する JavaScriptではなんら問題ないが、TypeScriptでは型のエラーがでる 特に、引数は型推論を行うことができないため、明示的に型を定義する必要がある
7. 関数の型の宣言 引数に型をつけた 関数の返り値はreturnで書かれた型を推論して提供してくれる
8. 関数の型の宣言(寄り道) 返り値の型を宣言していないと、returnして いるものの、型が間違っているかが分から ない場面がある 多くの場合は必要ないが、宣言しておいた 方がミスは確実に減る eslintで強制可能 https://typescript-eslint.io/rules/explicit-function-return-typ e/
9. 関数の型の宣言 stringも扱いたいので、ジェネリクスを用いる アロー関数の場合、JSXのコンポーネントの書き方になるので、「,」をつけることで解決 する https://github.com/microsoft/TypeScript/issues/15713
10. 関数の型の宣言 ジェネリクスに何も宣言していない場合、型推論されたものが勝手に入る 今回であれば、引数bの型がTに入るため、bとcの型が同じでないとエラーが出る https://github.com/microsoft/TypeScript/issues/15713
11. 関数の型の宣言(寄り道) 関数を呼び出す時の、型引数の呼び出し方はこう 複数ある場合はコンマで区切る(普通の引数の呼び出し方と一緒)
12. 関数の型の宣言(寄り道) xとyは型を指定してないが、xの方は第一引数と同じ型でないとエラーが出る a,bとc,dは一見同じように見えるが、前者は配列が生成された時、後者は値が代入され る時に型のチェックが行われるため、変数に入れる前に他に処理を書きたい場合は前 者の配列の作り方の方が好ましい
13. 関数の型の宣言 extendsを用いて、入る型を制限する これにより、Tが入る型に制約が出来たので、エラーもきちんと出るようになった
14. 関数の型の宣言 片方が数字、もう片方が文字列でも行えるようにした これにより、add関数の型指定が出来た あとは中でNaNを確認したりしたらちゃんとしたadd関数ができる
15. 関数の型の宣言 functionを使った場合 書き方にほぼ変わった部分はない
16. 関数型 関数に型注釈を行うことで、型をつけることができる これにより、返り値の型が間違えていた時に気づける
17. 関数型 関数の型は、呼び出し方が2パターンある 何も分からない内は全てアロー関数で定義しておけばよ い(thisの問題) 上(Props1)は省略記法、下(Props2)は完全記法と呼ばれ たりする https://typescriptbook.jp/reference/functions/function-type-declaration
18. 関数型 Propsで定義しているものは、あくまで引数での関数の型 の定義のみ そのため、引数に入れている関数の引数(aの引数)が何も 入っていなくてもエラーにはならない(ここはjsの話)
19. ちゃんと関数理解してる? アロー関数は後発 機能が追加された訳ではなく、いらない機能を抜いたもの 詳しい話 場面によっては、functionを一切定義しない方がよかったりもする これはプロジェクトメンバーと要相談 https://typescriptbook.jp/reference/functions/function-expression-vs-arrow-functions
20. ちゃんと関数理解してる? アロー関数は再宣言できない 普通の関数はオーバーライドの機能があるため、再宣言出来る そのため、関数の型を宣言する場合はアロー関数で書いた方がミスが減る
21. 関数の返り値の型を抜き取る ReturnTypeというUtils Typesを用いる これにより、定義した関数の返り値の型を抜き取ることができるため、同じ型を再定義す るようなことをしなくていい
22. 関数の返り値の型を抜き取る また、定義した時の型が取れるため、関数の型引数を使用することによって、得れる型 も変わってくる そのため、前に型引数を使用して関数を定義しておくと、型も取りやすくなる
23. 関数の引数の値の型を抜き取る 引数はParametersを用いる 返ってくる値は配列なので、引数の順番が大事になる
24. void型 関数の返り値の型がundefinedならば、undefinedが返ってくるという意味 voidは値を使用しないという意味 とりあえず何も返したくない時はvoidを書いとけばよい https://typescriptbook.jp/reference/functions/void-type
25. void型 ただ、関数型(アロー関数のやつ)だと、voidでも何が返っても型エラーが出ない functionなら出る また、返り値がundefinedの時にreturnを書いていないとエラーが出る v5.1からは出ない https://typescriptbook.jp/reference/functions/void-type
26. void型 こんな危険なことができる ただ、何かこの値に処理をかけようとした際に型エラーが出るため、そこまで重要ではな い
27. 課題 課題1 なぜこれのadd2がエラーになるかを答えてください