TypeScriptについて学んだことをまとめる

以下のUdemyの講座を受講したので、学んだことをまとめていく。

いろいろな型

let bool: boolean = true;
let num: number = 1;
let str: string = 'abc';
let arr1: Array<number> = [0, 1, 2];
let arr2: number[] = [3, 4, 5];
let tuple: [number, string] = [1, 'aaa'];
let any1: any = false;
const funcA = (): void => {
  const test = 'TEST';
};
let null1: null = null;
let undefined1: undefined = undefined;
let obj1: object = {};
let obj2: { id: number; name: string } = { id: 1, name: 'aaaa' };

型指定

変数の型指定は、変数名の後に: 型名とする。
引数の型指定は、引数名の後に: 型名とする。
返り値の型指定は、引数指定の後に: 型名とする。

const calcTotalFee = (num: number): number => {
    const total: number = num * 1.1;
    console.log(total);
  };

型の定義

typeで型を定義できる。
型毎にファイルを分けて、importするような形にすると良い。

type User = {
  name: string;
  age: number;
};

Propsの型指定

FC<Propsの型名>を使用して以下のように記述する。

import { FC } from 'react';

type Props = {
  color: string;
  fontSize: string;
};

export const Text: FC<Props> = (props) => {
  const { color, fontSize } = props;
  return <p style={{ color, fontSize }}>text</p>;
};

型の一部の要素のみ必要な場合

PickまたはOmitを使う。
Pickは必要な要素をPick<型名, 要素1 | 要素2 | ...>の形で列挙する。
Omitは不要な要素をOmit<型名, 要素1 | 要素2 | ...>の形で列挙する。
下記の例は、propsとして、id以外の要素が必要であることを記述している。

import { FC } from 'react';

export type TodoType = {
  userId: number;
  id: number;
  title: string;
  completed?: boolean;
};

//Pickを使う場合
export const Todo: FC<Pick<TodoType, 'userId' || 'title' || 'completed'>> = (props) => {
  const { title, userId, completed = false } = props;
  const completeMark = completed ? '【完】' : '【未】';
  return <p>{`${completeMark} ${title}(ユーザー: ${userId})`}</p>;
};

//Omitを使う場合
export const Todo: FC<Omit<TodoType, 'id'>> = (props) => {
  const { title, userId, completed = false } = props;
  const completeMark = completed ? '【完】' : '【未】';
  return <p>{`${completeMark} ${title}(ユーザー: ${userId})`}</p>;
};

オプショナルチェイニング

下記のコードにおいて、user.hobbies.join(' / ')の部分は、
hobbiesが渡されていない場合、joinが失敗してエラーとなってしまう。
user.hobbies?.join(' / ')と?を追記することにより、hobbiesが渡されない場合、即座にundefinedを返して以降の処理を実行しないようにできる。

User.ts

export type User = {
  name: string;
  hobbies?: string[];
};

UserProfile.tsx

import { FC } from 'react';

type Props = {
  user: User;
};

export const UserProfile: FC<Props> = (props) => {
  const { user } = props;
  return (
    <dl>
      <dt>名前</dt>
      <dd>{user.name}</dd>
      <dt>趣味</dt>
      <dd>{user.hobbies.join(' / ')}</dd>
    </dl>
  );
};

外部パッケージの型指定

外部パッケージの型は、@typesから始まるパッケージに集約されている場合がある。
importで読み込むことにより、各種補完やチェックが働くようになる。