とほほのTypeScript入門

目次

TypeScriptとは

インストール

npm を用いてインストールします。

Shell
$ mkdir sample
$ cd sample
$ npm init
$ npm install typescript
$ echo export PATH=\$PATH:`pwd`/node_modules/.bin >> ~/.bashrc
$ source ~/.bashrc
$ tsc --version

コンパイル

まず、sample.ts ファイルを作成します。

sample.ts
function hello(name: string): void {
    console.log("Hello " + name + "!");
}
let your_name: string = "Yamada";
hello(your_name);

tsc (TypeScript Compiler)コマンドを使用して TypeScript ファイルを JavaScript ファイルにコンパイルします。

sample.ts
$ tsc sample.ts

コンパイルされた sample.js を node で実行します。

sample.ts
$ node sample.js
Hello Yamada!

型アノテーション

TypeScript では、変数、定数、関数、引数などの後ろに 「: 型名」を指定することで型を宣言することができます。型に合致しない代入や参照が行われるとコンパイル時にエラーとなります。

TypeScript
function hello(name: string): void {
    console.log("Hello " + name + "!");
}
let your_name: string = "Yamada";
hello(your_name);

指定できる型

下記などのプリミティブ型を指定することができます。

TypeScript
let v_bool: boolean = true;
let v_num: number = 123;
let v_str: string = "ABCDEFG";
let v_null: null = null;
let v_undef: undefined = undefined;

リストやタプルは下記の様に指定します。

TypeScript
let v_arr1: string[] = ["Red", "Green", "Blue"];
let v_arr2: Array<string> = ["Red", "Green", "Blue"];
let v_tuple: [string, number] = ["Yamada", 26];

オブジェクトは object で表します。

TypeScript
let v_obj: object = {"name": "Yamada", "age": 26};

Enum型は型名を指定します。

TypeScript
enum Color {Red, Green, Blue};
let v_enm: Color = Color.Green;

クラスはクラス名を指定します。

TypeScript
class MyClass { name: string; }
var val_class: MyClass = new MyClass();

任意の型を許容する場合は any を指定します。

TypeScript
let v_any: any = 4;

string または number の型を示す場合は | を使用します。

TypeScript
function func(arg: string | number) { ... }

nullundefined はすべての型の変数に代入することができます。ただし、--strictNullChecks オプション付きでコンパイルする際は厳密なチェックが行われ、これらは許容されなくなります。

TypeScript
let v_num: number = null
let v_str: string = undefined

void は値を返却しないことを意味します。

TypeScript
function log(msg: string): void {
    console.log(msg);
}

never は return さえも行われないことを意味します。

TypeScript
function error(msg: string): never {
    throw new Error(msg);
}

型アサーション

型アサーションを使用することで、型が不明な値に型付けを行うことができます。値の前に <型名> を記述する方法と、値の後ろに as 型名 を記述する方法がありますが、前者は、React で使用される JSX の場合にタグとの区別がつかないことから後者の書き方が推奨されています。

TypeScript
interface Person {
    name: string;
    age: number;
}
let foo = <Person>{}
foo.name = "Yamada";    // 型アサーションが無いとエラーになる
let bar = {} as Person
bar.name = "Yamada";    // 型アサーションが無いとエラーになる

型エイリアス

type で型の別名を定義することができます。

TypeScript
type bool = boolean;
let flag: bool = true;

Copyright (C) 2020 杜甫々
初版:2020年5月2日、最終更新:2020年5月2日
http://www.tohoho-web.com/ex/typescript.html