유형 스크립트 결합 유형에서 다른 속성 액세스

유형 스크립트 결합 유형에서 다른 속성 액세스

데이터베이스에서 객체를 처리하는 함수를 만들고 있습니다.같은 속성의 이름이 다른 두 개의 서로 다른 데이터 구조를 가지고 있습니다.나는 그것을 바꿀 수 없어서 자바스크립트로 처리해야 합니다.
개체에는 다른 차이점이 있지만, 이 기능에는 중요하지 않습니다.
저는 두 가지 다른 유형의 객체에 동일한 기능을 사용하고 싶습니다.다음은 문제를 보여주는 샘플 코드입니다.

interface TypeA {
    itemName: string;
}

interface TypeB {
    itemTitle: string;
}

function getItemName(item: TypeA | TypeB): string {
    let name = '';

    if (item.hasOwnProperty('itemName')) {
        name = item.itemName;
    } else {
        name = item.itemTitle;
    }

    return name;
}

물론, 이 코드는 실행됩니다.하지만 IDE는 두 줄을 모두 표시합니다.name = item.itemName;그리고.name = item.itemTitle;두 유형 모두 두 가지 속성을 가지고 있지 않기 때문에 오류("유형에 속성이 없습니다")로 표시됩니다.

그렇다면, 이것을 하는 적절한 타자기 방식은 무엇일까요?

사용자 정의 유형 가드를 만들어야 합니다. 그런 다음 if 문을 사용하여 올바른 입력을 받을 수 있습니다.

function isTypeA(value: TypeA | TypeB): value is TypeA {
    return value.hasOwnProperty('itemName');
}

그러면 타이핑을 훨씬 깨끗하게 할 수 있습니다.

function getItemName(item: TypeA | TypeB): string {
    return isTypeA(item) ? item.itemName : item.itemTitle;
}

여기서 확인해 보세요.항목이 유형 A 또는 유형 B에 올바르게 캐스팅되었습니다.

제가 조금 늦을 수도 있지만, 당신은 당신의 직무 안에서 이것을 시도할 수 있습니다.

if ('itemName' in item) {
    name = item.itemName;
} else {
    name = item.itemTitle;
}

너무 자주 하지 않으면 형식 주장을 할 수 있습니다.

if (item.hasOwnProperty('itemName')) {
    name = (item as TypeA).itemName;
} else {
    name = (item as TypeB).itemTitle;
}

또는

if (item.hasOwnProperty('itemName')) {
    name = (<TypeA>item).itemName;
} else {
    name = (<TypeB>item).itemTitle;
}

이 검사를 한두 번 이상 수행해야 할 경우 @Daryl이 제안하는 대로 유형 가드를 작성하는 것이 좋습니다.

interface TypeA {
  a: string
}
interface TypeB {
  b: string
}

const testFunction = (x: TypeA | TypeB): string => {
  return (x as TypeA).a || (x as TypeB).b;
}

testFunction({ a: 'Hello' }); // 'Hello'
testFunction({ b: 'World' }); // 'World'

Intellij는 다음 구문을 받아들입니다.

function getItemName(item: TypeA): string;
function getItemName(item: TypeB): string;
function getItemName(item): string {
    return item.hasOwnProperty('itemName') ? item.itemName : item.itemTitle;
}

타이프스크립트 문서에 따르면 공식적인 방법은 다음과 같습니다. https://www.typescriptlang.org/docs/handbook/functions.html

일을 복잡하게 만들지 않겠습니다.만약 당신의 객체가 하나 또는 다른 속성을 가지고 있다고 정말 확신한다면,name = item['itemName'] || item['itemTitle']또는name = item.hasOwnProperty('itemName') ? item['itemName'] : item['itemTitle']그것으로 충분할 것입니다.

TypeScript는 점 표기법 대신 괄호 표기법을 사용하여 속성에 액세스하는 경우 일반적으로 불만을 표시하지 않습니다.하지만 저는 댓글을 추가하는 것을 제안하고 싶습니다.

타이프가드 사용:

interface TypeA {
    itemName: string;
}

interface TypeB {
    itemTitle: string;
}

function isTypeA(val: any): val is TypeA
{
    return val.hasOwnProperty('itemName');
}

function isTypeB(val: any): val is TypeB
{
    return val.hasOwnProperty('itemTitle');
}

function getItemName(item: TypeA | TypeB): string
{
    let name = '';

    if (isTypeA(item))
    {
        name = item.itemName;
    }
    else
    {
        name = item.itemTitle;
    }

    return name;
}

언급URL : https://stackoverflow.com/questions/43496154/accessing-different-properties-in-a-typescript-union-type