요약: 이 글에서는 TypeScript에서 타입 별칭, 인터페이스, 제네릭의 사용법을 소개합니다. 개발자들이 일하다가 모르는 것이 있다면 이 글을 참고하여 TypeScript를 더 효율적으로 사용할 수 있습니다.
타입 별칭(Type Aliases)
타입 별칭은 기존 타입에 대한 새로운 이름을 정의할 수 있는 기능입니다. type 키워드를 사용하여 타입 별칭을 선언할 수 있습니다.
타입 별칭 예제
type Point = {
x: number;
y: number;
};
function printPoint(point: Point) {
console.log(`x: ${point.x}, y: ${point.y}`);
}
const point: Point = { x: 1, y: 2 };
printPoint(point);
인터페이스(Interface)
인터페이스는 객체의 타입을 정의하는 방법 중 하나입니다. 인터페이스를 사용하면 코드의 가독성을 높이고, 객체가 정의한 규약을 따르도록 강제할 수 있습니다.
인터페이스 예제
interface Point {
x: number;
y: number;
}
function printPoint(point: Point) {
console.log(`x: ${point.x}, y: ${point.y}`);
}
const point: Point = { x: 1, y: 2 };
printPoint(point);
인터페이스 확장
인터페이스는 다른 인터페이스를 확장할 수 있습니다. 이를 통해 기존 인터페이스에 새로운 속성이나 메서드를 추가할 수 있습니다.
interface Shape {
color: string;
}
interface Circle extends Shape {
radius: number;
}
const circle: Circle = { color: 'red', radius: 5 };
제네릭(Generic)
제네릭은 함수, 인터페이스, 클래스의 일부분에 타입을 미리 지정하지 않고 추후에 지정할 수 있게 하는 기능입니다. 제네릭을 사용하면 코드의 중복을 줄이고, 재사용성을 높일 수 있습니다.
제네릭 예제
function identity<T>(arg: T): T {
return arg;
}
const numberValue = identity<number>(42);
const stringValue = identity<string>('Hello, TypeScript!');
제네릭 인터페이스
인터페이스에 제네릭을 적용할 수 있습니다. 이를 통해 동일한 인터페이스에 다양한 타입을 적용할 수 있습니다.
interface GenericIdentityFn<T> {
(arg: T): T;
}
const numberIdentity: GenericIdentityFn<number> = identity;
const stringIdentity: GenericIdentityFn<string> = identity;
제네릭 클래스
클래스에도 제네릭을 적용할 수 있습니다. 제네릭 클래스를 사용하면 여러 타입에 대한 처리를 하나의 클래스에서 할 수 있습니다.
class GenericBox<T> {
private _value: T;
constructor(value: T) {
this._value = value;
}
getValue(): T {
return this._value;
}
setValue(value: T): void {
this._value = value;
}
}
const numberBox = new GenericBox<number>(42);
const stringBox = new GenericBox<string>('Hello, TypeScript!');
제네릭 조건
제네릭에서 특정 조건을 갖는 타입만을 사용하도록 제한할 수 있습니다. 이를 통해 더 안전하게 타입을 사용할 수 있습니다.
interface Lengthwise {
length: number;
}
function logLength<T extends Lengthwise>(arg: T): T {
console.log(arg.length);
return arg;
}
logLength({ length: 10 }); // 가능
logLength(42); // 오류: number 타입에는 length 속성이 없음
이 글에서는 TypeScript에서 타입 별칭, 인터페이스, 제네릭의 사용법을 소개했습니다. 이러한 기능을 활용하면 코드의 가독성과 재사용성을 높일 수 있으며, 더 안전하게 타입을 사용할 수 있습니다. 개발자들이 일하다가 모르는 것이 있다면 이 글을 참고하여 TypeScript를 더 효율적으로 사용할 수 있기를 바랍니다.
#TypeScript #타입별칭 #인터페이스 #제네릭 #타입안전성 #코드재사용성 #예제 #확장성 #개발자가이드
'자기개발 > 검색한 자료 정리' 카테고리의 다른 글
CSS Flexbox와 Grid를 활용한 반응형 웹 디자인 (0) | 2023.04.19 |
---|---|
Java 11의 주요 변경 사항 및 새로운 기능 소개 (0) | 2023.04.19 |
JavaScript의 비동기 프로그래밍: 콜백, 프로미스, async/await (0) | 2023.04.19 |
Java 8의 람다식과 스트림 API 기본 사용법 (0) | 2023.04.19 |
Webpack 최적화를 통한 프론트엔드 성능 개선 방법 (0) | 2023.04.19 |