TypeScriptの型について

基本型

基本形(プリミティブ型)とは、JavaScriptの基本的なデータ型のことです。具体的には、文字列型（string） 数値型（number） 真偽値型（boolean） シンボル型（symbol） void nullとundefined 任意型(any) が該当します。

文字列型（string）

let firstName: string = "Steve";
let lastName: string = "Jobs";
let fullName: string = `${firstName} ${lastName}`;

console.log(fullName); // Steve Jobs

フルネームを作成するための文字列連結や、テキスト処理、ユーザーからの入力など非常に多くの用途があります。

数値型（number）

let myValue: number = 15;
myValue = 10; // 再代入
console.log(++myValue); // 11

時間や距離、温度、重量、金額など...例えば、購入商品の価格を計算したり、時間の計算をしたりする際に数値型が使用されます。

真偽型（boolean）

let isRaining: boolean = true;

if (isRaining) {
  console.log("雨なので傘を持っていく"); //true
} else {
  console.log("今日は傘いらないな！"); //false
}

trueとfalseしか状態を持たない最もシンプルなデータ型。チェックボックスやラジオボタンのような、UI要素の状態を管理するためにも使用します。

シンボル型（symbol）

const mySymbol = Symbol('mySymbol');
const myObject = {
  [mySymbol]: 'これはシンボルキー'
};

console.log(myObject[mySymbol]); // これはシンボルキー

[mySymbol]というシンボルをキーとして、文字列値'これはシンボルキー'が割り当てられています。最後に、myObjectからmySymbolキーに対応する値を取得し、コンソールに出力します。

このように、シンボル型は一意の識別子を表すために使用されます。シンボル型は、文字列とは違い、ユニークな値を表現できるため、オブジェクトのキーとして使用されることが多いようです。

void

function sayHello(): void {
  console.log("Hello!");
}

sayHello(); // Hello!

いかなる返り値も持たないことを明示するために使われることが多いです。undefinedしか代入できません。

この場合、sayHello関数は値を返さないことが定義されています。voidは値の型を持たないので、関数が何も返さないことを示します。関数が値を返そうとした場合にはエラーが発生します。

なお、主に「コンソールにログを出力する関数」や「イベントリスナー」などにvoidを使用します。

nullとundefined

let myNull: null = null;
let myUndefined: undefined = undefined;

console.log(myNull);        // null
console.log(myUndefined);   // undefined

TypeScriptではnullとundefinedもひとつのデータ型として捉えます。nullとundefinedはJavaScript・TypeScriptにおいては区別されるのです。nullはnullという値が代入されている状態であり、undefinedは値がまだ代入されていない状態です。

任意型(any)

let myValue: any = 10;
console.log(myValue); // 10

myValue = "hello";
console.log(myValue); // "hello"

myValue = true;
console.log(myValue); // true

any型が付与された変数は、どんな型の値でも代入することができます。外部から渡される値の型が分からない場合。一時的な変数の場合や、型が明確でない動的なデータを扱う場合などの使用が考えられます。

ユーザー定義型

ユーザ定義型とは、開発者が自分で定義した型のことです。既存の型を組み合わせて新しい型を作成できます。interface、touple、classなどが用意されています。

例1

// Person型を定義
type Person = {
  name: string; // 文字列型
  age: number; // 数値型
  address: string; // 文字列型
};

// Person型を使ってオブジェクトを宣言
const person: Person = {
  name: "John Doe",
  age: 30,
  address: "123 Main St.",
};

例2

// Book型を定義
type Book = {
  title: string; // titleは文字列型
  author: string; // authorは文字列型
  pages: number; // pagesは数値型
};

// Book型を使って配列を宣言
const books: Book[] = [
  { title: "The Great Gatsby", author: "F. Scott Fitzgerald", pages: 180 },
  { title: "To Kill a Mockingbird", author: "Harper Lee", pages: 281 },
  { title: "1984", author: "George Orwell", pages: 328 },
];

このように型判定を自由に記載できますが、自分で書いた型判定が誤っていると意図しない挙動になるので注意です。