Typescript#
TypeScript는 JavaScript를 확장한 프로그래밍 언어로, 특히 대규모 애플리케이션 개발에서 많은 장점을 제공한다.
TypeScript는 Microsoft가 개발한 오픈소스 프로그래밍 언어로, JavaScript의 상위 집합(superset)으로, JavaScript의 모든 기능을 포함하면서 정적 타입 시스템을 추가했다.
기본적인 타입 시스템#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| // 기본 타입 선언
let name: string = "John";
let age: number = 25;
let isDeveloper: boolean = true;
// 배열 타입
let numbers: number[] = [1, 2, 3, 4, 5];
let names: Array<string> = ["John", "Jane", "Bob"];
// 객체 타입
interface User {
name: string;
age: number;
email?: string; // 선택적 속성
}
// 함수 타입
function greet(user: User): string {
return `Hello, ${user.name}!`;
}
|
주요 기능과 특징#
- 타입 추론
TypeScript는 똑똑한 타입 추론 기능을 제공한다.
명시적으로 타입을 지정하지 않아도 컨텍스트에서 타입을 유추할 수 있다:
1
2
3
4
5
6
| // 타입을 명시적으로 지정하지 않아도 됩니다
let message = "Hello"; // TypeScript가 자동으로 string으로 추론
let numbers = [1, 2, 3]; // number[] 로 추론
// 복잡한 타입도 추론 가능
const response = await fetch("/api/users"); // Response 타입으로 추론
|
- 인터페이스와 타입 별칭
코드의 구조를 명확하게 정의할 수 있다:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| // 인터페이스 정의
interface Person {
name: string;
age: number;
greet(): string;
}
// 타입 별칭
type Point = {
x: number;
y: number;
};
// 유니온 타입
type Status = "pending" | "completed" | "failed";
|
- 제네릭
재사용 가능한 컴포넌트를 만들 수 있다:
1
2
3
4
5
6
7
8
| // 제네릭 함수
function getFirst<T>(arr: T[]): T | undefined {
return arr[0];
}
// 사용 예시
const firstNumber = getFirst([1, 2, 3]); // number 타입
const firstString = getFirst(["a", "b", "c"]); // string 타입
|
실제 활용 사례#
- React와 함께 사용:
TypeScript는 React 개발에서 유용하다:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| interface Props {
title: string;
onSubmit: (data: FormData) => void;
}
const FormComponent: React.FC<Props> = ({ title, onSubmit }) => {
const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
const formData = new FormData(event.currentTarget as HTMLFormElement);
onSubmit(formData);
};
return (
<form onSubmit={handleSubmit}>
<h2>{title}</h2>
{/* 폼 내용 */}
</form>
);
};
|
- 백엔드 개발:
Node.js와 Express를 사용한 백엔드 개발 예시:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import express, { Request, Response } from 'express';
interface User {
id: number;
name: string;
}
app.get('/users/:id', async (req: Request, res: Response) => {
const userId: number = parseInt(req.params.id);
try {
const user: User = await database.findUser(userId);
res.json(user);
} catch (error) {
res.status(404).send('User not found');
}
});
|
고급 기능과 패턴#
- 데코레이터
메타프로그래밍을 위한 데코레이터를 지원한다:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| function log(target: any, key: string, descriptor: PropertyDescriptor) {
// 메서드 래핑
const original = descriptor.value;
descriptor.value = function(…args: any[]) {
console.log(`Calling ${key} with`, args);
return original.apply(this, args);
};
}
class Calculator {
@log
add(a: number, b: number) {
return a + b;
}
}
|
- 타입 가드
런타임에서 타입을 안전하게 검사할 수 있다:
1
2
3
4
5
6
7
8
9
10
11
12
13
| interface Bird {
fly(): void;
layEggs(): void;
}
interface Fish {
swim(): void;
layEggs(): void;
}
function isFish(pet: Fish | Bird): pet is Fish {
return (pet as Fish).swim !== undefined;
}
|
TypeScript의 장점과 이점#
- 향상된 개발 경험:
- 강력한 IDE 지원
- 실시간 오류 감지
- 리팩토링 용이성
- 코드 품질 향상:
- 팀 협업 개선:
- 코드 의도 명확화
- API 계약 명시
- 리팩토링 신뢰성
참고 및 출처#
Roadmap#
Roadmap - Typescript