「_」区切りの数値リテラル

使う場面は少ないかもしれませんが、こういう書き方があるのかと。
TypeScript独自機能ではなく、序盤はこういったECMAScriptの解説も充実。

const million = 1_000_000;
console.log(million) // 1000000

BigInt

使ったことなかったので、知らなかった。

const bignum: bigint = (123n + 456n)
console.log(bignum) // 579n

null or undefined

書籍でも解説はあったが、調べると以下の記事がより分かりやすかった。
結論としてはundefinedを使う。

typeof undefined; // "undefined"
typeof null; // "object"

structuredClone

lodashのmergeの代わりになるもの。

主要ブラウザはほぼ対応。

Node.js では 17.0.0 から、Deno では 1.14 以降、対応予定

type or interface

（型の）typeofをいつ使うか

基本的にはtypeで明示的に型宣言をする。
以下のようにすることで定数と型の管理が1ヶ所になる。

const commandList = ['attack', 'defend', 'run'] as const
type Command = typeof commandList[number] // type Command = ['attack', 'defend', 'run']

オブジェクトリテラルを返すアロー関数の省略記法

たしかにこう書けるなと。

type RtnObj = {
  bmi: number
}
const calcBmi = ({ height, wight }: Human): RtnObj => ({ bmi: weight / height ** 2 })

ただ、returnありのほうが多くの人が見慣れていて読みやすいと思う。

const calcBmi1 = ({ height, wight }: Human): RtnObj => ({
  bmi: weight / height ** 2,
  xxx: 123,
})

const calcBmi2 = ({ height, wight }: Human): RtnObj => {
  return {
    bmi: weight / height ** 2,
    xxx: 123,
  }
}

クラス型ではなく、あくまでオブジェクト。

class User {
  name = ''
  age = 0;

  isAdult(): boolean {
    return this.age >= 20
  }
}

const user: User = new User()
console.log(user.name)

const user2: User = {
  name: "hey",
  age: 15,
  isAdult: () => true
}
console.log(user2.name)

typeofによる絞り込み

const validate = (value: unknown): string => {
  if(typeof value === 'string') {
    return value
  }
  return "";
}

ユーザー定義型ガード

validate関数のような何が入っていくるか分からないものはunknownを使う。

const validate = (value: unknown): string => {
  if(isString(value)) {
    return value
  }
  return "";
}

// const isString = (v: unknown): boolean => typeof v === 'string'
const isString = (v: unknown): v is string => typeof v === 'string'

unknowにするとプロパティのチェックができずエラーになるのでこっちはanyにする。

type Human = {
  name: string
  age: number
}
const isHuman = (v: any): v is Human => {
  if (v == null) return false
  return typeof v.name === 'string' && v.age === 'number'
}

const validate = (value: unknown): Human => {
  if(isHuman(value)) {
    return value
  }
}

Template Literal Types とユーザー定義型ガードと正規表現を使ってEmail型を検証してみる

type Email = `${string}@${string}`
const email: Email = 'test@test.com'
const regex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
const isEmail = (v: string): v is Email => typeof v === 'string' && regex.test(v)

switch と if

switchがいいケース。

type Animal = {
  tag: 'animal'
}
type Human = {
  tag: 'human'
  name: string
}
type Robot = {
  tag: 'robot'
  name: string
}
type User = Animal | Human | Robot

// if文の場合、全て網羅してもundefinedが返る可能性があるとエラーがでる
function getUserName1(user: User): string {
  if(user.tag === 'human') {
    return user.name
  }
  if(user.tag === 'animal') {
    return '名無し'
  }
  if(user.tag === 'robot') {
    return user.name
  }
}

// switchの場合は「すべて網羅した」と認めてもらえる。defaultは書かない。
function getUserName2(user: User): string {
  switch(user.tag) {
    case 'human':
      return user.name
    case 'animal':
      return '名無し'
    case 'robot':
      return user.name
  }
}
getUserName1({ tag: 'robot', name: 'RX-123' })
getUserName2({ tag: 'robot', name: 'RX-123' })

組み込み型のPartialを見る

in keyof を使ってオプショナルにしていると。

type Partial<T> = {
  [P in keyof T]?: T[P];
};

値、型の変換の例

// 3つの文字列をもつユニオン型
type Fruit = "apple" |  "orange" |  "strawberry";

// mapped typesにより「appleというプロパティが型numberを持ち、...strawberryというプロパティが型numberを持つオブジェクト型」
type FruitNumbers = {
  [P in Fruit]: number
}

// FruitNumbers型のオブジェクトリテラルを作成
const numbers: FruitNumbers = {
  apple: 3,
  orange: 10,
  strawberry: 20,
}

// keyof typeofを使って、オブジェクトリテラルから3つの文字列をもつユニオン型を生成
type FruitKey1 = keyof typeof numbers;

// keyofを使ってFruitNumbers型からら3つの文字列をもつユニオン型を生成
type FruitKey2 = keyof FruitNumbers;

const fruit1: FruitKey1 = 'orange'
const fruit2: FruitKey2 = 'apple'

// FruitNumbersからFruitStringを作成
type FruitString = {
  [P in keyof FruitNumbers]: string
}

// FruitString型のオブジェクトリテラルを作成
const strings: FruitString = {
  apple: 'りんご',
  orange: 'みかん',
  strawberry: 'いちご',
}