クラスインスタンスVSインターフェイスVS汎用オブジェクト - パフォーマンス

Question

フロントエンドをコーディングできるようにモックデータを作成しています。

このデータは、クラスインスタンスまたは単純な旧式のjavascriptオブジェクトのインターフェイスにすることができます。私はボイラープレートのコードが気に入らないので、私はむしろjavascriptオブジェクトとして個人的にやってみたいと思います。

模擬データと実際のデータに対して、クラス、インターフェース、ジェネリックなjavascriptオブジェクトを使用するかどうかを決定する必要があります。

どちらがより効果的ですか？

クラス：

export class Result { 
    id: number; 
    brand: string; 
    name: string; 
    description: string; 
    image: string; 
    rating: number; 
    categories: string[]; 
    averagePrice: number; 
    amount: string; 
    reviews: Review[]; 
} 

モックデータ：私ができる意味

import { Result } from './result'; 
export const RESULTS: Result[] = [ 
    { id: 11, 
    name: 'dairy free parmesan alternative original', 
    brand: "Angel Foods", 
    image: "result-images/dairy_free_parmesan_alternative_original.jpg", 
    rating: 4.3, 
    categories: ["dairy"], 
    averagePrice: 6.60 
    }, 
    { id: 12, 
    name: 'dairy free mozzarella alternative', 
    brand: "Angel Foods", 
    image: "result-images/dairy_free_mozzarella_alternative.jpg", 
    rating: 3.9, 
    categories: ["dairy"], 
    averagePrice: 3.70 
    }, 
    { id: 13, 
    name: 'dairy free tasty cheese sauce', 
    brand: "Angel Foods", 
    image: "result-images/dairy_free_tasty_cheese_sauce.jpg", 
    rating: 3.7, 
    categories: ["dairy", "condiment"], 
    averagePrice: 5.50 
    }, 
    { id: 14, 
    name: 'dairy free mild cheese mix', 
    brand: "Angel Foods", 
    image: "result-images/dairy_free_mild_cheese_mix.jpg", 
    rating: 4.4, 
    categories: ["dairy", "TV dinner"], 
    averagePrice: 4.86, 
    amount: "400g" 
    }, 
    { id: 15, 
    name: 'sugar free dark chocolate salted caramel', 
    brand: "alpro", 
    image: "result-images/sugar_free_dark_chocolate_salted_caramel.png", 
    rating: 4.2, 
    categories: ["dessert", "Baking"], 
    averagePrice: 4.32, 
    amount: "400g" 
    }, 
    { id: 16, 
    name: 'drink for professionals', 
    brand: "Alpro", 
    image: "result-images/alpro_drink_for_professional.jpg", 
    rating: 2.1, 
    categories: ["beverage"], 
    averagePrice: 3.50, 
    amount: "400g" 
    }, 
    { id: 17, 
    name: 'custard', 
    brand: "alpro", 
    image: "result-images/alpro_custard.jpg", 
    rating: 4.9, 
    categories: ["dairy", "baking", "dessert"], 
    averagePrice: 4.50, 
    amount: "400g" 
    }, 
    { id: 18, 
    name: 'coconut dessert', 
    brand: "alpro", 
    image: "result-images/alpro_coconut_dessert.jpg", 
    rating: 3.1, 
    categories: ["dairy", "baking", "dessert"], 
    averagePrice: 6.50, 
    amount: "400g" 
    }, 
    { id: 19, 
    name: 'creamy caramel', 
    brand: "alpro", 
    image: "result-images/alpro_creamy_caramel.jpg", 
    rating: 4.7, 
    categories: ["dairy", "dessert"], 
    averagePrice: 6.50, 
    amount: "400g" 
    }, 
    { id: 20, 
    name: 'dairy free sour cream alternative', 
    brand: "Angel Foods", 
    image: "result-images/dairy_free_sour_cream_alternative.jpg", 
    rating: 4.5, 
    categories: ["dairy", "condiment"], 
    averagePrice: 4.8, 
    amount: "400g" 
    } 
]; 

だけjavascriptのオブジェクトであるかどうかをここで

は、私は現在、決定していたクラスの例です。結果クラスを取り除いてJSONオブジェクトにすると、JSONやjavascriptオブジェクトのようなオブジェクトを保持するためのクラスを少なくすると、長期間に渡ってより高速に処理できます。では、クラス/インターフェースを取り除き、JSONオブジェクトを使用することで、パフォーマンスが低下することはありますか？

reading a bit about performanceから、コンパイラにのオブジェクトが何であるかを知らせるように思えますが、そのオブジェクトがであると、パフォーマンスが向上します。この例は配列ですが、オブジェクトにも当てはまります。 EG：

// Here V8 can see that you want a 4-element array containing numbers: 
var a = [1, 2, 3, 4]; 

// Don't do this: 
a = []; // Here V8 knows nothing about the array 
for(var i = 1; i <= 4; i++) { 
    a.push(i); 
} 

私はそれが来ているものを知っているので、コンパイラがメモリ内のオブジェクトのために利用可能なスペースの多くを残すことを必要としないためであると推測しています。これは、クラスインスタンスがクラスなしのjavascriptオブジェクトより高速であることを意味します。

Answer 1

あなたがしたいのは、サーバーレスポンスを模倣するだけであれば、クラスではなくインターフェイスを使用することをお勧めします。

export interface IResult { 
    id: number; 
    brand: string; 
    name: string; 
    description: string; 
    image: string; 
    rating: number; 
    categories: string[]; 
    averagePrice: number; 
    amount: string; 
    reviews: Review[]; 
} 

インポート{IResult}から './interfaces/entities/result';

export const RESULTS: IResult [] = [ 
    { id: 11, 
    name: 'dairy free parmesan alternative original', 
    brand: "Angel Foods", 
    image: "result-images/dairy_free_parmesan_alternative_original.jpg", 
    rating: 4.3, 
    categories: ["dairy"], 
    averagePrice: 6.60 
    } 
    // ... 
]; 

のHTTP APIを使用すると、その名前から想像できるように、それはインタフェースで、活字体で、インターフェイスを使用して、それを定義することができ、「アプリケーション・プログラミング・インターフェース」です。