🍮

[TypeScript] 型を知る(入門編)

2022/10/23に公開

前回は「TypeScriptを使う意味」について簡単にお話ししましたが、今回は実際に使うにあたって必要な「型の種類」をご紹介したいと思います。
※「そもそもTypeSCriptって何？なんのために型を書くのかわからない」という方はぜひ前回の記事をご覧になってください

※今回は普段業務でTypeScriptを使っている方には物足りない内容になっていると思います。

型の種類

それでは早速、TypeScriptの型にはどんな種類があるのか、それらをどんな時に使うのか見ていきたいと思います。

入門編ということで、今回ご紹介するのはこちら!

string
number
boolean
Array
Object
null/undefined
any

では、１つずつ見ていきましょうー！！！！

1. string

テキスト型です。値をシングルクォートやダブルクォート、バッククォートなどで囲う必要があります。
シングルクォートとダブルクォートに差はありませんが、バッククォートを使用すると中で変数や改行を使うことができます。

const test = "$と{}で囲むだけ"

const testString = `バッククォートだと${test}で変数が使えるし改行\nもできるよ〜！`

console.log(testString)

これを実際にconsole.logを出力するとこうなります！

バッククォートだと$と{}で囲むだけで変数が使えるし改行
もできるよ〜！

2. number

数値型です。数字をそのまま書けばOK!

3. boolean

真偽値です。trueかfalseのどちらか。
表示/非表示を切り替えたり、なんらかのフラグを立てるときによく使います。

4. Array

配列です。[]で表現しますが、中にどんな値が入るか？まで指定してあげましょう。
例えば下記のような配列であれば型はstring[]となります。

["ヘイホー", "クリボー", "ファイアフラワー"]

もう１つ例を挙げておくと、こちらはnumber[]です。

[10, 20, 30]

5. Object

オブジェクト型です。{}で表現し、中の値の型まで書きます。
例えば下記のようなオブジェクトを扱うのなら

[
 {
  id: 1,
  name: "ヘイホー",
  color: "red"
 },
 {
  id: 2,
  name: "クリボー",
  color: "brown"
 },
 {
  id: 3,
  name: "ファイアフラワー",
  color: "orange"
 }
]

このように型を定義します。

type Characters = {
 id: number,
 name: string,
 color: string
}[]

末尾の[]はこの型のオブジェクトが何個か入っている配列だよ、という意味になります。
何個入っているかは関係ありません。

6. null/undefind

次にnullとundefindを一緒にご紹介します。
ざっくり言うと共に「何もないよ〜」という意味で使うnullとundefind。
では何が違うのでしょうか？？

nullは値が存在しないことを、undefindは値が未定義であることを表しています。

例えば先ほどのCharactersを使って

console.log(Characters[0].age)

とするとどうでしょうか。出力はundefindになります。
Charactersはageを持たないので型エラーにもなりますね。

では、こちらはどうでしょう？？

console.log(Characters[５])

これもundefindです。
Charactersという変数は確かにあるけれど、5番目は存在していませんよね。

一方nullは値が存在しないことを表すので、明確に「存在しない」としたい時に使います。
例を挙げると、一部の値を空にしたい時などでしょうか。

{
 id: 4,
 name: "テレサ",
 color: null
}

undefindとnullについてはPlaygroundで実際に確認できるようにしていますので
気になる方はこちらでRunを押してみてください！

7. any

最後にanyです。簡単にいうと「何か」です。なんでもOK！！
なんでもOKなので型をつける意味がなく、嫌がられることが多いです。

ではanyを使ってはいけないんでしょうか???
使ってはいけないという人もいるかもしれませんが、実際にはプロジェクトメンバーのスキル度合いやチームの方針によるでしょう。

型をつけなきゃ!!!!と躍起になって1日潰してしまうなんてことがあるかもしれません。
簡単な型ならまだしも、複雑な場合にはひとまずanyを使う、というのはアリなのでないでしょうか？

まとめ

以上で入門編を終わりにします！
あえて本当に簡単なものだけに絞ってみました。
慣れていない方は途中で紹介したPlaygroundで是非、色々試してみてくださいね！

応用編では少し踏み込んだ内容を書きたいと思います！
ではまた(｀・ω・´)ノ