Class & Interface

この記事では、JavaScriptのclass構文とタイプスクリプトを整理します.また,インタフェース構文についても簡単に紹介する.

クラスとタイプスクリプト

クラスとフィールドの値

JavaScriptのclass構文は、類似の形式のオブジェクトデータを印刷するのに非常に適しています.
class構文には、すべてのサブオブジェクトで使用できる属性を共通属性にする機能もあります.
通常はフィールドと呼ばれ、次のように記述されます.

class Toy {
  color = "red";
}

このようにして作成すると、Toyクラスとして作成されたすべてのオブジェクトには、color="red"が属性として使用されます.別に指定しなくても.

フィールドタイプの指定

デルのタイプのスクリプトは、お客様の期待を裏切ることはありません.フィールドにタイプを指定することもできます.
次の方法で作成できます.

事実フィールドのタイプ指定は、私が文字列「red」を記入してからstringにデフォルト設定されます.
したがって、タイプを指定せずに、挿入したいデータ型を作成する場合は、自分でタイプを指定できます.

コンストラクタ

コンストラクション関数は、ES 6で新しく登場したクラスに関連する構文です.フィールドなどのサブオブジェクトに属性を共有しながら、パラメータを使用できます.
ちょっと複雑ですが、次のコードブロックを参照してください.理解が早いかもしれません.

class Freshman {
  constructor (a){
    this.name = a;
    this.age = 20;
  }
}

new Freshman("Park")

そうなると年齢は20だけど名前は「Park」の対象になるんですよね?
タイプスクリプトでコンストラクション関数を定義するときに注意したいのは、使用するプロパティを事前に定義する必要があります.さもないと間違いになる
上記の例では、nameとageはここにあります.エラーを回避するには、次のコードブロックのように記述します.

class Freshman {
  name;
  age;
  constructor (a){
    this.name = a;
    this.age = 20;
  }
}

コンストラクション関数でタイプを指定するには

上記の例では、コンストラクション関数のパラメータaがオブジェクトのname属性に入ることを許可する.
コードを書く過程で、nameに文字列以外のタイプを含ませないようにしたいです.
コンストラクション関数も最初は関数なので、パラメータにタイプを指定するだけでいいです.

class Freshman {
  name;
  age;
  constructor (a: string){
    this.name = a;
    this.age = 20;
  }
}

また、メソッドは同じタイプを指定することもできます.関数であるため、挿入するパラメータと結果値のタイプを指定できます.

Interface

インタフェースの紹介

インタフェース構文は、オブジェクトのタイプ管理をより簡単にする構文です.私が投稿で述べたtype文法と似た部分があります.
実際には、言語で説明するよりもコードの使い方が簡単です.

interface Toy { 
  color :string, 
  quantity :number, 
} 

let woody:Toy = { color : 'red', quantity : 2 } 

インターネットを使用してToyを作成し、WoodyがToyであることを示します.
typeと文法の差は多くないでしょう.

extendsの使用

インタフェース構文にはextendsキーワードを使用できるという大きな特徴があります.
2つのインタフェースを作成するとします.

interface Toy { 
  color :string, 
  quantity :number, 
}
  
interface Robot { 
  color :string, 
  quantity :number,
  isTransforming: boolean,
}

ToyとRobotの2つのインタフェースが作成されましたご覧のように、2つのインタフェースは色と数を共有します.
extendsを使用できます.

interface Toy { 
  color :string, 
  quantity :number, 
}
  
interface Robot extends Toy { 
  isTransforming: boolean,
}

RobotはToyの延長であるため、文字列属性colorと数値inquantityを有する.
タイプと呼ばれるisTransformingが追加されます.
この方法でextends構文を使用すると、似たような形状のオブジェクトをより詳細に置き換えることができます.

type文法との違い

インタフェース構文はtype構文に似ていると前述したが,extends構文と一定の関係がある.
インタフェース構文を使用するコードを見てみましょう.

// interface
interface Animal { 
  name :string 
} 
interface Dog extends Animal { 
  legs :number 
}

// type 문법
type Animal = { 
  name :string 
} 
type Dog = Animal & { legs: number }

インタフェースはextendsに簡単に書き込むことができますが、typeにはこのようなデバイスはありません.
最後の行のように、汎用タイプを指定するように他のタイプをマージします.
(ただし、インタフェースとして宣言できる方法は断面記号&)
重複タイプを宣言する場合でも、インタフェース構文とtype構文は異なります.

interface Animal { 
  name :string 
} 
interface Animal { 
  legs :number 
}

このように名前を繰り返すと、インタフェースは自分で名前を上書きします.
すなわち,以上のコードブロックの結果,Animalタイプはnameとlegsの両方を属性とする.

type Animal = { 
  name :string 
} 
type Animal = { 
  legs :number 
}

type構文では、タイプ名が重複するとすぐにエラーが発生します.もっと厳しいと言えるでしょう.
したがって、type構文は通常使用されますが、変更のために柔軟にタイプを指定する場合はinterface構文を使用します.
タイプ名の重複を許可するか、extendsを使用して変更および追加できます.