Typescript Generic

1.Genericとは?

Genericはデータ型の汎用化です.
資料の種類を特定せずに複数のタイプを使用できます.
JENICは、宣言時にタイプを指定するのではなく、作成時にタイプを指定します.
利用可能なので、宣言します.
再利用できるメリットがあります.

2.ジェニーンリックを使う理由

JavaScriptは、変数を宣言するときにデータ型を定義することなく正常に動作します.
これにより、コードがより柔軟になり、他のデータ型の値を収容することができ、コードがより混乱し、エラーが発生しやすくなります.
また、タイプが指定されていない場合は、不要なタイプ変換が行われ、プログラムのパフォーマンスに影響します.
したがって,JENICを用いてタイプを指定すると,不要なタイプ変換を行うことなくプログラムの性能を向上させるとともに,プログラムの安定性を向上させることができる.
ソフトウェアの設計と開発では、定義が良好で一貫したAPIを構築するだけでなく、再利用可能なコンポーネントを構築する必要があります.
現在および将来のデータを処理できるコンポーネントは、柔軟なシステム構成能力を提供します.

JennyがTypescriptしか使わなかったら…。

const aaa = (arg: number): number => {
	return arg;
}

const aaa = (arg: any): any => {
	return arg;
}

上記のように、予めタイプを指定したり、any実装を使用したりすることができます.
しかし、事前にタイプを指定すれば、正確なタイプチェックは可能ですが.
常にnumberタイプを受け入れるので汎用性が悪い.
ただし、anyを使用する場合は、データのタイプを制限することはできません.
この関数がどのようなタイプのデータを返すか分かりません.
タイプを指定できないため、タイプをanyにマッピングするスクリプトは、開発者ではanyスクリプトと呼ばれます.JENICを使用してanyスクリプトにならないようにします.

3.ジェニーリックを使う

次はジュネーブを使用していないコードです.
ジェニーン・リックをこのコードに適用しましょう.

import { useQuery } from "@apollo/client";
import { useRouter } from "next/router";
import { gql } from "@apollo/client";

const FETCH_BOARD_COMMENTS = gql`
  query fetchBoardComments($boardId: ID!, $page: Int) {
    fetchBoardComments(boardId: $boardId, page: $page) {
      _id
      writer
      contents
      createdAt
      rating
    }
  }
`;

export default function BoardCommentList() {
  const router = useRouter();

  // useQuery
  const { data } = useQuery(FETCH_BOARD_COMMENTS, {
    variables: { boardId: String(router.query.boardId) },
  });

  return <BoardCommentListUI data={data} />;
}

下の図に示すように、userQueryはquery文にfetchBoardCommentsを含み、Graphsql-APIを要求する.
タイプスクリプトは、次のコードを表示し、queryのタイプとqueryのfetchBoardCommentsのタイプを推定します.

const FETCH_BOARD_COMMENTS = gql`
  query fetchBoardComments($boardId: ID!, $page: Int) {
    fetchBoardComments(boardId: $boardId, page: $page) {
      _id
      writer
      contents
      createdAt
      rating
    }
  }
`;

// useQuery
  const { data } = useQuery(FETCH_BOARD_COMMENTS, {
    variables: { boardId: String(router.query.boardId) },
  });

したがって、上記のコードが以下のタイプの説明を参照する場合


Genericを適用すると、次のコードが生成されます.

import { useQuery } from "@apollo/client";
import {
  IQuery,
  IQueryFetchBoardCommentsArgs,
} from "../../../../commons/types/generated/types";
import { FETCH_BOARD_COMMENTS } from "./BoardCommentList.queries";

export default function BoardCommentList() {
  const router = useRouter();

  // useQuery
  const { data } = useQuery<
    Pick<IQuery, "fetchBoardComments">,
    IQueryFetchBoardCommentsArgs
  >(FETCH_BOARD_COMMENTS, {
    variables: { boardId: String(router.query.boardId) },
  });

  return <BoardCommentListUI data={data} />;
}

では、なぜ上記のコードが書かれたのかを死体検査してみましょう.
importの部分は説明しません
次のコードは、queryのタイプ宣言に従ってJENICが適用された部分です.

    Pick<IQuery, "fetchBoardComments">

上へ転がるのがおっくうで、下から見せてあげます.
次のタイプがあります.すなわち,tsの類型名詩に基づいて推論する.

export type IQuery = {
	fetchBoardComments: Array<IBoardComment>;
}

ただし、上記のジュネーブ適用コードは以下の通りです.

<Pick<IQuery, "fetchBoardComments">, IQueryFetchBoardCommentsArgs>

これは、fetchBoardCommentsのタイプ宣言が以下のようになっているためです.
この部分も推論のために書かれたコードです.

簡単な説明のために、私は分かりやすい構造でジェニーリックを書きます.

<고른다<IQuery의, "fetchBoardComments타입 명시">와 IQueryFetchBoardCommentsArgs타입 명시를>

タイプスクリプトに触れたばかりで、私の理解が正しいかどうか分かりません.
私はそう理解している人です~と参考にしたほうがいいです😂