타입스크립트 기초: 자바스크립트에 타입 안전성 추가하기
안녕하세요. 이번 강의에서는 자바스크립트의 슈퍼셋인 타입스크립트의 기본을 배우고, 타입 안전성을 추가하여 보다 견고하고 유지보수가 용이한 코드를 작성하는 방법을 소개해드리려고 하는데요. 타입스크립트(Typescript)는 개발 과정에서 버그를 줄이고, 큰 규모의 프로젝트를 효율적으로 관리할 수 있게 도와주는 툴이기 때문에 익혀둔다면 유용합니다.
타입스크립트의 주요 이점
- 타입 안전성: 컴파일 시점에서 타입 체크를 수행하여 런타임 에러를 줄일 수 있습니다.
- 객체 지향 프로그래밍 지원: 클래스, 인터페이스 등 자바스크립트보다 강력한 객체 지향 프로그래밍 기능을 제공합니다.
- 도구의 지원: 자동 완성, 인터페이스 정의, 리팩토링 지원 등 개발자 친화적인 도구를 사용할 수 있습니다.
타입스크립트 시작하기
설치 및 환경 설정
npm install -g typescript위 명령어로 타입스크립트 컴파일러를 설치합니다. 이후 간단한 tsconfig.json 파일을 생성하여 프로젝트 설정을 정의할 수 있습니다.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
}
}기본 예제: 변수와 함수 타입 정의
타입스크립트에서 변수와 함수의 반환 타입을 명시적으로 선언하여, 컴파일러가 타입 체크를 수행하게 합니다.
function greet(name: string): string {
return `Hello, ${name}!`;
}
let userName: string = 'Alice';
console.log(greet(userName));인터페이스와 클래스
객체의 구조를 정의하는 인터페이스와 클래스를 사용하여 타입 안전성을 더욱 강화할 수 있습니다.
interface User {
name: string;
age: number;
}
class Employee implements User {
constructor(public name: string, public age: number, public position: string) {}
}
const employee = new Employee('Bob', 25, 'Developer');
console.log(employee);실습: 간단한 웹 애플리케이션 구축
이 세션에서는 Express.js와 타입스크립트를 사용하여 간단한 REST API를 구축해 볼 것입니다. 타입스크립트를 활용하면 API의 각 부분에 명확한 타입을 적용하여, 안정성과 유지보수성을 높일 수 있습니다.
import express, { Request, Response } from 'express';
const app = express();
app.use(express.json());
app.get('/user/:id', (req: Request, res: Response) => {
// 사용자 정보 조회 로직
});
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});고급 타입 기능
타입스크립트는 고급 타이핑 기능을 제공하여 더욱 정교한 타입 정의와 조작을 가능하게 합니다. 이러한 기능들은 대규모 프로젝트에서 특히 유용하며, 코드의 유지보수성과 확장성을 크게 향상시킵니다.
제네릭 사용하기
제네릭을 사용하면 함수, 클래스, 인터페이스, 타입을 재사용 가능하도록 할 수 있습니다. 제네릭은 타입을 파라미터처럼 사용하여, 컴파일 시점에 유연한 타입 체크를 제공합니다.
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString");
let outputNumber = identity<number>(100);유니언과 인터섹션 타입
유니언 타입은 여러 타입 중 하나를 만족할 수 있는 값을 의미하고, 인터섹션 타입은 여러 타입을 모두 만족하는 값을 의미합니다. 이를 통해 더욱 유연하게 타입을 설정할 수 있습니다.
type StringOrNumber = string | number;
type EmployeeAndManager = Employee & Manager;
function getInformation(s: StringOrNumber): void {
console.log(s);
}
let employeeDetail: EmployeeAndManager = {
name: "Alice",
age: 30,
position: "Manager"
};조건부 타입
조건부 타입은 입력된 타입에 따라 반환되는 타입이 달라지는 타입입니다. 이는 고급 로직 구현에 유용하며, 복잡한 타입 조건을 쉽게 처리할 수 있게 도와줍니다.
type Check<T> = T extends string ? 'String' : 'Not String';
type TypeFromString = Check<'hello'>; // TypeFromString is 'String'
type TypeFromNumber = Check<100>; // TypeFromNumber is 'Not String'실습: 타입스크립트로 에러 핸들링 구현
타입스크립트를 사용하여 에러 핸들링 로직을 구현하는 실습을 통해, 타입스크립트의 강력한 타입 시스템을 실무에 적용해봅니다. 이를 통해 애플리케이션의 견고성을 향상시킬 수 있습니다.
function throwError(errorMsg: string): never {
throw new Error(errorMsg);
}
function processUserInput(input: string | number) {
if (typeof input === 'string') {
console.log('Processing string:', input);
} else if (typeof input === 'number') {
console.log('Processing number:', input);
} else {
throwError('Invalid input type');
}
}결론
이번 강을 통해 타입스크립트의 기초부터 고급 기능까지 다양한 타이핑 기법을 배우고 실습해보았는데요. 어떠셨나요? 타입스크립트는 적절하게 잘 다루기만 한다면 개발 프로세스의 효율성을 크게 높일 수 있으며, 코드의 안정성과 유지보수성도 향상시킬 수 있는 강력한 tool 입니다. 이번 강의에서 맛을 보셨으니 이제 여러분은 타입스크립트를 활용하여 보다 견고한 애플리케이션을 구축할 준비가 된 것이나 다름없습니다! 천천히 차근차근 시작해보시죠 Level~up!😀
댓글