コベリンの最近の取り組みとして、業務などで役立ちそうな知見を共有する会を開催することになりました。そのついでに発表に使ったアジェンダもそのまま公開してしまおうという豪快な企画です。

※ アジェンダをそのままコピペして公開したものなので若干見にくい箇所もあるかもしれませんが、ご了承ください。

typescript の型のない世界からある世界への表現

概要

API などから取得したデータは型がないのでバリデーションした上で型を付ける必要がある。その方法の説明。

Swift でいうところの

Any や Data、Dictionary から何らかの型をつける作業. Codable だったり JSONSerialization を使う部分。

TypeScript でも型がつかない条件はよくある

API レスポンス

const resp = await api.get("/user")
// resp.body に HTTP response の body が入っているとしたら
// resp.body が any または unkown な状態

firebase firestore

const docRef = doc(db, "cities", "SF");
const docSnap = await getDoc(docRef);
// docSnap.data() には型がない

※ withConverter を使ってあげるといいよ。 https://firebase.google.com/docs/firestore/query-data/get-data#custom_objects

どうするか？

以降は API の例で User という型がある前提で行きます。

ダメなやり方

as User する。

const resp = await api.get("/user")
const user = resp.body as User

無理やり変換は良くない。

Type gurad する

これはまぁまぁ良い。

type User = {
  name: string
  id: string
}

function isUser(arg: unkonwn) arg is User {
   // User だったら true を返すように typeof とか使って自分で実装する
   return typeof arg.name === "string" && typeof arg.id === "string"
}

const body: any = getUser()
if (isUser(body)) {
  // body が user になってる
}

しかし、自分で type guard の関数をメンテするのが大変 & ロジックのミスも発生しがち。 ex) User に新しいプロパティー増えたときとか。また、type guard の関数で return true しても成立してしまう...