TypeScript入門 - 基本的な型についておさらい

このレッスンではTypeScriptの基本的な文法についておさえていきましょう。

基本的な型

TypeScriptには以下のような型が基本的な型として用意されています。

string
boolean
number
any
unknown
never

それぞれ見ていきましょう。

string型

まずはstring型です。 string型はその名の通りその変数が文字列であることを表します。

以下の関数をご覧ください。

const sayHi = (name: string) => `Hi ${name}`
sayHi('daigo')

sayHi関数の引数はstringと定義されています。ですので、sayHiの引数は文字列である必要があります。以下のように数字などを入れてしまうとエラーになります。

const sayHi = (name: string) => `Hi ${name}`
sayHi(30)

boolean型

つぎはboolean型です。boolean型では変数はtrueもしくはfalseである必要があります。以下の例を見てみましょう。

const sayHi = (name: string, likeCat: boolean) => {
  if (likeCat) {
    return `My name is ${name} I like cat`
  }
  return `My name is ${name} I don't like cat`
}

sayHi('daigo', true)

今回のケースではsayHi関数の第二引数がboolean型になっています。ですので、第二引数にはtrueもしくはfalseが入ります。 sayHi('daigo', true)の場合、返り値はMy name is daigo I like catになり、 sayHi('daigo', false)の場合、返り値はMy name is daigo I don't like catになります。

number型

number型は数字になります。次の関数を見てみましょう

const add = (a: number, b: number) => a + b

add(1, 2)

このようにadd関数の第一引数と第二引数はnumber型が指定されているためともに数字を代入する必要があります。

any型

次はany型です。any型にはどんな変数が来ても許容されます。数字を入れても文字列を入れてもオブジェクトを入れても大丈夫です。ただし開発の現場ではエラーの温床となるため仕様がご法度だったりします。どうしても使わないと解決できない場合を除き利用を避けましょう。

let test: any = 30;
test = "daigo" // コンパイルエラーにならない

unknown型

unknown型もanyと同様どのような型も許容されます。しかし、タイプチェックをしないとその変数を演算に利用したりオブジェクトの場合メソッドを利用することができません。 anyを安全にした型と言えます。

例えば以下のケースではTypeScriptではエラーになります。

let a: unknown;

a = 3;

const b = a + 4; // aはunknown型なので演算に利用できない

ただしunknownはtypeofでチェックをするとその結果に応じて型が決まるのでその場合は演算に利用できます。

let a: unknown;

a = 3;

if (typeof a === "number") {
  const b = a + 4; // この中ではaはnumber型になる
}

never型

never型はどんな値が入るのも許容しない型になります。例えば以下のようなコードは全てエラーになります。

const a: never = 3;
const b: never = "daigo";

どのような場合に役に立つかというと、値を返さない関数を定義したり、オブジェクトがあるプロパティを必ず持たないことを保証するために利用されます。以下利用例です。

function throwError (text: string): never {
  throw new Error(text);
}

// classプロパティが存在しないオブジェクト型を定義
type ObjWithoutClass = Record<string, any> & { class: never }

まとめ

このレッスンではTypeScriptの基本的な型について解説しました。string, boolean, number, anyなどの型は直感的に理解できるのですが、 unknownやneverなどの型は一度理解してもまた忘れてしまいがちです。もしまたわからなくなったらこのレッスンに戻ってきて定期的に見返すと良いかもしれません。

次はTypeScriptのInterfaceやTypeについて解説していきます。