TypeScript의 결합 및 교차 유형

TypeScript의 결합 및 교차 유형

소개

강력한 유형의 JavaScript 상위 집합인 TypeScript는 JavaScript 개발에 강력한 유형 검사 기능을 제공합니다. 이러한 기능은 개발자가 오류를 조기에 포착하고 유지 관리가 더 쉬운 코드를 작성하는 데 도움이 됩니다. TypeScript의 강력한 기능 중에는 Union Types 및 Intersection Types가 있습니다. 이러한 유형은 복잡한 유형을 정의할 때 유연성과 정확성을 제공하며 이는 대규모 애플리케이션에 매우 중요할 수 있습니다.

이 기사의 목표는 TypeScript의 결합 유형과 교차 유형의 개념을 설명하는 것입니다. 이러한 유형을 결합하여 보다 표현력 있는 유형 정의를 생성하는 방법을 설명하기 위해 예제를 살펴보겠습니다. 이 기사를 마치면 TypeScript 프로젝트에서 이러한 유형을 효과적으로 사용하는 방법을 확실하게 이해하게 될 것입니다.

자, 더 이상 고민하지 말고 바로 시작해 보겠습니다.

사례 연구

아래에 이 밈이 있습니다.

https://www.picturepunches.com/meme/317642

대화에는 암묵적인 규칙이 있습니다. 여자에게 나이를 묻지 마세요, 남자에게 연봉을 묻지 마세요. 하지만 위험을 높이고 이를 더욱 흥미롭게 만들어 보겠습니다. 세 번째 규칙을 생각해 보세요. 코더에게 완료되지 않은 프로젝트 수를 절대 묻지 마세요. 나이, 수입, 포기한 사이드 프로젝트 등 어떤 비밀은 숨겨 두는 것이 가장 좋습니다. 왜냐하면 나이, 수입, 포기한 사이드 프로젝트 등 여러분이 아직 들을 준비가 되지 않은 이야기에서 답변이 나오는 경우가 많기 때문입니다.

자, 처음 두 항목인 남성과 여성에 집중해 보겠습니다.

	Dont ask 1	Dont ask 2	Should ask 1	Should ask 2
Man	Salary	Relationship	Address	Full name
Woman	Age	Weight	Address	Full name

TypeScript에서는 다음과 같은 유형을 만들 수 있습니다.

type Person = {
    gender: 'man' | 'woman',
    dontAsk: 'salary' | 'relationship' | 'age' | 'weight'
};

Person 유형을 기반으로 객체를 생성할 때 발생하는 문제

const person1: Person = {
    gender: 'man',
    dontAsk: 'weight',
};

const person2: Person = {
    gender: 'woman',
    dontAsk: 'salary',
};

위의 두 개체 모두 유형 오류를 표시하지 않습니다.

이 문제를 해결하기 위해 Intersection과 Union 유형이 등장합니다.

유니온 유형

Union Type을 사용하면 변수가 여러 유형 중 하나가 될 수 있습니다. 우리의 예에서는:

{
    gender: 'man',
    dontAsk: 'salary' | 'relationship'
} | {
    gender: 'woman',
    dontAsk: 'weight' | 'size'
}

유형 정의의 이 부분에서는 사람이 다음 두 가지 모양 중 하나일 수 있다고 명시합니다.

1. 성별이 'man'이고 dontAsk가 '급여' 또는 '관계'인 개체입니다.
2. 성별이 '여성'이고 dontAsk가 '체중' 또는 '나이'인 개체입니다.

이러한 유연성은 다양한 형식을 취할 수 있는 데이터를 처리할 때 유용합니다.

교차로 유형

교차 유형은 여러 유형을 하나로 결합합니다. 교차 유형의 변수는 모든 구성 유형을 만족해야 합니다. 우리의 예에서는:

& {
    address?: string,
    fullName: string
}

유형 정의의 이 부분에는 개인이 다음을 갖추어야 한다고 명시되어 있습니다.

• 문자열 유형의 선택적 주소 속성입니다.
• 문자열 유형의 필수 fullName 속성입니다.

Union 및 Intersection 유형 결합

완전한 개인 유형은 결합 유형과 교차 유형을 모두 결합합니다.

type Person = ({
    gender: 'man',
    dontAsk: 'salary' | 'relationship'
} | {
    gender: 'woman',
    dontAsk: 'weight' | 'age'
}) & {
    address?: string,
    fullName: string
};

Person 개체는 통합 유형 중 하나와 일치해야 하며 교차 유형에 정의된 속성도 포함해야 합니다. 유효한 Person 개체는 다음과 같습니다.

const person1: Person = {
    gender: 'man',
    dontAsk: 'salary',
    fullName: 'John Doe'
};

const person2: Person = {
    gender: 'woman',
    dontAsk: 'weight',
    fullName: 'Jane Doe',
    address: '123 Main St'
};

person1이 나이를 묻지 않도록 정의하면 오류가 표시됩니다. TypeScript 지원 기능이 내장된 Visual Studio Code에서는 개체를 가리키면 오류가 표시됩니다.

요약

TypeScript에서 Union Types 변수가 여러 유형 중 하나가 될 수 있도록 허용하는 반면, Intersection Types 여러 유형을 하나로 결합합니다. 이러한 유형을 이해하고 사용하면 보다 유연하고 강력한 TypeScript 코드를 작성할 수 있습니다. Person 유형 예는 이러한 개념을 결합하여 복잡하고 정확한 유형 정의를 만드는 방법을 보여줍니다.

TypeScript를 효과적으로 사용하면 코드 유지 관리성이 크게 향상될 수 있습니다. 새로운 개발자가 팀에 합류하면 명확한 유형 정의를 통해 긴 설명이 필요하지 않게 됩니다. 팀은 코드를 해독하는 대신 프로젝트의 흐름과 목표를 논의하는 데 집중하여 생산성과 협업을 높일 수 있습니다.

위 내용은 TypeScript의 결합 및 교차 유형의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!