TypeScript의 구별된 공용체는 패턴 일치를 한 단계 더 발전시키는 강력한 기능입니다. 이를 통해 단순한 스위치 문을 넘어서는 복잡하고 유형이 안전한 조건부 논리를 만들 수 있습니다. 저는 최근 프로젝트에서 이 기술을 광범위하게 사용해 왔으며 TypeScript에서 제어 흐름에 접근하는 방식이 바뀌었습니다.
기본부터 시작하겠습니다. 구별된 공용체는 공통 속성을 사용하여 서로 다른 변형을 구별하는 유형입니다. 다음은 간단한 예입니다.
type Shape =
| { kind: 'circle'; radius: number }
| { kind: 'rectangle'; width: number; height: number }
여기서 '친절' 속성은 우리의 판별식입니다. 이를 통해 TypeScript는 해당 값을 기반으로 우리가 다루고 있는 특정 모양을 추론할 수 있습니다.
이제 패턴 일치에 이를 어떻게 사용할 수 있는지 살펴보겠습니다.
function getArea(shape: Shape): number {
switch (shape.kind) {
case 'circle':
return Math.PI * shape.radius ** 2
case 'rectangle':
return shape.width * shape.height
}
}
깔끔하지만 시작에 불과합니다. 우리는 이것을 훨씬 더 발전시킬 수 있습니다.
차별적인 노동조합의 가장 강력한 측면 중 하나는 철저한 점검입니다. TypeScript는 패턴 일치에서 가능한 모든 사례를 처리했는지 확인할 수 있습니다. 우리 조합에 새로운 형태를 추가해 봅시다:
type Shape =
| { kind: 'circle'; radius: number }
| { kind: 'rectangle'; width: number; height: number }
| { kind: 'triangle'; base: number; height: number }
function getArea(shape: Shape): number {
switch (shape.kind) {
case 'circle':
return Math.PI * shape.radius ** 2
case 'rectangle':
return shape.width * shape.height
// TypeScript will now warn us that we're not handling the 'triangle' case
}
}
이를 더욱 강력하게 만들기 위해 오류를 발생시키는 기본 케이스를 추가하여 실수로 새 케이스 처리를 잊지 않도록 할 수 있습니다.
function assertNever(x: never): never {
throw new Error("Unexpected object: " + x);
}
function getArea(shape: Shape): number {
switch (shape.kind) {
case 'circle':
return Math.PI * shape.radius ** 2
case 'rectangle':
return shape.width * shape.height
case 'triangle':
return 0.5 * shape.base * shape.height
default:
return assertNever(shape)
}
}
이제 getArea 함수를 업데이트하지 않고 새 모양을 추가하면 TypeScript에서 컴파일 시간 오류가 발생합니다.
하지만 패턴 일치를 사용하면 더 나아갈 수 있습니다. 중첩 패턴과 관련된 좀 더 복잡한 예를 살펴보겠습니다.
신호등을 위한 간단한 상태 머신을 구축한다고 상상해 보세요.
type TrafficLightState =
| { state: 'green' }
| { state: 'yellow' }
| { state: 'red' }
| { state: 'flashing', color: 'yellow' | 'red' }
function getNextState(current: TrafficLightState): TrafficLightState {
switch (current.state) {
case 'green':
return { state: 'yellow' }
case 'yellow':
return { state: 'red' }
case 'red':
return { state: 'green' }
case 'flashing':
return current.color === 'yellow'
? { state: 'red' }
: { state: 'flashing', color: 'yellow' }
}
}
여기서는 최상위 상태에서만 일치하는 것이 아니라 '깜박임' 상태에 있을 때 중첩된 속성에서도 일치합니다.
또한 가드를 사용하여 패턴 일치에 더욱 복잡한 조건을 추가할 수도 있습니다.
type WeatherEvent =
| { kind: 'temperature', celsius: number }
| { kind: 'wind', speed: number }
| { kind: 'precipitation', amount: number }
function describeWeather(event: WeatherEvent): string {
switch (event.kind) {
case 'temperature':
if (event.celsius > 30) return "It's hot!"
if (event.celsius < 0) return "It's freezing!"
return "The temperature is moderate."
case 'wind':
if (event.speed > 100) return "There's a hurricane!"
if (event.speed > 50) return "It's very windy."
return "There's a gentle breeze."
case 'precipitation':
if (event.amount > 100) return "It's pouring!"
if (event.amount > 0) return "It's raining."
return "It's dry."
}
}
이 패턴 일치 접근 방식은 스위치 문에만 국한되지 않습니다. if-else 체인이나 더 복잡한 시나리오의 경우 객체 리터럴과 함께 사용할 수 있습니다.
type Action =
| { type: 'INCREMENT' }
| { type: 'DECREMENT' }
| { type: 'RESET' }
| { type: 'SET', payload: number }
const reducer = (state: number, action: Action): number => ({
INCREMENT: () => state + 1,
DECREMENT: () => state - 1,
RESET: () => 0,
SET: () => action.payload,
}[action.type]())
이 접근 방식은 방문자 패턴을 구현할 때 특히 유용할 수 있습니다. 다음은 식별된 공용체를 사용하여 간단한 표현식 평가기를 구현하는 방법에 대한 예입니다.
type Expr =
| { kind: 'number'; value: number }
| { kind: 'add'; left: Expr; right: Expr }
| { kind: 'multiply'; left: Expr; right: Expr }
const evaluate = (expr: Expr): number => {
switch (expr.kind) {
case 'number':
return expr.value
case 'add':
return evaluate(expr.left) + evaluate(expr.right)
case 'multiply':
return evaluate(expr.left) * evaluate(expr.right)
}
}
const expr: Expr = {
kind: 'add',
left: { kind: 'number', value: 5 },
right: {
kind: 'multiply',
left: { kind: 'number', value: 3 },
right: { kind: 'number', value: 7 }
}
}
console.log(evaluate(expr)) // Outputs: 26
이 패턴을 사용하면 새로운 유형의 표현식으로 표현식 시스템을 쉽게 확장할 수 있으며 TypeScript는 평가 기능에서 모든 사례를 처리하도록 보장합니다.
이 접근 방식의 가장 강력한 측면 중 하나는 크고 복잡한 조건부 블록을 보다 관리하기 쉽고 확장 가능한 구조로 리팩터링할 수 있다는 것입니다. 좀 더 복잡한 예를 살펴보겠습니다.
다양한 유형의 금융 거래를 처리하는 시스템을 구축하고 있다고 상상해 보세요.
type Shape =
| { kind: 'circle'; radius: number }
| { kind: 'rectangle'; width: number; height: number }
이 예에서는 TypeScript의 매핑된 유형과 조건부 유형을 사용하여 각 키가 트랜잭션 종류에 해당하고 각 값이 해당 특정 유형의 트랜잭션을 처리하는 함수인 유형이 안전한 객체를 만들었습니다. 이 접근 방식을 사용하면 handlerTransaction 함수의 핵심 논리를 변경하지 않고도 새로운 유형의 트랜잭션을 쉽게 추가할 수 있습니다.
이 패턴의 장점은 형식이 안전하고 확장 가능하다는 것입니다. 새로운 유형의 트랜잭션을 추가하면 TypeScript는 해당 프로세서 기능을 추가하도록 강제합니다. 존재하지 않는 트랜잭션 종류를 처리하려고 하면 컴파일 타임 오류가 발생합니다.
차별화된 공용체를 사용한 이러한 패턴 일치 접근 방식은 특히 복잡한 애플리케이션에서 더욱 표현력이 풍부하고 안전하며 자체 문서화되는 TypeScript 코드를 생성할 수 있습니다. 이를 통해 읽기 쉽고 유지 관리가 가능한 방식으로 복잡한 논리를 처리할 수 있습니다.
애플리케이션이 복잡해짐에 따라 이러한 기술의 가치는 점점 더 높아지고 있습니다. 이를 통해 정확할 뿐만 아니라 이해하고 수정하기 쉬운 코드를 작성할 수 있습니다. TypeScript의 유형 시스템을 최대한 활용함으로써 즐겁게 작업할 수 있는 강력하고 유연한 시스템을 만들 수 있습니다.
목표는 단순히 작동하는 코드를 작성하는 것이 아니라 의도를 명확하게 표현하고 요구사항 변경에 따른 오류에 저항하는 코드를 작성하는 것임을 기억하세요. 구별된 공용체와의 패턴 일치는 이 목표를 달성하는 데 강력한 도구입니다.
내 경험상 이러한 패턴을 채택한 결과 코드 품질과 개발 속도가 크게 향상되었습니다. 구별된 공용체와 철저한 패턴 일치 측면에서 생각하는 데 익숙해지는 데는 시간이 좀 걸리지만 일단 그렇게 하고 나면 명확하고 유형이 안전한 방식으로 코드를 구조화할 수 있는 새로운 가능성이 열리게 될 것입니다.
TypeScript를 계속 탐색하면서 이러한 패턴을 자신의 코드에 적용할 기회를 찾아보는 것이 좋습니다. 아마도 복잡한 if-else 체인을 구별된 공용체로 리팩터링하여 작게 시작하십시오. 이 기술에 익숙해지면 코드를 단순화하고 명확하게 하기 위해 이 기술을 적용할 수 있는 곳이 점점 더 많아지기 시작할 것입니다.
TypeScript의 진정한 힘은 오류를 포착하는 능력뿐만 아니라 우리를 더 좋고 표현력이 풍부한 코드 구조로 안내하는 능력에 있다는 것을 기억하세요. 차별적인 공용체 및 철저한 패턴 일치와 같은 패턴을 수용함으로써 정확할 뿐만 아니라 읽고 유지 관리하는 즐거움도 있는 코드를 만들 수 있습니다.
저희 창작물을 꼭 확인해 보세요.
인베스터 센트럴 | 스마트리빙 | 시대와 메아리 | 수수께끼의 미스터리 | 힌두트바 | 엘리트 개발자 | JS 학교
테크 코알라 인사이트 | Epochs & Echoes World | 투자자중앙매체 | 수수께끼 미스터리 매체 | 과학과 신기원 매체 | 현대 힌두트바
위 내용은 TypeScript의 패턴 매칭 마스터하기: 코드의 성능과 안전성 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
