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

TypeScript 学習 part3

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

前回は、「Chapter2 基本的な文法」を学習しました。今回は、Hit & Blowというゲームを作成するという内容のChapter3に入っていきます。

こちらのブランチにコミットしていきます。

行ったこと

TypeScriptの環境構築

ゲームを作成するフォルダで、TypeScriptをJavaScriptにビルドするための記述と、JavaScriptを実行するための記述を行いました。

TypeScriptをJavaScriptにビルドするための記述

node-app/package.json

{
  "scripts": {
    "build": "tsc"
  }
}

node-app/tsconfig.json(新規作成しました)

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  }
} 

この状態で、npm run build をターミナルに打ち込むとtsがjsにビルドされました。

JavaScriptを実行するための記述

node-app/package.json

{
  "scripts": {
    "start": "node dist/index.js"
  }
}

この状態で、npm run start をターミナルに打ち込むとjsのコードが実行されました。

node.jsの型定義の追加

「npm install -D @types/node@16.4.13」というコマンドを実行して、@typesというディレクトリを生成しました。

対話型の関数の作成

名前と年齢を入力すると、入力した値が表示されるという関数です。

node-app/src/index.ts

const printLine = (text: string, breakLine: boolean = true) => {
  process.stdout.write(text + (breakLine ? 'n' : ''))
}

const promptInput = async (text: string) => {
  printLine(`\n${text}\n>`, false)
  const input: string = await new Promise((resolve) => process.stdin.once('data', (data) =>
    resolve(data.toString())))
  return input.trim()
}

  ;(async () => {
    const name = await promptInput('名前を入力してください')
    console.log(name)
    const age = await promptInput('年齢を入力してください')
    console.log(age)
    process.exit()
  })()

次回

chapter3は、残り80ページほどなので、次回は時間を多めに割いて進めていきます。

最終的には、下記のようなゲームを作ることが目的です。

関連記事

2022.05.15 TypeScript TypeScript 学習 part10
2022.05.12 TypeScript TypeScript 学習 part9
2022.05.01 TypeScript TypeScript 学習 part8
2022.04.28 TypeScript TypeScript 学習 part7
2022.04.25 TypeScript TypeScript 学習 part6
2022.04.24 TypeScript TypeScript 学習 part5

サービス一覧

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

自己紹介

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

ブログ

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

その他

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