とほほのTypeScript入門

• トップ
• とほほのTypeScript入門

• TypeScriptとは
• インストール
• コンパイル
• 型アノテーション
• 指定できる型
• 型アサーション
• 型エイリアス
• リンク

TypeScriptとは

• Microsoft が開発した言語で、JavaScript に型定義などの機能を追加したものです。
• JavaScript 言語の完全なスーパーセットになっています。
• 型の異なる関数呼び出しや代入をコンパイル時に検出することによりプログラムの品質を高めることができます。
• また、ECMAScript の最新機能を早めに取り入れるため、まだ、ブラウザが未対応の機能を早い時期から使用することが可能となります。
• プログラムの拡張子には通常 .ts をつけます。
• TypeScriptファイル(*.ts) を JavaScript ファイル(*.js)にコンパイル(トランスコンパイル・トランスパイル)します。
• React や Angular などでも TypeScript がよく利用されています。

インストール

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

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

コンパイル

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

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

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

$ tsc sample.ts

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

$ node sample.js
Hello Yamada!

型アノテーション

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

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

指定できる型

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

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;

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

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

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

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

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

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

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

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

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

let v_any: any = 4;

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

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

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

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

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

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

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

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

型アサーション

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

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

型エイリアス

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

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

リンク

• https://www.typescriptlang.org/docs/home.html

---