programing

TypeScript에서 입력된 개체 리터럴을 지정하려면 어떻게 해야 합니까?

padding 2023. 7. 2. 19:06
반응형

TypeScript에서 입력된 개체 리터럴을 지정하려면 어떻게 해야 합니까?

타이핑한 객체를 직접 문자 그대로 만드는 방법이 있습니까?

직접적인 의미는 주석이 달린 변수에 할당할 필요가 없다는 것입니다.

예를 들어, 다음과 같이 할 수 있습니다.

export interface BaseInfo { value: number; }

export interface MyInfo extends BaseInfo { name: string; }

function testA(): BaseInfo = {
   const result: MyInfo = { value: 1, name: 'Hey!' };
   return result;
}

또한 다음과 같이 수행할 수 있습니다.

function testB(): BaseInfo = {
   return { value: 1, name: 'Hey!' };
}

하지만 제게 필요한 것은 다음과 같습니다.

function testC(): BaseInfo = {
   return { value: 1, name: 'Hey!' }: MyInfo; // <--- doesn't work
}

이런 식으로.

function testD(): BaseInfo = {
   return MyInfo: { value: 1, name: 'Hey!' }; // <--- doesn't work
}

원래 답변은 ID 기능을 사용하는 것입니다.

function to<T>(value: T): T { return value; }
const instance = to<MyInfo>({
    value: 1,
    name: 'Hey!',
});

불필요한 통화에 대한 성능 영향이 없어야 합니다.to함수, JIT 컴파일러에 의해 최적화되어야 합니다.

2022년 9월 22일에 답변 업데이트:

마침내 TypeScript 팀은 이를 위한 도구를 만들었습니다.

const instance = { value: 1, name: 'Hey!' } satisfies MyInfo;

자세히 보기: https://github.com/microsoft/TypeScript/issues/47920

일부 스크린샷:

enter image description here

객체 리터럴의 구성원에 대한 인텔리전스는 표현식의 상황별 유형(규격의 섹션 4.19 참조)에 의해 제공됩니다.

다양한 방법으로 상황에 맞는 유형을 얻을 수 있습니다.상황별 유형이 적용되는 가장 일반적인 위치는 다음과 같습니다.

  • 유형 주석이 있는 변수의 이니셜라이저
  • 의 표현은return반환 형식 주석이 있는 함수 또는 게터의 문
  • 형식 어설션 식의 식(<T>expr)

예제에서 유형 어설션을 사용하여 개체 리터럴에 컨텍스트 유형을 지정할 수 있습니다.

function testB() {
   return <IMyInfo>{ name: 'Hey!' };
}

인터페이스는 오리 유형을 따릅니다. 개체가 인터페이스와 일치하는 것처럼 보이면 인터페이스와 일치합니다.

그렇게

function testB(): IBaseInfo = {
   return { name: 'Hey!' };
}

와 정확히 같습니다.

function testA(): IBaseInfo = {
   var result: IMyInfo = { name: 'Hey!' };
   return result;
}

어느 쪽이든 반환된 개체는 IMyInfo와 유사하므로 IMyInfo입니다.함수 내부에서 발생하는 어떤 일도 일치하는 인터페이스에 영향을 주지 않습니다.

그러나 예제에서 함수의 반환 값은 IBaseInfo이므로 컴파일러와 인텔리센스는 개체가 IBaseInfo일 뿐이라고 가정합니다.함수 호출자가 반환 값이 IMyInfo임을 알게 하려면 함수 IMyInfo의 반환 값을 만들어야 합니다.

function testB(): IMyInfo = {
   return { name: 'Hey!' };
}

또는 단순히 유형 추론을 사용합니다.

function testB() = {
   return { name: 'Hey!' };
}

유형 안전을 위해 다음과 같은 방법이 있습니다.

인터페이스 예:

interface IFoo {
  firstName: string;
  lastName: string;
}

함수 결과 유형 지정

function useResultType(): IFoo {
  return {
    firstName: 'mars'
    // compile error, when lastName is missing
    // , lastName: 'xx'
  };
}

상수를 반환합니다.

function resultVariable() {
  const result: IFoo = {
    firstName: 'mars'
    // compile error, when lastName is missing
    // , lastName: 'xx'
  };
  return result;
}

일반 ID 함수 사용(참고: rxjs에는 ID 함수가 있음)

function ident<T>(value: T): T {
  return value;
}
function identityFunction() {
  return ident<IFoo>({
    firstName: 'mars'
    // compile error, when lastName is missing
    // , lastName: 'xx'
  });
}

당신이 단지 타입 어설션을 사용할 때 - 당신이 다른 타입을 반환할 때 컴파일러는 오류를 보이지 않을 것입니다 (예를 들어, 나는 그 예들에서, 나는 그것을 "잊어버렸다").lastName회원)

function asCast() {
  return {
      firstName: 'mars'
    // NO error
  } as IFoo;
}

function cast() {
  return <IFoo>{
      firstName: 'mars'
    // NO error
  };
}

Typescript Playground에서 예제를 확인할 수 있습니다.

당신의 첫 번째와 두 번째 예시는 실패하기 때문에 그렇게 할 수 없습니다.:)

당신은 당신의 리터럴에 어떤 유형도 지정할 필요가 없다고 꽤 확신합니다.당신의 문자가 인터페이스 요구사항을 충족하는 한, 당신은 좋습니다.

interface IMyInfo { name: string; }
var asdf = {
   name: "test"
}

var qwer: IMyInfo = asdf;

인텔리전스를 사용하려면 다음과 같은 작업을 수행해야 합니다.

enter image description here

아니면 이것이 당신이 찾고 있는 것일 수도 있습니다.인텔리센스는 적어도 운동장에서 작동합니다.

enter image description here

아니면 이것도.:)

enter image description here

언급URL : https://stackoverflow.com/questions/19456105/how-can-i-specify-a-typed-object-literal-in-typescript

반응형