Zenn
Open5

【Udemy】『リバーシで学ぶアプリケーション設計入門〜仕様の整理からTypeScriptでの実装まで〜』やってみた

TypeScript
Udemy
winnie279winnie279

はじめに

「TypeScriptをちゃんと理解したい 」×「 設計をちゃんと学びたい」ということで『リバーシで学ぶアプリケーション設計入門〜仕様の整理からTypeScriptでの実装まで〜』を購入してみました。正社員になったので書籍代で購入しています。書籍代は神。

ハンズオンしながら、分からなかったことや重要なことなどをメモしていきます。

winnie279winnie279

TypeScriptのセットアップ

M1 Macでコマンドを実行したところ、下記エラーが出ました。

$ brew install gpg gawk

  Error: Cannot install under Rosetta 2 in ARM default prefix (/opt/homebrew)!
  To rerun under ARM use:
      arch -arm64 brew install ...
  To install under x86_64, install Homebrew into /usr/local.

Rosettaで実行（？）しましたがその後asdfがないと怒られてしまい、結果的に以下のスクリプトで動きました。

$ arch -arm64 brew install gpg gawk  # 必要ないかも
$ arch -arm64 brew install asdf
$ asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
winnie279winnie279

TypeScript超入門

TypeScriptは少しだけ触ったことがあるので、基本的な部分はスルーします。

クラス

プライベートなフィールド（クラス内変数）は使ったことがありませんでした。

class Dog {
  private _name: string  // プライベートフィールド

  constructor(name: string) {
    this._name = name
  }

  // ゲッター
  get name() {
    return this._name
  }
}

コンストラクタには省略記法があります。省略記法はprivate変数でないと使えません（たぶん）。

- private _name: string  // プライベートフィールド
- 
- constructor(name: string) {
-   this._nane = name
- }
+ constructor(private _name: string) {}

インターフェース

クラス自体の型のような認識。
クラスがどのようなフィールド・メソッドを持っているか、あらかじめ定義しておきます。

// インターフェース
interface Animal {
  name: string  // nameフィールド
  eats(food: string): void  // eatsメソッド
}

// インターフェースを実装したクラス
class Cat implements Animal {
  constructor(private _name: string) {}

  get name() {
      return this._name
  }
  
  eats(food: string) {
    console.log(`${this.name} eats ${food}.`)
  }
}

// インターフェースを実装したクラスを受け取る関数
function eats(animal: Animal) {
  animal.eats('churu')
}

const cat = new Cat('Tama')
eats(cat)  // Tama eats churu.

DogクラスとCatクラスがあったとして、Animalインターフェースを実装していればどちらもeats()に渡せます。

winnie279winnie279

関数・コールバックと async/await を用いた非同期処理

関数の引数として渡す関数をコールバック関数と呼ぶ。

// 文字列とコールバック関数を受け取る関数
function wrapper(text: string, callback: (text: string) => void): void {
  callback(text)
}

// コールバック関数としてconsole.logを渡す
wrapper('text', console.log)  // text

以下のように、Array.map()に渡すアロー関数もコールバック関数の1つ。

const numbers = [1, 2, 3]
numbers.map((number: number) => number *2)  // (...) => number * 2がコールバック関数