この先で出会う書き方

01 / 06

ここからは読めれば足りる

ここまでで、自分の書いた JavaScript に型をつけられるようになった。最後に、このコースでは扱わなかった書き方を5つだけのぞいておこう。

目標は使いこなすことじゃない。他人のコードで見かけたときに「ああ、あれか」と思えれば十分だよ。深追いしなくていい。必要になった日に調べれば間に合う。

02 / 06

`enum` — 値の候補に名前をつける

決まった候補がいくつかあるとき、その集まりに名前をつける書き方だよ。Iro.Ao のように、名前で呼び出して使う。

章3で書いたリテラル型のユニオン（"あか" | "あお"）と、やりたいことはほとんど同じだ。

enum Iro {  Aka = "あか",  Ao = "あお",}console.log(Iro.Ao);

実行結果

あお

03 / 06

タプル型 — 順番と個数が決まった配列

[string, number] と書くと、「1つめが文字列、2つめが数値、ぜんぶで2個」という配列の型になる。ふつうの配列の型（string[]）と違って、位置ごとに型が決まっているんだ。

「名前と年齢をひと組で返す」ような場面で見かけるよ。中身はただの配列だから、表示すると配列の形で出てくる。

const kumi: [string, number] =  ["ゆい", 20];console.log(kumi);

実行結果

["ゆい", 20]

04 / 06

交差型 — 2つの形を両方みたす

A & B と書くと、「A の形も B の形も持っている」という型になる。ユニオン型の | が「どちらか」だったのに対して、& は「どちらも」だよ。

小さな形をいくつか作って、必要なぶんだけ足し合わせる、という組み立て方ができる。

type Namae = { namae: string };type Toshi = { toshi: number };type Hito = Namae & Toshi;const yui: Hito = {  namae: "ゆい",  toshi: 20,};console.log(yui);

実行結果

{ namae: "ゆい", toshi: 20 }

05 / 06

ユーティリティ型 — 型から型を作る道具

前のレッスンで見た山かっこを使って、すでにある型から別の型を作る道具がひとそろい用意されている。代表を2つ挙げるよ。

Partial<Hito> … 全部の項目が省略できる Hito
Pick<Hito, "toshi"> … Hito から toshi だけ抜き出した型

ほかにもいくつかある。同じ形を書き写さずに済むのがねらいだよ。

type Hito = {  namae: string;  toshi: number;};const a: Partial<Hito> = {  namae: "ゆい",};const b: Pick<Hito, "toshi"> = {  toshi: 20,};console.log(a);console.log(b);

実行結果

{ namae: "ゆい" }
{ toshi: 20 }

06 / 06

抽象クラスと `static`

クラスまわりにも、まだ見ていない言葉が2つある。

abstract … 継承して使う前提の設計図。そのままでは new できず、中身の無いメソッドだけ並べて「これを用意して」と子に約束させる
static … インスタンスを作らずに使えるもの。new せずにクラスの名前から直に呼ぶ

それじゃあ、いちばん単純な形を1回ずつ書いてみよう。書けるようになるためじゃなくて、手が形を覚えるためだよ。

abstract class Dobutsu {  abstract naku(): string;}class Neko extends Dobutsu {  naku(): string {    return "にゃー";  }}class Tsuuka {  static kigou: string = "円";}console.log(new Neko().naku());console.log(Tsuuka.kigou);

実行結果

にゃー
円