Bagaimana untuk Memastikan Objek JavaScript Hanya Mengandungi Sifat Antara Muka dalam TypeScript?

Mengurangkan Objek JavaScript kepada Sifat Antara Muka

Antaramuka TypeScript mentakrifkan kontrak untuk objek dan memastikan keselamatan jenis. Walau bagaimanapun, kadangkala anda mungkin perlu memastikan bahawa objek mengandungi hanya sifat yang ditentukan oleh antara muka.

Masalah:

Pertimbangkan kod TypeScript berikut:

<code class="ts">interface MyInterface {
  test: string;
}

class MyTest implements MyInterface {
  test: string;
  newTest: string;
}

const test: MyTest = { test: "hello", newTest: "world" };
const reduced: MyInterface = test; // reduced still contains "newTest"</code>

Mengapa ini bermasalah?

Apabila menggunakan kaedah toJson Angular sebelum membuat panggilan REST, sifat tambahan (newTest) disertakan dalam JSON, yang boleh menyebabkan masalah dengan perkhidmatan penerima.

Penyelesaian 1: Penyelesaian

James Moey menyediakan penyelesaian yang elegan: sebaliknya mengisytiharkan antara muka sebagai kelas dan gunakan Lodash untuk memilih sifat antara muka sahaja daripada objek:

<code class="ts">class MyInterface {
  test: string = undefined;
}

import _ from 'lodash';
let reduced = new MyInterface();
_.assign(reduced, _.pick(before, _.keys(reduced)));</code>

Penyelesaian ini membolehkan anda mengekalkan keselamatan jenis sambil memastikan objek yang terhasil hanya mempunyai sifat antara muka.

Penyelesaian 2: Fungsi Pembantu Antara Muka

Pendekatan lain ialah mencipta fungsi pembantu yang mengesahkan objek terhadap antara muka. Contohnya:

<code class="ts">interface MyInterface {
  test: string;
}

function reduceObject(obj: any, targetInterface: any): MyInterface {
  const reduced = {};
  Object.keys(targetInterface).forEach((key) => {
    if (obj[key] !== undefined) {
      reduced[key] = obj[key];
    }
  });
  return reduced;
}

const test: MyTest = { test: "hello", newTest: "world" };
const reduced: MyInterface = reduceObject(test, MyInterface);</code>

Pendekatan ini menggunakan introspeksi gelung untuk mengesahkan objek terhadap antara muka dan mengelakkan overhed fungsi pilih Lodash.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Objek JavaScript Hanya Mengandungi Sifat Antara Muka dalam TypeScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!