type IObj = {
    name?: string
}
interface ISetKey {
    (obj: IObj, key: string): IObj
}
const setName: ISetKey = function (obj: IObj, name: string): IObj {
    if (!!!obj.name) obj.name = name
    return obj
}
const obj: IObj = setName({}, "张三")

上記のコードではオブジェクトの値を設定する関数を実装しましたが、一見何の問題もないように見えますが、上記のコードにage演算を追加すると

type IObj1 = {
    age?: number
}
const setAge: ISetKey = function (obj: IObj1, age: number): IObj1 {
    if (!!!obj.age) obj.age = age
    return obj
}
const obj1: IObj1 = setAge({}, 20)

ISetKey インターフェイスはほぼ書き直され、その構造もそれに応じて変更されます。

interface ISetKey1 {
    (obj: IObj1, key: number): IObj1
}

この小さな例を通して、ISetKey の 2 つの変数 O と K を使用して 2 種類のパラメータを表すと、インターフェイスまたは型で再利用の効果を実現できることがわかります。

interface ISetKey<O, K> {
    (obj: O, key: K): O
}

効果：

const setName: ISetKey<IObj, string>

const setAge: ISetKey<IObj1, number>

上記のコードをマスターすると、ジェネリックスを理解し、入門できたことがわかります。

一般的な命名規則

ジェネリックの定義では、特定の意味や規則を表現するために T または U を使用します。その目的は、コードの可読性を高めることです。もちろん、これらは慣例的な命名規則です。ジェネリックの記述方法は自由に選択でき、厳格な要件や規制はありません。参考までに、いくつかの一般的な記述方法を以下に示します。

共通 Tはtype（タイプ）、Uはunknown（未知）、Nはnumber（数値）、Vはvalue（値）を意味します

さらに、K 個のキー名、A 個の配列、R 個の関数戻り値、M 個のマッピングなどがあります。

ジェネリックスと型エイリアス

ジェネリックスで型を表現できるようになったので、型エイリアスを使用してジェネリック型パラメーターを型エイリアスの一部として使用できるようになりました。

type Animal<T, N> = {
    name: T
    age: N
}

const animal: Animal<string, number> = {
    name: "阿黄",
    age: 10
}

上記のコードでは、Animal タイプの動的記述を実現しています。T は名前のタイプを表し、N は年齢のタイプを表します。

ジェネリックスとインターフェース

インターフェイスでのジェネリックスの使用は型のエイリアスと非常によく似ています。パラメーターも定義されたインターフェイス名の後に宣言され、型が使用されるときに特定の型が動的に渡されます。配列と一部の属性および関数の記述方法は次のとおりです。

interface MyArray<T> {
    [num: number]: T
    length: number
    push: (...item: T[]) => number
    forEach: (cb: (item: T, i: number, arr: MyArray<T>) => void) => void
}
const list: MyArray<string> = ["a", "b"]
console.log(list.push("c"));
list.forEach(console.log)
console.log(list);
/*
输出:
3
a 0 [ 'a', 'b', 'c' ]
b 1 [ 'a', 'b', 'c' ]
c 2 [ 'a', 'b', 'c' ]
[ 'a', 'b', 'c' ]
*/

ジェネリックスと関数

ジェネリック関数は上記と同様に記述されます。

// 函数声明
function getValue<T>(val: T): T {
    return val;
}
// 函数表达式
const getValue1 = function <T>(val: T): T {
    return val;
}
// 箭头函数
const getValue2 = <T>(val: T): T => {
    return val
}

getValue<string>("abc")
getValue1<number>(123)
getValue2<boolean>(true)

ジェネリックとクラス

ジェネリックを使用してクラスを定義すると、クラス内のメンバーメソッドとプロパティをより柔軟で多用途にできます。ジェネリッククラスの使用は、ジェネリックインターフェイスの使用と似ています。ジェネリッククラスを表すには、クラス名の後に <T> を追加します。

interface IDog {
    name?: string
    likeMeat: boolean
}
interface ICat {
    name?: string
    likeFish: boolean
}
class Animal<Type>{
    constructor(public animalType: Type) { }
}
const dog: IDog = {
    name: "阿黄",
    likeMeat: true
}
const cat: ICat = {
    name: "小橘",
    likeFish: true
}
new Animal<IDog>(dog)
new Animal<ICat>(cat)

上記のコードでは、Animal クラスに渡される動物のタイプを表すために Type を使用します。IDog に渡すとき、クラスのインスタンスは、IDog に渡されるパラメータの実装を制限します。同様のことが ICat にも当てはまります。

一般的なデフォルト値

前回の記事では、パラメーターのオプション性について学びました。関数のパラメーターにはデフォルト値を指定できます。ジェネリックパラメータについても同様で、ジェネリック型パラメータが渡されない場合は、デフォルト値を使用してパラメータを置き換えることができます。上記のタイプエイリアスを使用した例

type Animal<T = string, N = number> = {
    name: T
    age: N
}

const animal: Animal = {
    name: "阿黄",
    age: 10
}

エピローグ

この記事では、ジェネリックスの基本について、ジェネリックスの使い方から、ジェネリックスの命名規則、ジェネリックスとインターフェイス、関数、型別名、クラスなどの書き方、ジェネリックのデフォルト値まで、ジェネリックスの基本的な使い方を紹介しましたので、参考になれば幸いです。

読んでいただきありがとうございます。記事から知識を得た場合は、ブロガーをサポートしてください。ご質問がある場合は、お気軽にプライベートメッセージまたはコメントを送信してください。ありがとうございます。

ジェネリックス - TypeScript マニュアル

ジェネリック TypeScript 入門チュートリアル

TypeScript (9) 一般的な基本

序文

この記事はTypeScript 知識のまとめ記事シリーズに含まれています。修正は歓迎です。

意味

基本的な使い方