ki-hi-ro.com WEB制作フリーランスエンジニア
  • Service
    • WEBサイトの更新サポート
    • 新規サイトコーディング
  • Introduce
    • メッセージ
    • 自宅兼事務所
    • Twitter
  • Blog
    • 技術ブログ
    • 学習ブログ
    • 雑記ブログ
  • Others
    • スケジュールのお知らせ
    • お問い合わせ
    • WEBに関する無料相談
  • Top
  • Service
  • Introduce
  • Blog
  • Contact

TypeScript 学習 part9

こちらの本でTypeScriptの学習を進めています。

前回は、ユーザーがゲームを選択できるようにしました。今回は、その続きです。

コミット履歴はこちら

行ったこと

ゲーム終了後にゲームを変更できるようにした

ゲーム終了後に、最初に選んだゲームを変更することが出来なかったので、ゲーム変更ができるようにしました。

before

【ゲーム開始時】 hit and blowか、jankenのどちらかを選ぶ

【ゲーム中】 選択したゲームで遊ぶ

【ゲーム終了後】 最初に選択したゲームで遊ぶか、ゲームを中止するかの2択

after

ゲーム終了後に、次に遊ぶゲームを変更できるようにしました。

change gameという定数を追加して、

const nextActions = ['play again', 'change game', 'exit'] as const

playメソッド内で、ユーザーがchange gameを選択した時の条件分岐を追加しました。

private async play() {
 //省略

 const action = await promptSelect<NextAction>('ゲームを続けますか?', nextActions)
    if (action === 'play again') {
      await this.play()
    } else if (action === 'change game') {
      await this.select()
      await this.play()
    } else if (action === 'exit') {
      this.end()
    } else {
      const neverValue: never = action
      throw new Error(`${neverValue} is an invalid action.`)
    }
  }

コードのリファクタリング

before

type GameStore = {
  'hit and blow': HitAndBlow
  'janken': Janken
}

after

type GameStore = {
  [key in GameTitle]: HitAndBlow | Janken
}

抽象クラスの作成

クラスの宣言

abstract class Game {
  abstract setting(): Promise<void>
  abstract play(): Promise<void>
  abstract end(): void
} 

クラスの利用

class HitAndBlow implements Game {
  //省略
}
class Janken implements Game {
  //省略
}

次回

次回は、ついにchapter4の「ブラウザで動くアプリケーションを作ってみよう」に入っていきます!

関連記事

2022.05.15 TypeScript TypeScript 学習 part10
2022.05.01 TypeScript TypeScript 学習 part8
2022.04.28 TypeScript TypeScript 学習 part7
2022.04.25 TypeScript TypeScript 学習 part6
2022.04.24 TypeScript TypeScript 学習 part5
2022.04.22 TypeScript TypeScript 学習 part4

サービス一覧

  • WEBサイトの更新サポート
  • 新規サイトコーディング

自己紹介

  • メッセージ
  • 自宅兼事務所
  • Twitter

ブログ

  • 技術ブログ
  • 学習ブログ
  • 雑記ブログ

その他

  • スケジュールのお知らせ
  • お問い合わせ