TypeScriptのTips集

この記事は TypeScript Advent Calendar 2020 の 17 日目です。
今回は TypeScript のTipsをいくつかあげていきたいと思います！
割と基本的なものが多いので、普段から TypeScript をがっつり書いている方に取ってはすでに知っているものが多いかもしれません。ただ、意識しないとあまり使わなかったり、TypeScript の経験がない方に取っては新鮮なものもあるのでは？と思ったので書いてみました。

keyof

オブジェクトのキーを union 型に

type Post = {
  id: number;
  title: string;
  content: string;
};

type PostKey = keyof Post;
// type PostKey = "id" | "title" | "content"

使うときはこんな感じでしょうか

const sortBy = <T extends object, K extends keyof T>(
  objects: T[],
  key: K
): T[] => {
  return objects.sort((a, b) => a[`${key}`] - b[`${key}`]);
};

const posts = [
  { id: 1, title: 'test1' },
  { id: 3, title: 'test3' },
  { id: 2, title: 'test2' },
];

console.log(sortBy(posts, 'id'));
// [
//   { id: 1, title: 'test1' },
//   { id: 2, title: 'test2' },
//   { id: 3, title: 'test3' }
// ]

console.log(sortBy(posts, 'name'));
// Argument of type '"name"' is not assignable to parameter of type '"id" | "title"'

lookup

例えば API の返り値が次の型のようなとき
(GitHub API を参考にしています)
以下のように type のプロパティの型を取り出すことができる

type Response = {
  repository: {
    id: string;
    homepageUrl: string;
    issues: {
      edges: {
        node: {
          author: {
            url: string;
          };
          body: string;
        };
      };
      totalCount: number;
    }[];
  };
};

type Issues = Response['repository']['issues'];
// type Issues = {
//     edges: {
//         node: {
//             author: {
//                 url: string;
//             };
//             body: string;
//         };
//     };
//     totalCount: number;
// }[]

type IssueTotalCount = Issues[0]['totalCount'];
// type IssueTotalCount = number

utility

Partial

フィールド全てが Optional になる

type Post = {
  id: number;
  title: string;
};
type PartialPost = Partial<Post>;
// type PartialPost = {
//     id?: number;
//     title?: string;
// }
const post1: PartialPost = { id: 1 };

Required

フィールド全てが必須になる

type Post = {
  id: number;
  title: string;
  userId?: number;
};
type RequiredPost = Required<Post>;
// type RequiredPost = {
//     id: number;
//     title: string;
//     userId: number;
// }

Readonly

フィールド全てが 読み込み専用 になる

type Post = {
  id: number;
  title: string;
};

type ReadonlyPost = Readonly<Post>;
// type ReadonlyPost = {
//   readonly id: number;
//   readonly title: string;
// };
const readonlyPost: ReadonlyPost = { id: 1, title: 'readonly' };
readonlyPost.title = 'update';
// Cannot assign to 'title' because it is a read-only property.

Pick

指定した key だけ取り出す

type Post = {
  id: number;
  title: string;
};

type PickPost = Pick<Post, 'id'>;
// type PickPost = {
//     id: number;
// }

Omit

指定した key を除外する

type Post = {
  id: number;
  title: string;
  content: string;
};

type OmitPost = Omit<Post, 'id' | 'title'>;
// type OmitPost = {
//     content: string;
// }

Exclude

union 型から除外する

type RGB = 'red' | 'green' | 'blue';
type RG = Exclude<RGB, 'blue'>;
// type RG = "red" | "green"

ReturnType

関数の戻り値の型を取得できる

const add = (a: number, b: number): number => {
  return a + b;
};
type AddReturnType = ReturnType<typeof add>;
// type AddReturnType = number

他にも色々あります。
utility-types

as const

as constを宣言すると、それ以降は型推論で型が拡大せず、readonly になる。

let constPost = { id: 1, title: 'title', content: 'content' } as const;
// let constPost: {
//     readonly id: 1;
//     readonly title: "title";
//     readonly content: "content";
// }

enum は使うべきでないという話

よく言われているが、enum は非推奨
さようなら、TypeScript enum
TypeScript の enum を使わないほうがいい理由を、Tree-shaking の観点で紹介します

enum の代替としては次の感じ

const Country = {
  JAPAN: 'JAPAN',
  USA: 'USA',
  CHINA: 'CHINA',
} as const;

type Country = typeof Country[keyof typeof Country];

アサーション

null でないことが確信できる場合は、明示的に null でないことを指定できる

document.getElementById("test").innerHTML
// Object is possibly 'null'.
document.getElementById("test")!.innerHTML
// コンパイルエラーなし

let text;
if (...) {
  text = 'text1'
} else if (...) {
  text = 'text2'
}
text.substr(...)
// let text: string | undefined
// Object is possibly 'undefined'
text!.substr(...)
//コンパイルエラーなし

基本的には非推奨なので、?を使っておくのが無難

document.getElementById('test')?.innerHTML;

Template Literal Types

4.1 の目玉機能 Template Literal Types

template literal が型定義で使用できる。
一応 template literal を説明すると文字列の中に変数を埋め込める文法

const world = 'World';

console.log(`Hello ${world}!`);
// 'Hello World!';

type DataFormat = 'HTML' | 'JSON' | 'XML';
type Parser = `parse${DataFormat}`;
// type Parser = "parseHTML" | "parseJSON" | "parseXML"
type parser1: Parser = 'parseHTML'
type parser2: Parser = 'parseHogehoge'
// Type '"parseHogehoge"' is not assignable to type '"parseHTML" | "parseJSON" | "parseXML"'.

type Satoshi = `Satoshi${string}`;
const satoshi1: Satoshi = 'Satoshi';
const satoshi2: Satoshi = 'Satoshi Tanaka';
const notSatoshi: Satoshi = 'Taro Tanaka';
// Type '"Taro Tanaka"' is not assignable to type '`Satoshi${string}`'.

Template Literal Types があれば、もはや SQL にも型をつけることができる
ts-sql

最後に

TypeScript は柔軟に型が定義できて楽しいですが、普段から意識して使っていかないと勘が鈍るので積極的に使っていきたいですね。