타입 안전성
JavaScript 런타임 오류를 방지 할 수 있었습니다. TypeScript는 코드 작성 시점에 오류를 검출하여, 더 안정적이고 오류가 적은 애플리케이션을 만들 수 있습니다.
JavaScript도 Prototype을 통해 타입을 설정할 수 있지만, 타입을 명시하지 않아도 동작한다는 특징이 있습니다. 이 특성이 JavaScript의 장점이긴 하지만, 동시에 오류를 방지하기가 어렵습니다. 그럼에도 불구하고 TypeScript를 선호하는 이유는 타입을 강제함으로써 오류를 더 효과적으로 잡아낼 수 있기 때문입니다.
개발자 경험 향상
TypeScript는 타입 힌트를 통해 개발 속도와 효율을 크게 향상시킵니다. 이는 코드를 이해하는 시간을 단축시키는 데 중요한 역할을 합니다.
(단, TypeScript 사용 시 단점도 존재합니다. 예를 들어, 모든 데이터에 타입을 설정해야 하는 번거로움이 있을 수 있습니다. 많은 양의 데이터를 다룰 때 타입을 설정하는 데 시간이 소모될 수 있으며, 레거시 코드를 전환할 때 Number 값이 와야 하는 자리에 String 값이 입력된 경우, 이를 TypeScript로 처리하기 위해 변환 작업이 필요해질 수 있습니다.)
더 나은 확장성과 유지보수성
TypeScript는 대규모 코드베이스를 효율적으로 관리할 수 있게 해줍니다. 특히 팀 작업 시 명확한 인터페이스 덕분에 협업이 원활해지고, 프로젝트가 커질수록 이러한 이점이 두드러집니다.
타입을 확인하고 설정할 수 있다는 것은 프로젝트 관리에 있어 매우 중요합니다. TypeScript는 이러한 타입 관리를 통해 대규모 프로젝트에서의 오류를 예방하고, 직관적인 코드 관리를 가능하게 합니다.
초기 설정
TypeScript로 전환하기 위한 기본 설정 방법입니다.
TypeScript 및 관련 의존성 설치
npm install --save-dev typescript @types/react @types/node
tsconfig.json 파일 생성 또는 수정
tsconfig.json은 TypeScript의 컴파일러 옵션을 정의하는 파일입니다. 아래와 같은 기본 설정으로 시작할 수 있습니다.
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"plugins": [{ "name": "next" }]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
점진적 마이그레이션 전략
1. 파일 확장자 변경
JavaScript 파일(.js, .jsx)을 TypeScript 파일(.ts, .tsx)로 변환합니다. 모든 파일을 한 번에 변환하는 대신, 중요한 컴포넌트부터 점진적으로 변환하는 것이 좋습니다.
2. allowJs: true 설정
초기에는 기존 JavaScript 파일과 TypeScript 파일을 함께 사용할 수 있도록 설정합니다. 이를 통해 점진적인 마이그레이션이 가능합니다.
주요 컴포넌트 및 페이지 변환 예시
페이지 컴포넌트 변환
import React from 'react';
interface PageProps {
params: { id: string };
searchParams: { [key: string]: string | string[] | undefined };
}
export default function Page({ params, searchParams }: PageProps) {
return <h1>Page {params.id}</h1>;
}
레이아웃 컴포넌트 변환
import React from 'react';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
타입 정의 및 인터페이스
export interface User {
id: number;
name: string;
email: string;
}결론
TypeScript는 오류를 직관적으로 파악하고, 문제를 더 빠르게 해결할 수 있게 해줍니다. 물론 JavaScript로도 문제를 해결할 수 있지만, TypeScript는 더 쉽게 오류를 찾아내는 도구를 제공합니다. 다만, 타입을 설정하는 데 추가 시간이 소요될 수 있습니다. 그럼에도 불구하고, 이점이 많다고 판단해 TypeScript로 마이그레이션 진행 중입니다..