【React初心者メモ】型アノテーション（:）

型アノテーション（:）とは

型アノテーションとは、TypeScriptにおいて変数や関数の引数、戻り値の型を指定するものです。

具体例

基本：

//function関数
function greet(name: string) {
  console.log("こんにちは、" + name + "さん！");
}
greet("たろう"); 

//アロー関数
const greet = (name: string): void => {
  console.log(`こんにちは、${name}さん！`);
};
greet("たろう"); 

複数引数：

//function関数
function add(a: number, b: number): number {
  return a + b;
}

//アロー関数
const add = (a: number, b: number): void => {
  return a + b;
};

オブジェクトの引数：

//function関数
function printUser(user: { name: string; age: number }): void {
  console.log(`${user.name}は${user.age}歳です`);
}

//アロー関数
const printUser = (user: { name: string; age: number }): void => {
  console.log(`${user.name}は${user.age}歳です`);
};

配列の引数：

//function関数
function sumScores(scores: number[]): number {
  return scores.reduce((a, b) => a + b, 0);
}

//アロー関数
const sumScores = (scores: number[]): number => scores.reduce((a, b) => a + b, 0);

オプショナルな引数：

//function関数
//name?: string → name は文字列かもしれないし、無いかもしれない
function greet(name?: string): void {
  if (name) {
    console.log(`こんにちは、${name}さん！`);
  } else {
    console.log("こんにちは！");
  }
}

//アロー関数const greet = (name?: string): void => {
  if (name) {
    console.log(`こんにちは、${name}さん！`);
  } else {
    console.log("こんにちは！");
  }
};

デフォルト引数付き：

//function関数
function greet(name: string = "ゲスト"): void {
  console.log(`こんにちは、${name}さん！`);
}

//アロー関数
const greet = (name: string = "ゲスト"): void => {
  console.log(`こんにちは、${name}さん！`);
};

引数に配列の分割代入で型指定：

//function関数
function printCoords([x, y]: [number, number]) {
  console.log(`x: ${x}, y: ${y}`);
}

//アロー関数
const printCoords = ([x, y]: [number, number]): void => {
  console.log(`x: ${x}, y: ${y}`);
};

引数にオブジェクトの分割代入で型指定：

//function関数
function printProfile({ name, age }: { name: string; age: number }) {
  console.log(`${name}さんは${age}歳です`);
}
//アロー関数
const printUser = ({ name, age }: { name: string; age: number }): void => {
  console.log(`${name}さんは${age}歳です`);
};