第3回 TypeScriptを使おう

第3回 TypeScriptを使おう～分からないなら書け～らり

突然ですが、問題ですこちらのオブジェクト、変数aとbには型がついてませんが、受け入れる側で型を準備しているため、型エラーが発生していますこれのような書き方はいいでしょうか、悪いでしょうか

答え型の宣言は、値の宣言をした時に当てましょう JSの仕様を知らないと、cのようなコードを書いてしまうしかし、変数宣言で型をちゃんとつけてないため、なんのエラーも出ないもし型推論に頼ってる方がいれば、JSを完全に理解している人か、TypeScriptを知らない人(過激)

型推論型を明示的に宣言してないと、型を勝手に推論してつけてくれる constとletでは、推論結果が異なるただ、明示的に型を宣言すれば、気にする必要はない

関数の型の宣言足し算関数を例にして、説明します最終目的としては、数値、もしくは数値の文字列が来た時に、足し算をして返す関数を作ります

関数の型の宣言まず、普通に関数を用意する JavaScriptではなんら問題ないが、TypeScriptでは型のエラーがでる特に、引数は型推論を行うことができないため、明示的に型を定義する必要がある

関数の型の宣言引数に型をつけた関数の返り値はreturnで書かれた型を推論して提供してくれる

関数の型の宣言(寄り道) 返り値の型を宣言していないと、returnしているものの、型が間違っているかが分からない場面がある多くの場合は必要ないが、宣言しておいた方がミスは確実に減る eslintで強制可能 https://typescript-eslint.io/rules/explicit-function-return-typ e/

関数の型の宣言 stringも扱いたいので、ジェネリクスを用いるアロー関数の場合、JSXのコンポーネントの書き方になるので、「,」をつけることで解決する https://github.com/microsoft/TypeScript/issues/15713

関数の型の宣言ジェネリクスに何も宣言していない場合、型推論されたものが勝手に入る今回であれば、引数bの型がTに入るため、bとcの型が同じでないとエラーが出る https://github.com/microsoft/TypeScript/issues/15713

関数の型の宣言(寄り道) 関数を呼び出す時の、型引数の呼び出し方はこう複数ある場合はコンマで区切る(普通の引数の呼び出し方と一緒)

関数の型の宣言(寄り道) xとyは型を指定してないが、xの方は第一引数と同じ型でないとエラーが出る a,bとc,dは一見同じように見えるが、前者は配列が生成された時、後者は値が代入される時に型のチェックが行われるため、変数に入れる前に他に処理を書きたい場合は前者の配列の作り方の方が好ましい

関数の型の宣言 extendsを用いて、入る型を制限するこれにより、Tが入る型に制約が出来たので、エラーもきちんと出るようになった

関数の型の宣言片方が数字、もう片方が文字列でも行えるようにしたこれにより、add関数の型指定が出来たあとは中でNaNを確認したりしたらちゃんとしたadd関数ができる

関数の型の宣言 functionを使った場合書き方にほぼ変わった部分はない

関数型関数に型注釈を行うことで、型をつけることができるこれにより、返り値の型が間違えていた時に気づける

関数型関数の型は、呼び出し方が2パターンある何も分からない内は全てアロー関数で定義しておけばよい(thisの問題) 上(Props1)は省略記法、下(Props2)は完全記法と呼ばれたりする https://typescriptbook.jp/reference/functions/function-type-declaration

関数型 Propsで定義しているものは、あくまで引数での関数の型の定義のみそのため、引数に入れている関数の引数(aの引数)が何も入っていなくてもエラーにはならない(ここはjsの話)

ちゃんと関数理解してる? アロー関数は後発機能が追加された訳ではなく、いらない機能を抜いたもの詳しい話場面によっては、functionを一切定義しない方がよかったりもするこれはプロジェクトメンバーと要相談 https://typescriptbook.jp/reference/functions/function-expression-vs-arrow-functions

ちゃんと関数理解してる? アロー関数は再宣言できない普通の関数はオーバーライドの機能があるため、再宣言出来るそのため、関数の型を宣言する場合はアロー関数で書いた方がミスが減る

関数の返り値の型を抜き取る ReturnTypeというUtils Typesを用いるこれにより、定義した関数の返り値の型を抜き取ることができるため、同じ型を再定義するようなことをしなくていい

関数の返り値の型を抜き取るまた、定義した時の型が取れるため、関数の型引数を使用することによって、得れる型も変わってくるそのため、前に型引数を使用して関数を定義しておくと、型も取りやすくなる

関数の引数の値の型を抜き取る引数はParametersを用いる返ってくる値は配列なので、引数の順番が大事になる

void型関数の返り値の型がundefinedならば、undefinedが返ってくるという意味 voidは値を使用しないという意味とりあえず何も返したくない時はvoidを書いとけばよい https://typescriptbook.jp/reference/functions/void-type

void型ただ、関数型(アロー関数のやつ)だと、voidでも何が返っても型エラーが出ない functionなら出るまた、返り値がundefinedの時にreturnを書いていないとエラーが出る v5.1からは出ない https://typescriptbook.jp/reference/functions/void-type

void型こんな危険なことができるただ、何かこの値に処理をかけようとした際に型エラーが出るため、そこまで重要ではない

課題課題1 なぜこれのadd2がエラーになるかを答えてください

第3回 TypeScriptを使おう

第3回 TypeScriptを使おう

akatsuki1910

More Decks by akatsuki1910

Featured

Transcript