웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
타입스크립트를 사용하면서 적절한 타입 선언이 중요합니다. 오늘은 Typescript의 Partial 타입에 대하여 간략히 알아보겠습니다.
타입스크립트를 사용하면서 전체가 아닌 타입의 일부만 필요할 때가 있을 수 있죠. 그럴 때, Partial 타입을 사용하여 전체가 아닌 일부만 타입 선언이 가능합니다.
Partial 타입은 타입스크립트에서 제공하는 유틸리티 타입 중 하나로, 주어진 타입의 모든 속성을 선택적(Optional)으로 타입을 선언해 사용할 수 있도록 만들어줍니다. Partial은 사전적 의미가 부분이라는 뜻을 가지고 있는데 타입스크립트 내에서 이와 같이 동작하게 만드는 역할을 합니다.
그럼 간단한 예시를 만들어보겠습니다.
먼저 아래와 같이 User라는 사용자 interface를 하나 만들겠습니다. 이 유저는 name과 age라는 프로퍼티 타입이 선언되어 있고 각각 string, number타입을 가지고 있습니다.
이제 이를 사용하나 userOne 이름의 객체를 만들어려고 합니다.
위 코드는 잘 동작하지 않습니다. User 인터페이스에는 name과 age가 선언되어 있는데 userOne은 name만 사용하고 있기 때문이죠. 이와 같이 일부만 사용하기 위한 목적으로 사용할 수 있는 방법이 바로 타입스크립트 Partial입니다.
이제 위 코드를 수정해 Partial을 사용하여 다시 작성해보겠습니다.
확인해보면 이제 코드가 에러 없이 정상적으로 동작하게 됩니다. 이처럼 전체가 아닌 일부의 값을 사용하기 위해서 Partial을 사용하는 것이 적절한 방법입니다.
[ 참고 ] 아래와 같이 Optional 속성인 ? 기호를 사용하여 interface를 수정하는 것도 생각할 수 있습니다. 에러는 발생하지 않을 것입니다. 다만 interface 자체의 수정이 필요하게 됩니다. age를 age?로 변경하였습니다.
한 가지 예제를 더 알아보겠습니다. 이번에는 상품에 사용하는 인터페이스 Product입니다. id, name, price 속성들의 타입을 가지고 있습니다.
이번에는 함수에서 특정 상품을 변경, 업데이트하기 위한 함수에 타입을 선언하였습니다.
위 코드를 실행하면? 아래와 같이 에러가 발생하게 됩니다.
이번에도 위와 같이 price 프로퍼티가 사용되지 않았기 때문입니다. 이제 타입에 Partial을 사용하여 아래와 같이 수정합니다.
동일하게 실행해보면 에러 없이 잘 동작하게 되었습니다.
여기까지 Partial에 대하여 간략히 알아봤습니다. 참고로 Partial과 비슷한 타입이 타입스크립트에 존재하는데 Readonly, Pick 같은 유틸리티 타입이 있습니다. 이 3가지는 함께 알아두면 좋은데 차이점을 간략히 알아보면 다음과 같죠.
- Partial // 객체의 일부 속성만 필요할 때나, 일부 속성만 업데이트하고자 할 때
- Readonly // 객체의 모든 속성을 읽기 전용으로 만들고자 할 때
- Pick // 객체의 특정 속성만 사용하고 싶을 때
어떤 것이 좋다고 얘기할 수는 없으며 각각 상황에 따라 필요한 유틸리티 타입을 적절히 선택하여 사용하는 것이 중요합니다.
위 내용을 요약하면 다음과 같습니다.
1. `Partial` 타입은 주어진 타입의 모든 속성을 선택적(Optional)으로 만든다.
2. `Partial`은 객체의 일부 속성만 필요할 때 유용하다.
3. `Readonly`와 `Pick`도 비슷한 목적으로 사용되지만, 각각의 용도에 맞게 사용해야 한다.
4. `Readonly`는 모든 속성을 읽기 전용으로, `Pick`은 특정 속성만 선택한다.
5. 상황에 따라 필요한 유틸리티 타입을 선택하여 사용한다.
여러분의 타입스크립트 프로젝트에 어떻게 타입을 선언하고 사용하느냐는 매우 중요합니다. Partial과 다른 유틸리티 타입들을 잘 활용하면 더욱 안정적인 코드 작성이 가능할 것입니다.
타입스크립트 Partial 알아보기
타입스크립트를 사용하면서 전체가 아닌 타입의 일부만 필요할 때가 있을 수 있죠. 그럴 때, Partial 타입을 사용하여 전체가 아닌 일부만 타입 선언이 가능합니다.
! Partial이란 무엇인가?
Partial 타입은 타입스크립트에서 제공하는 유틸리티 타입 중 하나로, 주어진 타입의 모든 속성을 선택적(Optional)으로 타입을 선언해 사용할 수 있도록 만들어줍니다. Partial은 사전적 의미가 부분이라는 뜻을 가지고 있는데 타입스크립트 내에서 이와 같이 동작하게 만드는 역할을 합니다.
그럼 간단한 예시를 만들어보겠습니다.
예제 1. User 인터페이스 만들기
먼저 아래와 같이 User라는 사용자 interface를 하나 만들겠습니다. 이 유저는 name과 age라는 프로퍼티 타입이 선언되어 있고 각각 string, number타입을 가지고 있습니다.
interface User {
name: string;
age: number;
}
name: string;
age: number;
}
이제 이를 사용하나 userOne 이름의 객체를 만들어려고 합니다.
const userOne: User = {
name: "홍길동"
};
// Error
Property 'age' is missing in type '{ name: string; }' but required in type 'User'.
name: "홍길동"
};
// Error
Property 'age' is missing in type '{ name: string; }' but required in type 'User'.
위 코드는 잘 동작하지 않습니다. User 인터페이스에는 name과 age가 선언되어 있는데 userOne은 name만 사용하고 있기 때문이죠. 이와 같이 일부만 사용하기 위한 목적으로 사용할 수 있는 방법이 바로 타입스크립트 Partial입니다.
❝
Partial을 사용하여 전체 타입 중 일부만 사용 가능
❞
Partial을 사용하여 전체 타입 중 일부만 사용 가능
❞
이제 위 코드를 수정해 Partial을 사용하여 다시 작성해보겠습니다.
const userOne: Partial<User> = {
name: "홍길동"
};
name: "홍길동"
};
확인해보면 이제 코드가 에러 없이 정상적으로 동작하게 됩니다. 이처럼 전체가 아닌 일부의 값을 사용하기 위해서 Partial을 사용하는 것이 적절한 방법입니다.
[ 참고 ] 아래와 같이 Optional 속성인 ? 기호를 사용하여 interface를 수정하는 것도 생각할 수 있습니다. 에러는 발생하지 않을 것입니다. 다만 interface 자체의 수정이 필요하게 됩니다. age를 age?로 변경하였습니다.
interface User {
name: string;
age?: number;
}
name: string;
age?: number;
}
예시2. 상품 정보 Product에 Partial 사용하기
한 가지 예제를 더 알아보겠습니다. 이번에는 상품에 사용하는 인터페이스 Product입니다. id, name, price 속성들의 타입을 가지고 있습니다.
interface Product {
id: number;
name: string;
price: number;
}
id: number;
name: string;
price: number;
}
이번에는 함수에서 특정 상품을 변경, 업데이트하기 위한 함수에 타입을 선언하였습니다.
function updateProduct(product: Product) {
// Update the product
}
updateProduct({ id: 2, name: 'belt' });
// Update the product
}
updateProduct({ id: 2, name: 'belt' });
위 코드를 실행하면? 아래와 같이 에러가 발생하게 됩니다.
// Error
Argument of type '{ id: number; name: string; }' is not assignable to parameter of type 'Product'.
Property 'price' is missing in type '{ id: number; name: string; }' but required in type 'Product'.
'product' is declared but its value is never read.
Argument of type '{ id: number; name: string; }' is not assignable to parameter of type 'Product'.
Property 'price' is missing in type '{ id: number; name: string; }' but required in type 'Product'.
'product' is declared but its value is never read.
이번에도 위와 같이 price 프로퍼티가 사용되지 않았기 때문입니다. 이제 타입에 Partial을 사용하여 아래와 같이 수정합니다.
function updateProduct(product: Partial<Product>) {
// Update the product
}
updateProduct({ id: 2, name: 'belt' });
// Update the product
}
updateProduct({ id: 2, name: 'belt' });
동일하게 실행해보면 에러 없이 잘 동작하게 되었습니다.
비슷한 유틸리티 타입 Readonly, Pick 알아보기
여기까지 Partial에 대하여 간략히 알아봤습니다. 참고로 Partial과 비슷한 타입이 타입스크립트에 존재하는데 Readonly, Pick 같은 유틸리티 타입이 있습니다. 이 3가지는 함께 알아두면 좋은데 차이점을 간략히 알아보면 다음과 같죠.
- Partial // 객체의 일부 속성만 필요할 때나, 일부 속성만 업데이트하고자 할 때
- Readonly // 객체의 모든 속성을 읽기 전용으로 만들고자 할 때
- Pick // 객체의 특정 속성만 사용하고 싶을 때
어떤 것이 좋다고 얘기할 수는 없으며 각각 상황에 따라 필요한 유틸리티 타입을 적절히 선택하여 사용하는 것이 중요합니다.
5줄 요약하기
위 내용을 요약하면 다음과 같습니다.
1. `Partial` 타입은 주어진 타입의 모든 속성을 선택적(Optional)으로 만든다.
2. `Partial`은 객체의 일부 속성만 필요할 때 유용하다.
3. `Readonly`와 `Pick`도 비슷한 목적으로 사용되지만, 각각의 용도에 맞게 사용해야 한다.
4. `Readonly`는 모든 속성을 읽기 전용으로, `Pick`은 특정 속성만 선택한다.
5. 상황에 따라 필요한 유틸리티 타입을 선택하여 사용한다.
여러분의 타입스크립트 프로젝트에 어떻게 타입을 선언하고 사용하느냐는 매우 중요합니다. Partial과 다른 유틸리티 타입들을 잘 활용하면 더욱 안정적인 코드 작성이 가능할 것입니다.
아래의 글도 찾고 계시지 않나요?
[typescript] 타입스크립트 클래스의 확장, 접근 제한자 사용 방법 알아보기
lodash omit() 메소드 알아보기
[Typescript] 1편. 짧고 쉽게 타입스크립트 이해하기
lodash pickBy() 사용방법 및 예제- React antd 라이브러리 Datepicker 컴포넌트
- Typescript 컴파일(transpiling)에 대한 빌드 속도 문제
캡처 및 그리기 픽픽 다운로드 정보 및 알아보기- 타입스크립트에서 세미콜론은 사용하지 말아야할까의 고민
- dateTimePicker UI 사용시 동적으로 날짜 format 변경하는 방법