概要

オンラインサロン IT_KINGDOM で、typescript について学んだことを備忘録としてメモしていきます。

学習内容

ダウンキャストとは
アップキャストとは
Non-null アサーション
Double アサーション

ダウンキャストとは

一度定義した型を厳密化すること
基本系はas XXXX(XXXX は定義したい型)またはas const
as constをつける方法を const アサーションという

// オブジェクトのプロパティの型はstringとなる（JavaScriptの仕様）
const theme1 = {
  color: "red",
};
theme.color = "blue"; // theme.colorの型はstringなのでエラーとならない

// as "red"をつけると、colorの型は"red"として定義される
const theme2 = {
  color: "red" as "red",
};
theme2.color = "blue"; // theme2.colorの型は"red"なのでエラーになる

// constアサーションの記法1
const theme1 = {
  color: "red" as const,
  flag: true,
};
theme1.color = "blue"; // theme1.colorの型は"red"でconstアサーションされているため、エラーとなる
theme1.flag = false; // theme1.flagの型はconstアサーションされてないため、エラーとならない

// constアサーションの記法2
const theme2 = {
  color: "red",
  backGroundColor: "blue",
} as const;
theme2.color = "blue"; // themeオブジェクトの型を厳密化されたのでエラーになる
theme2.backGroundColor = "green"; // themeオブジェクトの型を厳密化されたのでエラーになる

ダウンキャストは widening の防止にも役立つ

widening の詳細

// wideningにより、xの型は"red"ではなくstringとなる
export const color = "red"; // colorの型は"red"と厳密に定義
let x = color; // xの型はstringとなる

// constアサーションによるwideningの防止
export const color2 = "red" as const;
let x2 = color2; // xの型は"red"となる

アップキャストとは

一度定義した型を抽象化すること
型の抽象化。基本的には使うべきではない

export const color = "red" as const;
let x = color as any; // xの型はanyになる。

Non-null アサーション（非推奨）

str!とすることでstrが non-null であることを示す
読み取れない型をとりうる場合にエラーとする typescript の設定をオフにする
あまり使わない方が良い

export function getFirstLetter(str?: string) {
  return str.charAt(0); // strがstringでないケースがあるのでエラーとなる
}

export function getFirstLetter2(str?: string) {
  return str!.charAt(0); // strがundefinedの可能性を消し去る処理する
}

Double アサーション（非推奨）

一度型指定された変数に、as unknownやas anyをつけることで別の型をつける記法
あまり使わない方が良い
使うシーンとしては、外部パッケージが間違っている時など

export function getFirstLetter3(str: number) {
  // return (str as string).charAt(0);
  return (str as unknown as string).charAt(0);
}

参考サイト

TypeScript のコードレビューを依頼された人のための!と?の解説

 TypeScript Deep Dive

IT Kingdom