TS-クラスとGeneral



プロトタイプ


JavaScriptは、オブジェクトを継承するためにプロトコルタイプと呼ばれる方法を使用します.JAvascriptは、継承方法と属性のテンプレートとしてすべてのオブジェクトにプロトタイプオブジェクト(prototype object)を持つプロトタイプベースの言語です.メソッドとプロパティは、親タイプのオブジェクトから継承するか、親タイプのオブジェクトとして継承することもできます.これをプロトタイプチェーンと呼び、あるオブジェクトで別のオブジェクトで定義されたメソッドとプロパティを使用できます.
継承されたプロパティおよびメソッドは、各オブジェクトではなく、オブジェクトの作成者のprototypeプロパティに定義されます.prototypeプロパティもオブジェクトであり、主にプロトタイプチェーンで継承するプロパティとメソッドを含むパケットとして使用されます.

なぜなら、オブジェクトを宣言するときに使用できるメソッドには、Objectというトップレベルのプロトタイプオブジェクトがあるからです.

カテゴリ


すなわち,原型に基づく継承は維持され,文法のみが変更される.
class Person{
    // 객체를 만들 때 호출됨
    constructor(name, age){
        this.name = name;
        this.age = age;
        console.log('생성되었음')
    }
}

const inkuk = new Person('사람',30);
function Person(name,age){
    this.name = name;
    this.age = age;
}

var capt = new Person('캡틴',100)
class Developer{
    // 변수의 접근 범위를 지정할 수 있다.
    private name:string;
    public age:number;
    readonly log:string;

    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
}

Generics


複数のタイプで1つのタイプよりも機能する構成部品を作成します.タイプスクリプトでは、関数のパラメータのようにタイプをJENERICと呼ぶことができます.関数を定義するときにタイプを定義するのではなく、呼び出し時にタイプを定義して、パラメータと戻り値の正確なタイプ推定を行うことができます.異なるタイプの関数を得るためには、同じ機能を持つ関数を複数回宣言する必要はありません.そのため、メンテナンスとコードの読み取り可能性が向上します.
タイプが定義されていない場合は、任意のタイプです.

stringタイプにgenericを加えるとstringタイプになります

既存の構文とGenericの違い

  • anyタイプとは異なり、JENIC定義タイプでJENICタイプに対応したメソッドを使用して機能を自動的に完了させることができます.
  • unionタイプと宣言した場合、入力値にはエラーはありませんが、共通属性のメソッドしか使用できません.
  • JENERIC宣言タイプを利用すれば、自動完了などの宣言のメリットを享受できます.
  • インタフェースでジェニーリックを宣言


    次の例では、EmailタイプとProductNumberタイプはvalueとselected propertyを有するが、valueのタイプは異なるため、2つのタイプとして宣言される.この場合、JENICはインタフェースで宣言できます.
    interface Email{value:string; selected:boolean}
    
    const emails:Email[] = [
      { value: 'naver.com', selected: true },
      { value: 'gmail.com', selected: false },
      { value: 'hanmail.net', selected: false },
    ];
    
    interface ProductNumber
    {value:number;selected:boolean}
    
    const numberOfProducts:ProductNumber[] = [
      { value: 1, selected: true },
      { value: 2, selected: false },
      { value: 3, selected: false },
    ];
    
    interface Dropdown<T>{
      value:T;
      selected:boolean;
    }
    
    const obj:Dropdown<string> = {
      value:'abc',
      selected:false
    }
    📑 referece
    - MDN - Object prototypes
  • インフラストラクチャ-タイプスクリプトエントリー(Capacityブリッジ)