TypeScript에서 JavaScript 개체를 인터페이스 속성으로만 줄이는 방법은 무엇입니까?

JavaScript 객체를 인터페이스 속성으로 축소

TypeScript로 작업할 때 TypeScript에 선언된 속성만 포함하도록 JavaScript 객체를 축소해야 하는 경우가 종종 있습니다. 인터페이스. 이는 특정 스키마를 기대하는 REST 서비스에 데이터를 보낼 때 특히 유용합니다.

다음 인터페이스를 고려하세요.

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

그리고 추가 속성을 포함하는 구현:

<code class="typescript">class MyTest implements MyInterface {
  test: string;
  newTest: string;
}</code>

이 문제는 Angular의 toJson 메서드를 사용하여 REST 서비스로 보내기 위해 MyTest 인스턴스를 직렬화하려고 할 때 발생합니다. toJson 메서드에는 인터페이스의 일부가 아닌 newTest 속성이 포함되어 있습니다. 이로 인해 서버 측에서 오류가 발생할 수 있습니다.

이 문제를 해결하려면 MyInterface 인터페이스에 선언된 속성만 포함하도록 MyTest 인스턴스를 줄이는 방법을 찾아야 합니다. 그러나 TypeScript의 인터페이스는 기본적으로 런타임 표현이 없는 자리 표시자이므로 이는 직접적으로 불가능합니다.

대신 해결 방법을 사용할 수 있습니다. 한 가지 접근 방식은 인터페이스를 속성 초기화 프로그램이 있는 클래스로 정의하는 것입니다.

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

이 클래스를 인터페이스로 사용하면 Lodash와 같은 라이브러리를 사용하여 인터페이스와 일치하는 속성만 선택할 수 있습니다.

<code class="typescript">import _ from 'lodash';

const before = { test: "hello", newTest: "world"};
let reduced = new MyInterface();
_.assign(reduced , _.pick(before, _.keys(reduced)));
console.log('reduced', reduced); // { test: "hello" }</code>

이 솔루션은 MyInterface 인터페이스에 선언된 속성만 포함하도록 MyTest 인스턴스를 효과적으로 줄여 문제에 대한 간단하고 실용적인 솔루션을 제공합니다.

위 내용은 TypeScript에서 JavaScript 개체를 인터페이스 속성으로만 줄이는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!