Skip to content
himprover
GitHubVelog

[번역] 15가지 TypeScript 개발 꿀팁

— Translate, TypeScript — 7 min read

banner

이 게시물은 원본 아티클인 15 Advanced TypeScript Tips for Development 를 한글로 번역한 게시글입니다. 게시물 내용의 저작권은 원작자 Lakshmanan Arumugam 에게 있습니다.

1. 옵셔널 체이닝(Optional Chaining) (?.)

옵셔널 체이닝은 null이나 undefined 값 걱정 없이 안전하게 중첩된 속성이나 메서드에 접근할 수 있도록 합니다. 만약 중간에 있는 속성 중 하나라도 null 이나 undefined 인 경우 평가를 중단합니다.

const user = {
	name: 'John',
	address: {
		city: 'New York',
		postalCode: '12345',
	},
};


const postalCode = user.address?.postalCode;
console.log(postalCode); // Output: 12345


const invalidCode = user.address?.postalCode?.toLowerCase();
console.log(invalidCode); // Output: undefined

2. nullish 병합 연산자 (Nullish Coalescing Operator) (??)

nullish 병합 연산자는 변수가 null이거나 undefined 일 때 기본 값을 제공합니다.

const name = null;
const defaultName = name ?? 'Unknown';
console.log(defaultName); // Output: Unknown


const age = 0;
const defaultAge = age ?? 18;
console.log(defaultAge); // Output: 0

3. 타입 단언 (Type Assertion)

타입 단언은 TypeScript가 타입을 추론할 수 없을 때 명시적으로 타입을 정의하게 해줍니다.

const userInput: unknown = 'Hello World';
const strLength = (userInput as string).length;
console.log(strLength); // Output: 11

4. 제네릭 (Generics)

제네릭은 다양한 타입과 함께 재사용할 수 있는 컴포넌트를 만드는 것을 가능하게 해줍니다.

function reverse<T>(items: T[]): T[] {
	return item.reverse();
}


const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = reverse(numbers);
console.log(reversedNumbers); // Output: [5,4,3,2,1]


const strings = ['a', 'b', 'c'];
const reversedStrings = reverse(strings);
console.log(reversedStrings);

5. keyof 연산자

keyof 연산자는 주어진 타입의 모든 알려진 속성 이름의 유니온을 반환합니다.

interface User {
	id: number;
	name: string;
	email: string;
}


function getUserProperty(user: User, property: keyof User) {
	return user[property];
}


const user: User = {
	id: 1,
	name: 'John Doe',
	email: 'john@example.com',
};


const name = getUserProperty(user, 'name');
console.log(name); // Output: John Doe


const invalidProperty = getUserProperty(user, 'age'); // Error: Argument of type '"age"' is not assignable to parameter of type '"id" | "name" | "email"'

6. 타입 가드

타입가드는 특정 조건에 따라 조건부 블록 내에서 변수의 타입을 좁히는 것을 가능하게 합니다.

function logMessage(message: string | number) {
	if (typeof message === 'string') {
		console.log('Message: ' + message.toUpperCase());
	} else {
		console.log('Value: ' + message.toFixed(2));
	}
}


logMessage('hello'); // Output: Message: HELLO
logMessage(3.14159); // Output: Value: 3.14

7. 인터섹션 타입 (Intersection Types)

인터섹션 타입은 여러개의 타입을 하나의 타입에 포함시켜 교차된 타입들의 모든 속성과 메서드를 가지는 새로운 타입을 생성할 수 있게 해줍니다.

interface Loggable {
	log: () => void;
}


interface Serializable {
	serialize: () => string;
}


type Logger = Loggable & Serializable;


class ConsoleLogger implements Loggable {
	log() {
		console.log('Logging to console...');
	}
}


class FileLogger implements Loggable, Serializable {
	log() {
		console.log('Logging to file...');
	}


	serialize() {
		return 'Serialized log data';
	}
}


const logger1: Logger = new ConsoleLogger();
logger1.log(); // Output: Logging to console...


const logger2: Logger = new FileLogger();
logger2.log(); // Output: Logging to file...
console.log(logger2.serialize()); // Output: Serialized log data

8. 맵드 타입 (Mapped Types)

맵드 타입은 기존 타입의 속성을 변형시켜 새로운 타입을 만들 수 있게 합니다.

interface User {
	id: number;
	name: string;
	email: string;
}


type PartialUser = { [K in keyof User]?: User[K] };


const partialUser: PartialUser = {
	name: 'John Doe',
	email: 'john@example.com',
};


console.log(partialUser); // Output: {name:'John Doe', email:'john@example.com'}

9. 문자열 리터럴 타입과 유니온 타입

TypeScript는 문자열 리터럴 타입과 유니온 타입을 제공합니다. 이는 변수의 특정 값들의 집합을 정의하는 데 사용할 수 있습니다.

type HttpdMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';


function sendRequest(url: string, method: HttpdMethod) {
	// send request logic here...
}


sendRequest('/users', 'GET');
sendRequest('/users', 'POST');
sendRequest('/users/1', 'PUT');
sendRequest('/users/1', 'DELETE');

10. 데코레이터

데코레이터는 클래스, 메서드, 속성 그리고 다른 선언들의 동작을 수정하거나 확장할 수 있게 해줍니다.

function uppercase(target: any, propertyKey: string) {
	let value = target[propertyKey];


	const getter = () => value;
	const setter = (newValue: string) => {
		value = newValue.toUpperCase();
	};


	Object.defineProperty(target, propertyKey, {
		get: getter,
		set: setter,
		enumerable: true,
		configurable: true,
	});
}


class Person {
	@uppercase
	name: string;
}


const person = new Person();
person.name = 'John Doe';
console.log(person.name); // Output: JOHN DOE

11. 인덱스 서명 (Index Signatures)

인덱스 서명은 동적인 속성 이름과 해당하는 타입 또는 인터페이스를 정의할 수 있도록 해줍니다

interface Dictionary {
	[key: string]: number;
}


const scores: Dictionary = {
	math: 90,
	science: 85,
	history: 95,
};


console.log(scores['math']); // Output: 90
console.log(scores['english']); // Output: undefined

12. 조건문에서 타입추론

TypeScript는 조건문을 기반으로 타입을 추론하여 보다 간결한 코드를 작성할 수 있도록 합니다.

function calculateTax(amount: number, isTaxable: boolean) {
	if (isTaxable) {
		return amount * 1.1; // Type: number
	} else {
		return amount; // Type: number
	}
}


const taxableAmount = calculateTax(100, true);
console.log(taxableAmount.toFixed(2)); // Output: 110.00


const nonTaxableAmount = calculateTax(100, false);
console.log(nonTaxableAmount.toFixed(2)); // Output: 100.00

13. 읽기 전용 속성

TypeScript는 readonly 수식어를 제공해 정의된 속성이 초기화 된 후 수정할 수 없도록 해줍니다.

class Circle {
	readonly radius: number;


	constructor(radius: number) {
		this.radius = radius;
	}


	getArea() {
		return Math.PI * this.radius ** 2;
	}
}


const circle = new Circle(5);
console.log(circle.radius); // Output: 5


// circle.radius = 10; // Error: Cannot assign to 'radius' because it is a read-only property


console.log(circle.getArea()); // Output: 78.53981633974483

14. 타입 별칭 (Type Aliases)

타입 별칭은 기존 타입에서 다른 이름의 새로운 타입을 만들어 더 의미 있는 명칭을 만들고 코드가 읽기 쉽도록 발전시켜줍니다.

type Point = {
	x: number;
	y: number;
};


type Shape = 'circle' | 'square' | 'triangle';


function draw(shape: Shape, position: Point) {
	console.log(`Drawing a ${shape} at (${position.x}, ${position.y})`);
}


const startPoint: Point = { x: 10, y: 20 };
draw('circle', startPoint); // Output: Drawing a circle at (10, 20)

15. 클래스를 사용한 타입가드

타입가드는 클래스를 사용해서도 인스턴스 객체의 타입을 좁혀나갈 수 있습니다.

class Animal {
	name: string;
	constructor(name: string) {
		this.name = name;
	}
}


class Dog extends Animal {
	bark() {
		console.log('Woof!');
	}
}


function makeSound(animal: Animal) {
	if (animal instanceof Dog) {
		animal.bark(); // Type: Dog
	} else {
		console.log('Unknown animal');
	}
}


const dog = new Dog('Buddy');
const animal = new Animal('Unknown');


makeSound(dog); // Output: Woof!
makeSound(animal); // Output: Unknown animal