TypeScript

JavaScriptとデータ型

次のような関数を考えてみましょう。

function formatDate(date) {
  return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
}

この関数のdate引数には、どのような値を指定すれば良いでしょうか。答えは、Dateオブジェクトを指定することです。formatDate(new Date("2022-01-01"))は動作しますが、formatDate("2022-01-01")はエラーになってしまいます。しかも、エラーが発生するかどうかは実際に実行してみるまでわかりません。

上のような単純なプログラムならこういった問題は起きにくいですが、プログラムの規模が大きくなるにつれ、「どういった値がやりとりされているのか」という情報を把握することが重要になってきます。こういった情報を、データ型、あるいは単に型と呼びます。

TypeScriptを用いると、プログラム中にデータ型を記述できるようになります。TypeScriptは、Microsoft社によって開発された、JavaScriptにトランスパイルして用いられる言語です。

TypeScriptにおける型は、通常:の記号に続けて記述します。例えば、先程のプログラムをTypeScriptを用いて書き直すと、次のようになります。引数の部分に型指定が入っているところに注目してください。

function formatDate(date: Date) {
  return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
}

TypeScriptを導入することにより、このプログラムを記述する際に、次のような支援が得られます。

• date.と入力されたタイミングで、使用可能なメソッドが全て表示されます
• 誤った型の引数 (動画内では文字列) を指定すると、エラーが表示されるようになります

他言語との比較

C++やJavaなどのプログラミング言語では、型の情報は実行に何らかの影響を与えますが、TypeScriptはJavaScriptにトランスパイルされる言語であり、実行時には型の情報は一切利用されません。

TypeScriptを使ってNode.jsのプログラムを記述する

TypeScriptを用いてNode.jsのプログラムを作成するには、次の手順に従ってください。

まずは、プロジェクトルートにpackage.jsonを作成します。npm initを実行すればよいのでした。

続いて、

npm install -D typescript

を実行し、typescriptパッケージをインストールします。-Dオプションは「開発時のみに使用する」という意思表示になります。package.jsonに記録される方法が少しだけ変わります。

続いて、main.tsファイルを作成します。TypeScriptファイルの拡張子は通常.tsです。今回は、

main.ts

const language: string = "TypeScript";
console.log(`Hello ${language}!`);

としました。

TypeScriptファイルの作成が終わったら、npxコマンドでTypeScriptパッケージを実行し、TypeScriptファイルをJavaScriptファイルにトランスパイルします。パッケージ名と異なり、tscとなるので注意しましょう。

npx tsc main.ts

すると、同名のJavaScriptファイルが生成されます。このファイルを実行すれば、通常のJavaScriptとして実行できます。

なお、TypeScriptのウェブサイトで提供されているTS Playgroundを用いると、ブラウザ上でTypeScriptのコードを記述し、型チェックの結果を確認できます。

TypeScriptのデータ型

TypeScriptにおけるデータ型とは、その型の値として扱うことのできる全ての値の集合です。例えば、number型の集合には、0や3.14、-7など、数値の値が含まれます。

型は、変数や関数の引数など、その場所に入る値の種類を明示したい箇所に、: (コロン) に続けて記述します。

// addはnumber型の引数a, bをとりnumber型の値を返す関数
function add(a: number, b: number): number {
  return a + b;
}

// sumはnumber型の変数
let sum: number = add(3, 4);

変数、関数の引数、戻り値など、値の型が定まっている位置に異なる型の値が入る可能性があるプログラムを検出すると、TypeScriptはエラーを報告します。例えば、次のプログラムにおいて、"7"や"3"、"4"はnumber型に属さないため、エラーが出力されます。

sum = "7"; // Type 'string' is not assignable to type 'number'.

add("3", "4"); // Argument of type 'string' is not assignable to parameter of type 'number'.

TypeScriptでは、number型のほかにも、次の表に示すように、さまざまなデータ型が用意されています。

型名	説明	例
number	数値	0, 3.14, -7
string	文字列	"Hello", "TypeScript"
boolean	真偽値	true, false
object	オブジェクト	{ name: "田中" }

確認問題

JavaScriptで記載された次の関数repeatに対し、TypeScriptとして適切と思われる型を追記してください。

function repeat(text, times) {
  let result = "";
  for (let i = 0; i < times; i++) {
    result += text;
  }
  return result;
}

解答例: 文字列の繰り返し

関数repeatは、文字列textをtimes回繰り返して結合した新しい文字列を返す関数です。したがって、textはstring型、timesはnumber型、戻り値もstring型とするのが適切です。

function repeat(text: string, times: number): string {
  let result: string = "";
  for (let i: number = 0; i < times; i++) {
    result += text;
  }
  return result;
}

部分型の関係

TypeScriptの型には包含関係があり、TがUの部分集合であるとき、TはUの部分型であるといいます。

この部分型関係は、全体集合をunknown型、空集合をnever型として、次の図のように整理できます。

例えば、次の例のように、数値1は1型、number型、unknown型のいずれにも属します。

const a: unknown = 1;
const b: number = 1;
const c: 1 = 1; // 左辺の1はデータ型としての1

部分型の値は、より大きな型の値として扱うことができます。例えば、次の例では、string型の変数valueを、unknown型の引数を受け取る関数logValueに渡しています。string型はunknown型の部分型であるため、TypeScriptはこのプログラムを正しいとみなします。

function logValue(value: unknown) {
  console.log(value);
}

const value: string = "Hello";
logValue(value); // string型はunknown型の部分型

any型

TypeScriptの標準設定では、型が判明しなかった場合、any型が指定されたものとみなされます。any型の値には、どんな操作でも許容されます。any型の値はどんな型の変数にも代入できますし、any型の変数にはどんな値でも代入できます。上の集合のどの部分にも当てはまりません。

const strangeValue: any = 1;

// TypeScriptは誤りを検出できないが、実行時にエラーになる
strangeValue.strangeMethod();

データ型の別名

type宣言を用いると、データ型に対して別名を付けられます。

type Age = number;

// 変数ageはAge (number) 型
const age: Age = 18;

ヒント

型の名前には通常パスカルケースが用いられます。

オブジェクト型

オブジェクト型では、プロパティの名前や、値の型が指定できます。

// Personはstring型のnameプロパティとnumber型のageプロパティを持つオブジェクト
type Person = {
  name: string;
  age: number;
};

let person: Person = { name: "田中", age: 18 };

TypeScriptでは、プロパティが多いオブジェクト型は、プロパティが少ないオブジェクト型の部分型とみなされます。

次の例では、プロパティの数が多いTeacher型のオブジェクトを、プロパティの数が少ないPerson型の変数に代入しています。これは、Teacher型のオブジェクトはPerson型のオブジェクトの全てのプロパティを持っており、Person型のオブジェクトに対する全ての操作を安全に実行できるためです。

type Teacher = {
  name: string;
  age: number;
  subject: string;
};

let teacher: Teacher = { name: "鈴木", age: 18, subject: "数学" };
person = teacher;

// Property 'subject' is missing in type 'Person' but required in type 'Teacher'.
teacher = person;

クラス

クラス名は、そのまま型名として利用できます。また、フィールドにも型を指定できます。

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

const person: Person = new Person("田中", 18);

確認問題

Product型とBook型が次のように定義されているとします。

type Product = {
  name: string;
  price: number;
};

type Book = {
  name: string;
  price: number;
  author: string;
};

次のプログラムに対し、TypeScriptとして適切と思われる型を追記してください。

function calculateTotal(item, quantity) {
  return item.price * quantity;
}

const book = {
  name: "TypeScript入門",
  price: 2500,
  author: "山田 太郎",
};
const total = calculateTotal(book, 3);

解答例: 商品の合計金額の計算

• calculateTotal関数の引数itemはProduct型とBook型のいずれも文法的には正しいですが、関数の処理においてBook型特有のプロパティを使用していないため、Product型を指定するのがより適切です。
• bookはBook型のオブジェクトです。
• quantityは商品の数量を表すためnumber型とします。戻り値も合計金額を表すためnumber型とします。

function calculateTotal(item: Product, quantity: number): number {
  return item.price * quantity;
}

const book: Book = {
  name: "TypeScript入門",
  price: 2500,
  author: "山田 太郎",
};
const total: number = calculateTotal(book, 3);

配列型

型Tの配列型は、T[]のように記述できます。また、TがUの部分型であれば、T[]はU[]の部分型になります。

const numbers: number[] = [1, 2, 3];

// number[]はunknown[]の部分型
const unknowns: unknown[] = numbers;

関数型

関数型では、引数や戻り値の型が指定できます。引数名は異なっていても同じ型だとみなされます。

// BinaryNumberOperatorはnumber型の引数2つを受け取ってnumber型の値を返す関数
type BinaryNumberOperator = (x: number, y: number) => number;

function add(a: number, b: number): number {
  return a + b;
}

const operator: BinaryNumberOperator = add;

関数型の部分型の関係

関数型の部分型の関係は複雑ですが、「部分型の値はより大きな型の値として扱える」という基本的な考え方に基づいています。次の3つの関数型は、すべて(v: string) => string型の部分型となります。

• () => string: 引数が少ない関数に、引数を余分に渡しても無視されるので安全
• (v: unknown) => string: 関数の引数に、より小さな型の値を渡しても安全
• (v: string) => never: 関数の戻り値を、より大きな型の値として扱っても安全

型演算

2 つの型に対し、集合の和や積 (共通部分)を求める記号が利用できます。

記号	意味
&	共通部分
|	合併

共通部分型は、両方の型に属する型を表します。オブジェクト型同士の場合、両方の型のプロパティを全て持つオブジェクト型となります。

次の例におけるStudent & Programmer型は、name、major、languageの3つのプロパティを持つオブジェクト型となります。

type Student = { name: string; major: string };
type Programmer = { name: string; language: string };
const studentProgrammer: Student & Programmer = {
  name: "田中",
  major: "数学",
  language: "TypeScript",
};

合併型は、いずれかの型に属する型を表します。

次の例では、変数handには"グー"、"チョキ"、"パー"のいずれかの文字列を指定できます。

const hand: "グー" | "チョキ" | "パー" = "グー";

変数の値が合併型のどれに属するかが、if文などの条件により明らかである場合、型の絞り込みが行われます。

次の例におけるmeeting引数は、InPersonMeeting型かOnlineMeeting型のいずれかです。typeプロパティの値に応じて、locationプロパティかurlプロパティが利用可能になります。

type InPersonMeeting = { type: "in_person"; location: string };
type OnlineMeeting = { type: "online"; url: string };
type Meeting = InPersonMeeting | OnlineMeeting;

function describeMeeting(meeting: Meeting): string {
  if (meeting.type === "in_person") {
    return `会議は ${meeting.location} で行われます。`;
  } else {
    return `会議はオンラインで行われます。URL: ${meeting.url}`;
  }
}

確認問題

問題1: string & number型は何型と等しいでしょうか。

問題2: 次のように定義される型Tに対して、直接使用可能なプロパティは何でしょうか。

type T = { name: string; age: number } | { name: string; subject: string };

解答例

問題1: never型

string型とnumber型の共通部分は存在しません。したがって、string & number型は、空集合であるnever型と等しいです。

問題2: nameのみ

型Tは、{ name: string; age: number }型と{ name: string; subject: string }型の合併型です。両方の型に共通して存在するプロパティはnameのみであるため、型Tに対して使用可能なプロパティはnameのみとなります。

型推論

文脈からデータ型が明らかな場合は、型定義の記述を省略できます。

// ageはnumber型
let age = 18;

// Type 'string' is not assignable to type 'number'.
age = "19";

// 戻り値の型が推論されるため、addは(a: number, b: number) => number型
function add(a: number, b: number) {
  return a + b;
}

関数型を要求する部分に関数式を指定する場合、その引数の型が推論されます。

type BinaryNumberOperator = (a: number, b: number) => number;

// aやbはnumberに推論される
const operator: BinaryNumberOperator = (a, b) => a + b;

// イベントハンドラの記述の際に便利
window.onload = (e) => {
  // eはEvent型
};

ジェネリクス

引数を一つ受け取り、その値をそのまま返す関数を考えてみよう。

function identity(x) {
  return x;
}

こういった関数では、引数xはどんな型の値も指定できます。つまり、xはunknown型とするのが適切なはずです。しかし、引数をunknown型としてしまうと、戻り値がunknown型となってしまい、戻り値に対する操作が一切不可能になってしまいます。

function identity(x: unknown) {
  return x;
}

// Object is of type 'unknown'.
identity(1).toString();

TypeScriptでは、型パラメータを用いることで、この問題を解決できます。型パラメータは、通常の引数と異なり、型を指定するための特殊な引数です。JavaScriptにトランスパイルされる際に削除されます。こういった言語機能は他の多くのプログラミング言語でも用意されており、ジェネリクスと呼ばれます。

// Tは型パラメータ
// identityはT型の引数を受け取ってT型の戻り値を返す関数
function identity<T>(x: T): T {
  return x;
}

// Tにnumberを指定したので、ここではidentityはnumber型の引数を受け取ってnumber型の戻り値を返す関数
identity<number>(1).toString();

// 文脈から型パラメータが明らかな場合は推論される
// この場合はTはnumberに推論される
identity(1).toString();

type宣言やクラスでも型パラメータを利用できます。

type Range<T> = {
  from: T;
  to: T;
};

const dateRange: Range<Date> = {
  from: new Date("2022-01-01"),
  to: new Date("2022-12-31"),
};

type BinaryOperator<T> = (a: T, b: T) => T;

// addは(a: number, b: number) => number型
const add: BinaryOperator<number> = (a, b) => a + b;

確認問題

次の関数applyは、関数を適用する関数です。引数と戻り値を表す型パラメータを定義し、ジェネリクスを用いて適切な型をつけてください。なお、parseInt関数は、文字列を整数に変換する関数です。

function apply(f, x) {
  return f(x);
}

const result = apply(parseInt, "1024"); // resultはnumber型

解答例

parseIntは、(v: string) => number型の関数です。したがって、apply関数の型パラメータTはstring、Uはnumberに推論されます。

function apply<T, U>(f: (x: T) => U, x: T): U {
  return f(x);
}

GitHub で表示

TypeScriptとnpm

npmでインストールしたパッケージがTypeScriptに対応している場合、下の図のように、npmのパッケージのウェブサイトに アイコンが表示されます。

DTアイコンがついているパッケージは、@types/パッケージ名という名称のパッケージをインストールすることで、TypeScriptからパッケージが利用可能になります。例えば、@types/expressパッケージをインストールすることにより、expressパッケージがTypeScriptから利用できるようになります。

@typesパッケージのインストール前後でappの型が変わっていることが分かります。

フロントエンドにおけるTypeScriptの利用

Viteは、標準でTypeScriptのトランスパイラが内蔵されています。新しくプロジェクトを作成する際は、テンプレートを選択する際にTypeScriptのテンプレートを使用しましょう。

tsconfig.json

この方法でプロジェクトを作成すると、tsconfig.jsonというファイルが生成されます。TypeScriptは、さまざまなJavaScriptのニーズに合わせてカスタマイズできるようになっており、その設定を記述するためのファイルがtsconfig.jsonです。

公式ドキュメントには、全てのオプションの詳細な説明が記述されています。特に、strictオプションは、TypeScriptの能力を大幅に上昇させることができるので、有効にすることが推奨されています。typescriptパッケージを直接インストールしたプロジェクトでは、npx tsc --initコマンドによりこのファイルを生成できます。