October Thursday,28th 2021: PM

TypeScript型定義 覚え書き

関数の型

const Index = ({    }:引数の型):返り値の型 => {
ここに自由にhooks書いたりする
return (
 ここの中身が返り値
	)
}

変数宣言の型

let Index:Typeの関数スコープにないのでここに変数の型を直付けする = 1の数字(number)とか"文字列(string)"とか

返り値の型はReact系列だとvoidかJSX.Elementを明示的に付けるくらいしかない。

引数の型はType Propsでいっぱい付けることになる。

変数の型はそのまま型を横に入れるだけ。

通常の型

数字:number

文字列:string

条件分岐:boolean

基本的にこの三つだけ、

これに加えてnumberとstringは配列を受けとる場合[]を付けたりする。

ボトム型

何もない=利用できない:null

関数は動くけど返り値を返さない:void

そもそも値を持たない:never

初期化されていない:undefined

仕様上設定されているだけなのでボトム型は覚えなくてもいいらしいと思う。

型の付け方

プリミティブ タプル ユニオン ジェネリクス 型ガードとか型アサーションとか

基本的にVisual Studio Code使ってるなら型推論が推論anyを抱っこしてくれるからそれに従う。

特殊型

GetStaticProps(記事一覧表示取得のimportで付ける型)
GetStaticPaths(記事ページ表示のimportで付ける型)
Number/StringConstructor(新しいメソッド、mapなどに付ける型)
React.Dispatch<React.SetStateAction<other...>>(useStateとかのhooksで登場する型)

型がanyとか入ってなかったりするとESLintやサーバーが警告吐いて気持ち悪い。

というか型付いてなかったりanyだったりする人のコード参考にしようと思えない。

VercelのCEOもまだjsでブログ開発してるくらいなので情報が少ないみたいだけどTypeScriptはちゃんと使おう。

React派生ならこのコマンドで入ってるnpmパッケージ全部見れる

npm list --depth=0