Type Script:ClassとInterfaces

By James Henry on January 12,2017
私たちはすでにJavascriptの中でclassという概念に接触しました.Type Scriptの中にももっと広く使われています.Type Scriptには、もう一つの類似の用法があります.interfaceといいます.
変数宣言では、classおよびinterfaceのどちらを使うべきですか?
この文章は上の問題を解くものです.
一例
この概念を理解するために、まず一つの例から始めます.

fetch('https://jameshenry.blog/foo/bar')
    .then((response) => {
        console.log(response.status) // Some HTTP status code, such as 200
    })

これはサーバからデータをフロントエンドに呼び出すコードです.
Type Scriptを使用してこのコードを実行すると、responseはanyタイプに強制的に変換され、これは間違いなく、responseタイプを示す情報がないためである.responseのタイプを限定すると、プログラムをより安全にコントロールできるようになります.responseをこのように指定してもいいです.

// `Response` will be defined here...

fetch('https://jameshenry.blog/foo/bar')
    .then((response: Response) => {
        console.log(response.status)
    })

問題の核心に着きました.classを使うべきですか?それともinterfaceをresponseのタイプとして使うべきですか?
インターフェースは何ですか
Type Scriptは変数の種類をチェックする時、一つのタイプを判断するキーポイントとして「アヒル型判断法」があります.
アヒルの鳴き声もアヒルのように見えるなら、それはアヒルです.
言い換えれば、特定の構造、形状または特徴を用いて分類される.
Type Scriptにおいて、interfaceはこのような分類方法であり、このタイプの名前を付けて、その後のプログラムで使用することができます.
アヒルのタイプ判断法を使ってinterfaceを作ります.

// A duck must have...
interface Duck {
    // ...a `hasWings` property with the value `true` (boolean literal type)
    hasWings: true
    // ...a `noOfFeet` property with the value `2` (number literal type)
    noOfFeet: 2
    // ...a `quack` method which does not return anything
    quack(): void
}

今はType Scriptの中で、もし私達がアヒルのタイプを指定するなら、彼のタイプを表示するのはDuckです.

// This would pass type-checking!
const duck: Duck = {
    hasWings: true,
    noOfFeet: 2,
    quack() {
        console.log('Quack!')
    },
}

// This would not pass type-checking as it does not
// correctly implement the Duck interface.
const notADuck: Duck = {}
// The TypeScript compiler would tell us
// "Type '{}' is not assignable to type 'Duck'.
// Property 'hasWings' is missing in type '{}'."

このようにType Scriptでは、指定されたタイプを通じて、プログラムに存在する可能性のある問題を事前に発見することができます.interfaceはType Scriptをコンパイルするだけでコンパイルが完了したら削除されます.コンパイル完了後のJavaScriptファイルには存在しません.Responseのinterfaceタイプを完成させましょう.

interface Response {
    status: number // Some HTTP status code, such as 200
}

fetch('https://jameshenry.blog/foo/bar')
    .then((response: Response) => {
        console.log(response.status)
    })

Type Scriptでコンパイルしても、エラーが発生しません.コンパイル後のJavaScriptファイルは以下の通りです.

fetch('https://jameshenry.blog/foo/bar')
    .then(function (response) {
    console.log(response.status);
});

コンパイルの間には、タイプ情報に関する内容があります.エラーがあったら、直ちに警告します.コンパイルが完了すれば、JavaScriptファイルにはタイプ情報の内容がありません.
クラスを使うclassの代わりにinterfaceを使用する場合、Responseのタイプとして使用する.

class Response {
    status: number // Some HTTP status code, such as 200
}

fetch('https://jameshenry.blog/foo/bar')
    .then((response: Response) => {
        console.log(response.status)
    })

私たちは簡単にinterfaceを交替しました.コンパイルする時もエラーを警告しませんでした.結果も同じです.
本当の違いは、JavaScriptファイルのコンパイル後です.interfaceと違って、classもJavaScriptの変数タイプですので、ここでは名前を変えただけではありません.classおよびinterfaceの最大の違いは、形状コンテンツだけでなく、他のコンテンツの実現方法も提供されることである.
これはclassに置き換えられた後のJavaScriptファイルです.

var Response = (function () {
    function Response() {
    }
    return Response;
}());
fetch('https://jameshenry.blog/foo/bar')
    .then(function (response) {
    console.log(response.status);
});

大きな変化が起きました.私たちはクラスがES 5タイプに転化しているのを見ましたが、今は全く意味のないJavaScriptコードです.しかし、私たちが大型のプログラムを持っている場合は、タイプ宣言としてclassを呼び出し続ける必要があります.このclassesには多くの内容が詰まっています.
総括と拡張
サーバまたは同様のモデルデータを新規に作成する場合は、classを使用することが望ましい.interfaceと違って、classesはコンパイル後に完全に削除されます.
もし私達がその後何度も同じinterfaceを使用するように調整するなら、私達はそれをinterfaceに変換して使用したほうがいいです.
今後、classクラスに注目してもいいです.abstractキーワードはインターフェースとクラスを同時に実現できます.