1. Generics

実際、C#、Javaなどの言語で再利用可能なコンポーネントを作成する際にJENICがよく使われていると初めて聞きました.1つ以上のタイプで動作する構成部品を作成します.

2.基本形態

function logContent<T>(content: T): T{
	console.log(content);
	return content;
}

logContent('soryeongk');

呼び出し時に宣言時にタイプを決定しないことを許可します.Tは、タイプを表すために書かれている.いずれにしても、この名前はいいです.:)

// T를 굳이 안써도 됨
function logContent<soryeongk>(content: soryeongk): soryeongk {
  console.log(content);
  return content;
}

どうして書きますか。

上記の例に示すように、入力したデータを返す関数があるとします.stringを入力するとstringを返さなければなりません.numberを入力するとnumberを返さなければなりません.
簡単に言えば、以下のように書くことができます.

function logString<string>(content: string): string{
	console.log(content);
	return content;
}

function logNumber<number>(content: number): number{
	console.log(content);
	return content;
}

2つの関数は非常に似ています.jsでなければ、名前の異なる関数にすぎません.同じ機能を持つ関数タイプのために2回定義するのは、誰から見ても非効率です.
呼び出しポイントでタイプのJENICを定義することで、関数の重複問題を解決できます.

3-1. EungUnionは使えませんか?

もちろんいいですよ.パッと見る
送信するデータはstringまたはnumberでなければならないとします.下図に示すように、パラメータのタイプはstringまたはnumberのみです.

function logContent(content: string | number) {
  console.log(content);
  return content;
}

logContent('soryeongk');
logContent(25);

3-2. どうしてジェニーンリックを必要としたの?

今のような簡単な仕事をしないで、もう一つ追加します.

function logContent(content: string | number) {
  console.log(content);
  return content;
}

const name = logContent('soryeongk');
console.log(typeof name); // 결과는?
name.length // 결과는?

正解
console.logにはstringname.lengthがあります.

どうしたんですか.
nameはerrorと明確に認識されているが、stringによって提供されるstringは使用できない.これはlengthの因子タイプがlogContentであるため,本タイプにはstring | numberはないと考えられる.

3-3. ジェニーンリックでユニオンの代わりに

function logContent<T>(content: T): T {
  console.log(content);
  return content;
}

const name = logContent('soryeongk');
console.log(name.length) // 결과는?

正解
まだエラーが発生します.パラメータ文字列のprototypeを使用するには、JENICを使用してもパラメータのタイプを指定する必要があります.以下のように使用できます.

  function logContent<T>(content: T): T {
    console.log(content);
    return content;
  }

  const name = logContent<string>('soryeongk');
  console.log(name.length) // 9

4.再利用!

私の所属する学習グループのメンバーの情報を保存したいです.
学習園は霊、正、言、秀、姫、含です.齢児、正児、彦児、秀児は97年生まれ、熙児は98年生まれ、含児は98年近く生まれた.

interface SparTaS {
  name: string;
  born: number;
  isAbsent: boolean;
}

const ryeongE: SparTaS = { name: '령이', born: 97, isAbsent: false };
const jeongE: SparTaS = { name: '졍이', born: 97, isAbsent: false };
const eonE: SparTaS = { name: '언이', born: 97, isAbsent: false };
const heeYa: SparTaS = { name: '희야', born: 98, isAbsent: false };
// born: "빠른 98"
const suYa: SparTaS = { name: '수야', born: 97, isAbsent: true };

私は「含伊」と入力します.問題は年齢です.含伊は25歳ですが、実は虎です.だから私は塩を入力したいのはlengthで、残りはnumberを入力して、stringを加えることができません.

4-1. 何とかしよう！

次の方法で使用できます.

艦には別途タイプが指定されています.

艦はSparTasから除外された.

born部分をunionとして使用します.

インタフェースにGenericを追加します.

1番はあまりにも非効率で、2番は簡単ですが、冷たいです.
3つ目は、上記のようにnumberタイプで提供されているプロトタイプを使用できず、あまりよく見えないかもしれません.
だから4つの方法で実現しましょう!

4-2. インタフェースにジェニーリックを追加

まずは漬物を添えてやっぱり間違えた…!

SparTasのbornのみJENERICで解決しましょうか?!

    interface SparTaS<T> {
      name: string;
      born: T;
      isAbsent: boolean;
    }
    
    const ryeongE: SparTaS<number> = { name: '령이', born: 97, isAbsent: false };
    const jeongE: SparTaS<number> = { name: '졍이', born: 97, isAbsent: false };
    const eonE: SparTaS<number> = { name: '언이', born: 97, isAbsent: false };
    const heeYa: SparTaS<number> = { name: '희야', born: 97, isAbsent: false };
    const suYa: SparTaS<number> = { name: '수야', born: 97, isAbsent: false };
    const HamE: SparTaS<string> = { name: '함이', born: '빠른 98', isAbsent: false };

JENERICを使用しているので、新しいタイプの情報を適宜入れたり、後でnumberやstring自体の機能を使ったりすることができます!わあ!

5.ジェニーンリックのタイプを制限する

function logTextLength<T>(text: T): T {
	console.log(text.length);
	return text;
}

logTextLength('hi');

logTextLengthを定義するとき、Tにはどのようなタイプが含まれるか分かりません.関数でtextのlengthを撮影しようとすると、エラーが発生します.
だからTの中にString Arrayなどがlengthをサポートするタイプがある場合があります.

5-1. まず方法を教えてあげます。

方法

function logTextLength<T extends string>(text: T): T {
  console.log(text.length);
  return text;
}

logTextLength('hi');

方法

インタフェースの利用

interface lengthType {
  length: number;
}

function logTextLength<T extends lengthType>(text: T): T {
  console.log(text.length);
  return text;
}

logTextLength('soryeongk');

textが渡すタイプにはnumberタイプを持つlengthというpropertyがあります.

5-2. super TypeとsubType、extendsは拡張か制限か

恥ずかしいことに、正しい名前が빠른 98とsuperTypeであることはまだ確定していない.スーパーなにサーブなに...知っている人はコメントを残しましょう!

interface Person {
	name: string;
  age: number;
}

interface Developer {
	name: string;
  age: number;
  isFE: boolean;
}

上記のコードは次のように記述できます.

interface Person {
	name: string;
  age: number;
}

interface Developer extends Person {
	isFE: boolean;
}

このうち,開発者はPersonのサブタイプである.Personは開発者のスーパータイプです.
Personには2種類の開発者しかいませんよね?!
でもPersonはSuperDeveloperはSub
より多くの制限を持つ友达はsubになります.

例を見てみましょうか。

次のコードに表示されるエラーはいくらですか?

let person: Person;
let developer: Developer;

person = developer;  // 1번
developer = person;  // 2번

正解は2番:)理由がわからなければメッセージを!

5-3. キーの操作

keyofは、オブジェクトキーの文字値を取得します.

interface Person {
	name: string;
	age: number;
}

type test = keyof Person; // ('name', 'age')

これをジェニーンリックの制限に使ってみました.

interface Person {
    name: string;
    age: number;
}

function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

let person: Person = {
    name: 'soryeongk',
    age: 25
};

let myString: string = pluck(person, 'name'); 
let myNumber: number = pluck(person, 'age'); 
console.log(myString); // 결과는?
console.log(myNumber); // 결과는?

keyofで受信したキー値を限定するために!:)
2009年