reactでtypescriptの型の当てはめ方を知る

javascript

業務で、typescriptを扱う機会があったが、書き方が今までと違って感覚が掴みづらいところがあったので、一般的な使い方などを備忘録 & 暗記用ノートとして記事を作成しました。

typescriptを始めたばかりの人のお役に立つ記事になれればと思います。

基本的なtypescriptの記載方法

型定義の基本的な書き方

変数に型を定義する方法

// 文字列
const name:String = "test"
// 数値
const age:Number = 20
// 真偽値
const boolean:Boolean = true
// 全ての型を受け入れる場合
const value:any = "text" 

// 配列
const sex2:string[] = ["male", "female"]

// オブジェクト
const person: {
  name: string,
  age: number
} = {
  name: 'test',
  age: 20
}

// enum
 enum Role {
  ADMIN, CLIENT, USER
}

person = {
  role: Role.ADMIN
}

generics型

<>を使用して型定義をする方法。配列もgenericsを使用して型定義をすることができる。

// genericsを使用しない型定義
const sex2:string[] = ["male", "female"]

// genericsを使用した型定義
const sex1:Array<string> = ["male", "female"]

generic関数を作成する

下記のようにextendsを使用することで、Tがstring、Uをnumberで使用することができる(下記の例ではageはnumberである必要はありませんが…)

function person<T extends String, U extends Number>(name: T, age: U) {
  return `名前は${name}です${age}歳です`;
}

下記のように書くことも可能

interface PersonInfo {
  name: string;
  age: number;
}

function person<T extends PersonInfo>(element: T) {
  return `名前は${element.name}です${element.age}歳です`;
}

関数コンポーネント

import React from 'react';
const Test: React.FC = () => {
  return "test"
}

FCはfunctionコンポーネントであるという意味。関数の型が定義されているので、return値がないと型エラーになる。また、関数コンポーネントに引数を渡す場合はpropsの型定義をする必要がある。

返り値を持たない関数の場合(void)

import React from 'react';
const Test: () => void = () => {
  console.log('test')
}

関数が返り値を持たない場合はvoidを指定することで。返り値を持たない関数と型定義することができる。

関数コンポーネントの引数に型を持たせる

// propsにはitemsのいうキーの中にnameとageを持ったハッシュの配列が入ることを予想する。
interface TestProps {
  items: {
    name: string; age: integer;
  } [];
}

import React from 'react';
const Test: React.FC<TestProps> = props => { // <>内にinterfaceで定義した型を適用する
  return "test"
}

// --------------
// Test関数の呼び出し
const items = [{name: "test1", age: 18}, {name: "test2", age: 20}]
< Test items={items} /> // propsは上記のTestPropsの型に当てはめないといけない。

interface型で定義された型定義をFunction Componentで使用することができ、その型定義に当てはまらないpropsが渡されると構文エラーとなる。

コメント

タイトルとURLをコピーしました