0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TypeScript*アロー関数の型定義*

Last updated at Posted at 2021-10-30

まずは関数の型から

const Index = ({    }:引数の型):返り値の型 => {
return (
   ここが返り値で引数を使ったりもする
 )
}

次は変数宣言の型

let Index:変数の型 =  x

返り値の型はReact系列だとvoidかJSX.Elementを明示的に付けるくらいしかない。
引数の型はType Propsでゴリゴリ付けることになる。
変数の型はそのまま型を入れるだけ。

##通常の型
数字:number
文字列:string
条件分岐:boolean

##ボトム型

  • 何もない=利用できない:null
  • 関数は動くけど返り値を返さない:void
  • そもそも値を持たない:never
  • 初期化されていない:undefined

正直ボトムは全部知らなくていいし覚えなくていいと思う。

それで簡単なことを当然のようにやらなければ凄いこともできない。
Next.jsの特殊型で言うと

  • GetStaticProps(記事一覧表示取得のimportで付ける型)
  • GetStaticPaths(記事ページ表示のimportで付ける型)

需要のあるmapメソッドの型は
・map:StringConstructor

useStateで使う型は
・React.Dispatch>

型がanyとか入ってなかったりするとESLintやサーバーがゲロ警告吐きまくる。
今までJavaScriptはぐちゃぐちゃのスライムみたいなイメージだったがTypeScriptは箱みたいなイメージだ。

依存関係の環境で型検査の厳格強度も変わるので全ての環境が一致すると断言できない。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?