[React] TypeScript基礎 #JavaScript

React初心者です。
React+TypeScriptについて勉強した時のTypeScriptについてのメモです。

TypeScriptとは？

Microsoftが開発したオープンソースの言語。
JavaScriptに型という概念を組み込むことで安全にバグの少ない開発ができるように。
開発者間で認識を合わせやすい。
エディタで補完が効くので開発効率UP。
コンポーネント志向のReactと相性がいい。

TypeScript基本の型

boolean型

let bool: boolean = true;

number型数値

let num: number = 0;

string型文字

let str: string = "AA";

Array型配列

let arr1: Array<number> = [0, 1, 2];
let arr2: number[] = [0, 1, 2];

any型どんな方でもエラーにならない

let any1: any = false;

void型関数の型でvoidは何も返却していないことを表す

何も返却していない場合は、TypeScriptが察してくれるのであえて書かなくても平気。

const funcA = (): void => {
  const test = "TEST";
}

null型 nullを表す。

let null1: null = null;

undefined型何も設定されていない状態を表す

let undefined1: undefined = undefined;

object　型オブジェクト内の型を指定

let obj: { id: number, name: string  } = {id: 0, name: "AAA" };

実装の例1 (引数に型指定)

export const Test = () => {
  const calcTotal = (num: number) => {
    const total = num * 5;
    console.log(total);
  };
  const onClickTest = () => {
    calcTotal(10);
  };

  return (
    <>
      <button onClick={onClickTest}>実行</button>
    </>
  );
};

計算した合計をコンソールで出力する。
この場合引数に型を指定しないとcalcTotal(10);の部分の数値に"1,000"のような形の文字列を入れた時NaNとコンソールに出力されてしまうので型を指定することで安全。
ちなみにcalcTotal("10");のような数値の文字列を入れた場合はJavaScriptが変換してくれるので計算結果が普通に出力される。

実装の例2 (返却値の型指定)

export const Test = () => {
  const calcTotal = (num: number): number => {
    const total = num * 5;
    return total
  };
  const onClickTest = () => {
    console.log(calcTotal(10));
  };

  return (
    <>
      <button onClick={onClickTest}>実行</button>
    </>
  );
};

今度は計算結果を返却する場合、返却値の型を指定することでtotalの値が数値であることを保証。

実装例3 (変数の型指定)

export const Test = () => {
  const calcTotal = (num: number): number => {
    const total = num * 5;
    return total
  };
  const onClickTest = () => {
    let total: number = 0;
    total = calcTotal(10)
    console.log(total);
  };
  return (
    <>
      <button onClick={onClickTest}>実行</button>
    </>
  );
};

変数の型を指定することで変数は数値であることを保証。