第2章　TypeScriptの基本

リスト2.1: 型注釈つきの変数

// JavaScriptそのものの書き方
// 変数に初期値を与えると初期値の型がそのまま変数の型になる（型推論される）
// 省略しても問題のない型の記述は積極的に省略してしまってよい！
{
  let str = "文字列";
  let num = 1;
  let bool = true;

  let func = () => { };
  let obj = {};

  console.log(str, num, bool, func(), obj);
}

// 型推論に頼らずに型注釈を明示的に書いてもよい
// 特別な理由がない限り、このやり方に長所はない
{
  let str: string = "文字列";
  let num: number = 1;
  let bool: boolean = true;

  let func: Function = () => { };
  // any はなんでも型
  let obj: any = {};

  console.log(str, num, bool, func(), obj);
}

リスト2.2: 型注釈に反することをやってみる

let str: string;
// 文字列は数値と互換性がない！
// error TS2322: Type '1' is not assignable to type 'string'.
str = 1;

let num: number;
// 数値は真偽値と互換性がない！
// error TS2322: Type 'true' is not assignable to type 'number'.
num = true;

let bool: boolean;
// 真偽値は文字列と互換性がない！
//  error TS2322: Type '"str"' is not assignable to type 'boolean'.
bool = "str";

export {}

リスト2.3: 一般的なクラス要素

class Base {
  // インスタンス変数
  num = 1;

  // 初期値を与えない場合は型の指定が必要
  str: string;

  // プロパティ名に?をつけると省略可能（undefinedである可能性がある）ことを表せる
  regExpOptional?: RegExp;

  constructor(str: string) {
    // strは省略可能じゃないのでコンストラクタで初期値を設定しなければならない
    // 設定し忘れても現在のTypeScriptはエラーにしてくれないので注意が必要…
    this.str = str;
  }

  // メソッドの定義 返り値は省略してもOK
  hello(): string {
    return `Hello, ${this.str}`;
  }

  get regExp() {
    if (!this.regExpOptional) {
      return new RegExp("test");
    }

    return this.regExpOptional;
  }
}

const base = new Base("world");
console.log(base.hello());

export { };

リスト2.4: jsにコンパイルしたの出力

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class Base {
    constructor(str) {
        // インスタンス変数
        this.num = 1;
        // strは省略可能じゃないのでコンストラクタで初期値を設定しなければならない
        // 設定し忘れても現在のTypeScriptはエラーにしてくれないので注意が必要…
        this.str = str;
    }
    // メソッドの定義 返り値は省略してもOK
    hello() {
        return `Hello, ${this.str}`;
    }
    get regExp() {
        if (!this.regExpOptional) {
            return new RegExp("test");
        }
        return this.regExpOptional;
    }
}
const base = new Base("world");
console.log(base.hello());

リスト2.5: もちろん継承もあるよ

class Base {
  greeting(name: string) {
    return `Hi! ${name}`;
  }
}

class Inherit extends Base {
  greeting(name: string) {
    return `${super.greeting(name)}. How are you?`;
  }
}

let obj = new Inherit();
// Hi! TypeScript. How are you? と出力される
console.log(obj.greeting("TypeScript"));

export { }

リスト2.6: アクセス修飾子の例

class Base {
  a = "a";
  public b = "b";
  protected c = "c";
  private d = "d";

  method() {
    // privateなプロパティは利用しているコードが一箇所もないと警告してもらえる
    this.d;
  }
}

class Inherit extends Base {
  method() {
    // 子クラスから public, protected はアクセス可能
    this.a;
    this.b;
    this.c;
    // private はコンパイルエラーになる
    // this.d;
  }
}

const base = new Base();
// public は通常のアクセスが可能
base.a;
base.b;
// protected, private はコンパイルエラーになる
// base.c;
// base.d;

リスト2.7: アクセス修飾子はJSコードに影響しない

"use strict";
class Base {
    constructor() {
        this.a = "a";
        this.b = "b";
        this.c = "c";
        this.d = "d";
    }
    method() {
        // privateなプロパティは利用しているコードが一箇所もないと警告してもらえる
        this.d;
    }
}
class Inherit extends Base {
    method() {
        // 子クラスから public, protected はアクセス可能
        this.a;
        this.b;
        this.c;
        // private はコンパイルエラーになる
        // this.d;
    }
}
const base = new Base();
// public は通常のアクセスが可能
base.a;
base.b;
// protected, private はコンパイルエラーになる
// base.c;
// base.d;

リスト2.8: 引数プロパティ宣言！

class BaseA {
  constructor(public str: string) {
  }
}

// BaseA と等価な定義
class BaseB {
  str: string;
  constructor(str: string) {
    this.str = str;
  }
}

export { BaseA, BaseB }

リスト2.9: 抽象クラス

abstract class Animal {
  abstract name: string;
  abstract get poo(): string;

  abstract speak(): string;
  sleep(): string {
    return "zzzZZZ...";
  }
}
// もちろん、abstract classはそのままではインスタンス化できない
// error TS2511: Cannot create an instance of the abstract class 'Animal'.
// new Animal();

class Cat extends Animal {
  // プロパティの実装を強制される
  name = "Cat";
  poo = "poo...";

  // メソッドの実装を強制される
  speak(): string {
    return "meow";
  }
}

new Cat();

export { }

リスト2.10: コンパイルしてしまえばただのクラス

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class Animal {
    sleep() {
        return "zzzZZZ...";
    }
}
// もちろん、abstract classはそのままではインスタンス化できない
// error TS2511: Cannot create an instance of the abstract class 'Animal'.
// new Animal();
class Cat extends Animal {
    constructor() {
        super(...arguments);
        // プロパティの実装を強制される
        this.name = "Cat";
        this.poo = "poo...";
    }
    // メソッドの実装を強制される
    speak() {
        return "meow";
    }
}
new Cat();

リスト2.11: 色々な関数定義

function hello(word: string): string {
  return `Hello, ${word}`;
}
hello("TypeScript");

// 返り値の型を省略すると返り値の型から推論される
function bye(word: string) {
  return `Bye, ${word}`;
}
bye("TypeScript");

// ? をつけると呼び出しときに引数が省略可能になる
function hey(word?: string) {
  // 省略可能にした時はundefinedの時の考慮が必要！
  return `Hey, ${word || "TypeScript"}`;
}
hey();

// デフォルト値の指定で仮引数の型を省略したりもできる
function ahoy(word = "TypeScript") {
  return `Ahoy! ${word}`;
}
ahoy();

export { }

リスト2.12: 可変長引数の例

function hello(...args: string[]) {
  return `Hello, ${args.join(" & ")}`;
}
// Hello, TS & JS と表示される
console.log(hello("TS", "JS"));

export { }

リスト2.13: こういうパターンはNG

// 省略可能な引数の後に省略不可な引数がきてはいけない
// error TS1016: A required parameter cannot follow an optional parameter.
function funcA(arg1?: string, arg2: string) {
  return `Hello, ${arg1}, ${arg2}`;
}

// 可変長引数は必ず最後じゃないといけない
// error TS1014: A rest parameter must be last in a parameter list.
function funcB(...args: string[], rest: string) {
  return `Hello, ${args.join(", ")} and ${rest}`;
}

export { }

リスト2.14: アロー関数 短くてかっこいい

// NOTE ここのcallbackの型注釈の意味は別の章で解説します
// 引数を1つ取って返り値無し の関数を表します
function asyncModoki(callback: (value: string) => void) {
  callback("TypeScript");
}

// アロー関数をコールバック関数として渡す 渡す関数の型は型推論される！
asyncModoki(value => console.log(`Hello, ${value}`));

// アロー関数に明示的に型付をする場合
asyncModoki((value: string): void => console.log(`Hello, ${value}`));

export { }

リスト2.15: async/await 便利！

function returnByPromise(word: string) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(word);
    }, 100);
  });
}

// async functionの返り値の型は必ずPromiseになる
async function helloAsync(): Promise<string> {
  // この関数は実行すると A, TypeScript, B が順番に表示される

  console.log("A");
  // Promiseな値をawaitすると中身が取り出せる（ように見える）
  const word = await returnByPromise("TypeScript");
  console.log(word);
  console.log("B");

  return `Hello, ${word}`;
}

// awaitが使えるのは必ずasync functionの中
(async () => {
  const hello = await helloAsync();
  console.log(hello);
})();

// 普通にPromiseとして扱うこともできる
helloAsync().then(hello => console.log(hello));

export { }

リスト2.16: foo.ts

// defaultをbarという名前に hello関数をそのままの名前でimport
import bar, { hello } from "./bar";
// モジュール全体をbar2に束縛
import * as bar2 from "./bar";
// ECMAScript 2015形式のモジュールでもCommonJS形式でimportできる
import bar3 = require("./bar");

// Hello, TypeScript! と表示される
console.log(hello());
// Hi!, default と表示される
console.log(bar());
// 上に同じく Hello, TypeScript! と Hi!, default
console.log(bar2.hello());
console.log(bar2.default());
// 上に同じく Hello, TypeScript! と Hi!, default
console.log(bar3.hello());
console.log(bar3.default());

// export = xxx 形式の場合モジュール全体をbuzzに束縛
import * as buzz from "./buzz";
// CommonJS形式のモジュールに対して一番素直で真っ当な書き方 in TypeScript
import buzz2 = require("./buzz");
// 両方 Good bye, TypeScript! と表示される
console.log(buzz());
console.log(buzz2());

リスト2.17: bar.ts

export function hello(word = "TypeScript") {
  return `Hello, ${word}`;
}

export default function(word = "default") {
  return `Hi!, ${word}`;
}

リスト2.18: buzz.ts

function bye(word = "TypeScript") {
  return `Good bye, ${word}`;
}
// foo.ts でECMAScript 2015形式でimportする際、
// 次のエラーが出るのを抑制するためのハック
// error TS2497: Module '"略/buzz"' resolves to a non-module entity
//   and cannot be imported using this construct.
namespace bye { }

// CommonJS向け ECMAScript 2015では× 今後は使わなくてよし！
export = bye;

リスト2.19: 実行時に動的にインポートするモジュールを決定する

async function main() {
  // 動的にモジュールをimportできる Promiseが返ってくる
  // 即値（文字列リテラル）でモジュール名を指定するとちゃんと型がついてる！
  const sub = await import("./sub");
  console.log(sub.hello());
}

function mainAnother() {
  // こういうのも当然OK！
  import("./sub").then(sub => {
    console.log(sub.hello());
  });
}

main();

リスト2.20: なんの変哲もないimportされる側

export function hello(word = "world") {
  return `Hello, ${word}`;
}

リスト2.21: namespaceを使ったコード

namespace a {
  // export してないものは外部からは見えない
  class Sample {
    hello(word = "TypeScript") {
      return `Hello, ${word}`;
    }
  }

  export interface Hello {
    hello(word?: string): string;
  }
  export let obj: Hello = new Sample();
}
namespace a {
  export function bye(word = "JavaScript") {
    return `Bye, ${word}`;
  }

  // 定義を分けてしまうと同名のモジュールでもexportされていないものは見えない
  // error TS2304: Cannot find name 'Sample'.
  // let tmp = new Sample();
}

// ネストしたnamespace
namespace b {
  export namespace c {
    export function hello() {
      return a.obj.hello();
    }
  }
}
// ネストしたnamespaceの短縮表記も存在する
namespace d.e {
  export function hello() {
    return a.obj.hello();
  }
}

// Hello, TypeScript と表示される
console.log(b.c.hello());
// Hello, TypeScript と表示される
console.log(d.e.hello());

リスト2.22: コンパイルすると関数を使った構文に展開される

"use strict";
var a;
(function (a) {
    // export してないものは外部からは見えない
    class Sample {
        hello(word = "TypeScript") {
            return `Hello, ${word}`;
        }
    }
    a.obj = new Sample();
})(a || (a = {}));
(function (a) {
    function bye(word = "JavaScript") {
        return `Bye, ${word}`;
    }
    a.bye = bye;
    // 定義を分けてしまうと同名のモジュールでもexportされていないものは見えない
    // error TS2304: Cannot find name 'Sample'.
    // let tmp = new Sample();
})(a || (a = {}));
// ネストしたnamespace
var b;
(function (b) {
    let c;
    (function (c) {
        function hello() {
            return a.obj.hello();
        }
        c.hello = hello;
    })(c = b.c || (b.c = {}));
})(b || (b = {}));
// ネストしたnamespaceの短縮表記も存在する
var d;
(function (d) {
    var e;
    (function (e) {
        function hello() {
            return a.obj.hello();
        }
        e.hello = hello;
    })(e = d.e || (d.e = {}));
})(d || (d = {}));
// Hello, TypeScript と表示される
console.log(b.c.hello());
// Hello, TypeScript と表示される
console.log(d.e.hello());

リスト2.23: import句で別名を作る

namespace a {
  export class Sample { }
}

namespace b {
  // 他のモジュールも参照できる
  let objA: a.Sample;
  objA = new a.Sample();

  // めんどくさいなら import句 を使えばいい
  import Sample = a.Sample;
  let objB: Sample;
  objB = new Sample();

  // 別に違う名前をつけてもいい(けど混乱しちゃうかも？
  import Test = a.Sample;
  let objC: Test;
  objC = new Test();

  // 別に名前が違っても互換性が失われるわけではないのだ
  objA = new Test();
}

リスト2.24: enumとconst enumの例

enum Suit {
  Heart,
  Diamond,
  Club,
  Spade,
}
// 0, 'Heart' と表示される
console.log(Suit.Heart, Suit[Suit.Heart]);

const enum Permission {
  Execute = 1,
  Read = 2,
  Write = 4,
  All = Execute | Read | Write,
}
// 7 と表示される
console.log(Permission.All);

enum Tree {
  Node = "node",
  Leaf = "leaf",
}
// node と表示される
console.log(Tree.Node);

export { Suit, Permission, Tree }

リスト2.25: 生成されたjs constはコンパイルすると消える

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Suit;
(function (Suit) {
    Suit[Suit["Heart"] = 0] = "Heart";
    Suit[Suit["Diamond"] = 1] = "Diamond";
    Suit[Suit["Club"] = 2] = "Club";
    Suit[Suit["Spade"] = 3] = "Spade";
})(Suit || (Suit = {}));
exports.Suit = Suit;
// 0, 'Heart' と表示される
console.log(Suit.Heart, Suit[Suit.Heart]);
// 7 と表示される
console.log(7 /* All */);
var Tree;
(function (Tree) {
    Tree["Node"] = "node";
    Tree["Leaf"] = "leaf";
})(Tree || (Tree = {}));
exports.Tree = Tree;
// node と表示される
console.log(Tree.Node);