TypeScriptについて学習したので、まとめた

「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」を学習したのでまとめる

##### TypeScript
TypeScriptとは、Microsoftが開発したオープンソースの言語
JavaScriptに「型」という概念
より安全にバグが少なく開発できる
開発者間で認識を合わせやすい
エディタでコード補完も聞くので開発効率が良い
コンポーネント指向のReactと非常に相性が良い

「.ts」、「.tsx」の拡張子で表現される

###### 基本的な型
```typescript:sample.tsx
/**eslint-disable @typescript-eslint/no-unused-vars */

/** typeScriptの基本の型 */

//boolean
let bool: boolean = true;

//number 数値
let num: number = 0;

//string 文字
let str: string = "A";

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

//tuple
let tuple: [number, string] = [0, "A"];

//any
let any1: any = false;

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

//null
let  null: null = null;

//undefined
let undefined1: undefined

//object
let obj1: object = {};
let obj2 { id: number, name: string } = {id: 0, name: "AAA"};

```

###### 引数の型指定

```typescript:sample.tsx
export const Practice1 = () => {
  const calTotalFee = (num: number) => {   //引数の型指定(num: number)
    const total = num * 1.1;
    console.log(total);
  };

  const onclickPractice = () => calTotalFee("1000");
  return (
    <div>
      <p>引数の型指定</p>
      <button onClick={onclickPractice}>実行</button>
    </div>
  );
};
```

###### 返却値の指定
```typescript:sample.tsx
export const Practice2 = () => {
  const getTotalFee = (num: number): number => {
    const total = num * 1.1;
    return total;   //返却値の指定
  };

  const onclickPractice = () => {
    console.log(getTotalFee(1000));
  };

  return (
    <div>
      <p>返却値の型指定</p>
      <button onClick={onclickPractice}>実行</button>
    </div>
  );
};

```

###### 変数の指定
```typescript:sample.tsx
export const Practice3 = () => {
  const getTotalFee = (num: number): number => {
    const total = num * 1.1;
    return total;
  };

  const onclickPractice = () => {
    let total: number = 0;   //変数の指定
    total = getTotalFee(1000);
    console.log(total);
  };

  return (
    <div>
      <p>変数の型指定</p>
      <button onClick={onclickPractice}>実行</button>
    </div>
  );
};

```

###### propsの型定義

```typescript:todo.ts
export type TodoType = { //型定義
  userId: number;
  id: number;
  title: string;
  completed: boolean;
};
```

```typescript:Todo.tsx
import { TodoType } from "./types/todo"; //型のインポート

export const Todo = (
  props: Pick<TodoType, "userId" | "title" | "completed">
//Pick<TodoType, TからKeysに指定したキーだけを含むオブジェクトの型を返す
//Omit<T, Keys>, TからKeysで指定したプロパティを除いたobject型を返す

) => {
  const { title, userId, completed } = props;
  const completeMark = completed ? "[完]" : "[未]";
  return <p>{`${completeMark} ${title}(ユーザー:${userId})`}</p>;
};
```

###### コンポーネント自体の型定義
```typescript:MyComponenProps.tsx
type MyComponenProps = {
  children: React.ReactNode;
};

const MyComponent: FC<MyComponenProps> = (props) => {
  return (
    <div>{props.children}</div>
  );
};
```

###### ライブラリの型定義
```typescript:define.ts
react-router-dom  //ライブラリ
@types/react-router-dom  //ライブラリの型
```

ライブラリの型定義は、開発元から探す。
例)axiosのライブラリの型定義を確認したい
1.axiosライブラリのgithubへ移動する。
2.github上で「index.d.ts」を探す
3.2番が無ければ、github上のpackege.jsonの中の"typing"の項目があり、そこに記載がある場合がある。


###### 開発環境コマンド
開発環境では、下記コマンドでreact-typescriptを実施
```text:app
$ npx create-react-app my-app --template typescript
my-app部分は、実際のアプリ名
```
<!--
###### Reactのcssフレームワーク
material-ui:昔からある老舗的な位置づけ
tailwindcss:
semantic UI:
ant design:
chakura ui:

###### chakura ui
@chakra-ui/react
@emotion/react
@emotion/styled
framer-motion
をインストール

<ChakuraProvider></ChakuraProvider>のタグ内でchakura uiが使用できる

-->