こんにちは、今回、新しい職場でTypeScriptを使うことになりました。
そこで、簡単に重要なポイントだけまとめて仕事をしようと思います!
実戦で即戦力として投入できるように、可能な限り早く、重要なことだけを取り上げていきます!

TypeScript とは？

TypeScript（以下、TS）は、JavaScriptに型を追加したプログラミング言語です。静的型付け言語で、変数や関数の型を明示的に指定することができます。

基本的な型

TSでは、基本的な型として number、boolean、Array、null、undefined、any などがあります。型の指定は変数の後にコロンで行います。

let num: number = 42;
let isValid: boolean = true;
let numbers: number[] = [1, 2, 3];
let nullableValue: null | string = null;
let anyValue: any = "Hello, TypeScript!";

関数の型指定

関数の引数や戻り値にも型を指定することができます。

function addNumbers(a: number, b: number): number {
  return a + b;
}

複合的な型

intersection（＆）の場合

const obj: { str: string } & { num : number } = {
 str: "A",
 num: 10,
};

obj.str = "20"; // OK
obj.num = "10"; // NG

union（|）の場合

let val1: string | number = "";
val1 = "A"; // OK
val1 = 10; // OK
val1 = []; // NG

オブジェクトの型

オブジェクトの型も指定できます。

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

let person: Person = {
  name: "John",
  age: 30,
};

 
ジェネリクスとカスタム型

ジェネリクスを使用して、柔軟で再利用可能な型を作成できます。

type Container<T> = {
  value: T;
};

let stringContainer: Container<string> = { value: "Hello, Generics!" };

APIで取得したデータを型定義

API応答例

{
  "id": 1,
  "name": "John Doe",
  "email": "john@example.com",
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "zipCode": "12345"
  },
  "orders": [
    {
      "orderId": "A123",
      "amount": 50.0
    },
    {
      "orderId": "B456",
      "amount": 30.0
    }
  ]
}

TypeScript型の定義

type Address = {
  street: string;
  city: string;
  zipCode: string;
};

type Order = {
  orderId: string;
  amount: number;
};

type ApiResponse = {
  id: number;
  name: string;
  email: string;
  address: Address;
  orders: Order[];
};

これで、ApiResponse型定義を使ってAPIで受け取ったデータを型で指定することができます。

APIの呼び出しと使用例

import axios from 'axios';

async function fetchUserData(): Promise<ApiResponse> {
  try {
    // 呼び出し時型定義
    const response = await axios.get<ApiResponse>('/api/user');
    return response.data;
  } catch (error) {
    console.error('Error fetching user data:', error);
    throw error;
  }
}

// 使用例
async function displayUserData() {
  try {
    const userData = await fetchUserData();
    console.log('User ID:', userData.id);
    console.log('User Name:', userData.name);
    console.log('User Address:', userData.address.city);
    console.log('User Orders:', userData.orders);
  } catch (error) {
...
  }
}

// 関数呼び出し
displayUserData();

<ApiResponse>: axios.get メソッドが返すPromiseの解決値が ApiResponse 型であることを指定しています。これにより、取得したデータの型が正しく推論され、型安全性が確保されます。

Props の型定義

Reactコンポーネントなどで使用されるPropsにも型を指定できます。

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

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  // コンポーネントの中身
};

型定義の管理方法

型を指定することができますが、全てのコンポーネントで型を指定すると重複したり、メンテナンスが大変になるので、typesというフォルダにまとめて管理します。エクスポートして他のコンポーネントでインポートしてそのタイプを使います。

省略可能な型定義とオプショナルチェイニング

一部の型定義を省略することができます。
また、オプショナルなプロパティやオプショナルチェイニングも利用できます。

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

let user: User = { name: "Alice" };
let userAge = user?.age;

これで、TypeScriptの基本的な概念と機能についての理解が深まったでしょう。それでは、Happy Coding!

【参考】

• じゃけぇ(岡田 拓巳)、『モダンJavaScriptの基本から始める React実践の教科書』、SBクリエイティブ、2021、202-238pp.

向上心のエンジニア
ソンさん