速習シリーズ『速習TypeScript』でTypeScriptを速習

以前『速習Vue.js』でVue.jsをおさらいしたが、その時に同じシリーズのTypeScriptの本も見かけたのであわせて読んでみた。

速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ！ 速習シリーズ | 山田祥寛

本著の構成は以下の通り。

• Part1：はじめに
• Part2：変数／データ型
• Part3：関数
• Part4：オブジェクト指向構文

TypeScriptとは何か？というところから始まり、実行環境や基本的な構文、クラスと継承などオブジェクト指向の構文についてコンパクトにまとめられている。

他の速習シリーズと同様に、素早く全体像を把握したり、高速に振り返りをするといった目的に最適な本だと感じた。

便利なサイト

Playground · TypeScript

TypeScript Types Search

変数宣言

let name: string = "John Smith"

変数名の後にコロンを挟み、型を定義する。

• number
• string
• boolean
• symbol
• any

配列の場合

let nums: number[] = [1, 2, 3, 4, 5]

上記の型の他に TypeScript には連想配列・列挙型・タプル型などがある。

共用型(Union Types)

複数の型を持つ場合。

let data = string | number;

型エイリアス

簡単に型に別名をつけることができる。しかし、後述のインターフェイスでできることに型エイリアスを使うべきではない。

type typeAlias = string | number
let data: typeAlias

型キャスト

変数やリテラルの前に<型の名前>をつけることで型の変換ができる もしくはas使う

関数宣言

const greet = function(name: string): string {
  return `Hello, ${name}!`
}

アロー関数を使う場合は以下の通り。

const greet = (name: string): => `Hello, ${name}!`

省略可能な引数

引数の後ろに?をつける。

const greet = (name: string?): => {
  if (name === undefined) {
    return `Hello, World!`
  }
  return `Hello, ${name}!`
}

抽象クラス

abstract class Greeting {
  constructor(private name: string) {}
  abstract greet(): string;
}

class JapaneseGreeting extends Greeting {
  greet(): string {
    return `こんにちは、${this.name}。`
  }
}

インターフェイス

TypeScriptの継承は同時に1つまでしかできないが、インターフェイスは複数を同時に実装することができる。

interface Greet {
  greet(): string;
}

class JapaneseGreeting implements Greet {
  constructor(private name: string) {}
  greet(): string {
    return `こんにちは、${this.name}。`
  }
}

構造的部分型(Structural Subtyping)

明示的にクラスの継承/インターフェイスの実装を行なっていなくても、クラス/インターフェイスの構造と合致していれば互換性のある型としてみなされる。対になる言葉は「公称的部分型」

ジェネリック

ジェネリックを使うことで、汎用的なメソッドやクラスに特定の型を指定することができる。

let data: Array<number> = [0, 1, 2, 3]

(ただし配列に関してはnumber[]とすることで簡単に宣言できる)

tsconfig.jsonのオプション

この2つは基本オンで。

• noInmplicitAny: 暗黙的な any をエラーにするか
• strictNullChecks: null を許容しないか