TypeScript - 더 안전하고 생산적인 JavaScript 개발을 위해

이상준 (LeeSangJun)·2024년 6월 13일

1. TypeScript란?

TypeScript는 Microsoft에서 개발한 오픈소스 프로그래밍 언어입니다. JavaScript의 상위 집합으로, 정적 타입 지정과 다양한 고급 기능을 제공하여 JavaScript 개발을 더 안전하고 생산적으로 만들어줍니다.

2. TypeScript를 사용하는 이유와 장점

1. 정적 타입 지정:

TypeScript는 변수, 함수 매개변수, 반환 값 등에 타입을 지정할 수 있어
코드의 가독성과 유지보수성을 높입니다.
이를 통해 컴파일 단계에서 많은 오류를 사전에 발견할 수 있습니다.

2. 강력한 IDE 지원:

TypeScript는 IntelliSense, 코드 자동 완성, 리팩토링 등의 강력한 IDE 기능을 제공하여
개발 생산성을 크게 향상시킵니다.

3. 코드 품질 관리:

TypeScript는 정적 타입 지정을 통해 코드의 품질을 높이고 유지보수성을 개선합니다. 컴파일 단계에서 많은 오류를 사전에 발견할 수 있어 디버깅 시간을 크게 줄일 수 있습니다. 또한 IDE 지원을 통해 리팩토링, 코드 문서화 등의 작업을 보다 효율적으로 수행할 수 있습니다.

컴파일 단계 (compile phase)

컴파일 단계는 소스 코드를 기계가 이해할 수 있는 실행 가능한 형태로 변환하는 과정입니다.
컴파일 단계에서 TypeScript 컴파일러는 TypeScript 코드를 분석하여
TypeScript 코드를 실행 가능한 JavaScript 코드로 변환합니다.

4. 확장성과 상호 운용성:

TypeScript는 JavaScript의 상위 집합이므로 모든 JavaScript 코드를 TypeScript로 사용할 수 있습니다.
또한 수많은 JavaScript 라이브러리와 프레임워크를 TypeScript와 함께 사용할 수 있습니다.

5. 대규모 프로젝트에 적합:

TypeScript는 대규모 프로젝트에서 코드 품질 관리와 협업에 매우 효과적입니다.
정적 타입 지정을 통해 복잡한 프로젝트에서도 안전하게 개발할 수 있습니다.

3. Next.js에서 TypeSciprt 사용하기

Next.js는 React 프레임워크의 하나로, TypeScript와 함께 사용했을 때 서버 사이드 렌더링(SSR) 시에 서버와 클라이언트 간 데이터 전송 시 타입 안정성을 보장할 수 있고, 복잡한 라우팅 구조에서도 안정적인 애플리케이션을 구축할 수 있다는 점에서 잘 어울립니다.

1. 새 프로젝트에서 타입스크립트 추가:

create-next-app을 사용하여 새 Next.js 프로젝트 생성 시 TypeScript 템플릿을 선택합니다.
npx create-next-app my-app --typescript
프로젝트 생성이 완료되면 TypeScript 설정 파일(tsconfig.json)이 자동으로 생성됩니다.

2. 기존 프로젝트에서 타입스크립트 추가:

프로젝트 디렉토리로 이동합니다.
다음 명령어를 실행하여 TypeScript 관련 패키지를 설치합니다.
npm install --save-dev typescript @types/react @types/node
tsconfig.json 파일을 프로젝트 루트 디렉토리에 생성합니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

next-env.d.ts 파일을 프로젝트 루트 디렉토리에 생성하고 다음 내용을 추가합니다.

/// <reference types="next" />
/// <reference types="next/types/global" />

3. TypeScript 사용하기 :

컴포넌트 props, state, 함수 매개변수 및 반환 값에 타입을 지정합니다.
API 호출 시 응답 데이터 타입을 정의합니다.
타입 안전성을 높이기 위해 유틸리티 타입(Utility Types)을 활용합니다.

4. 컴파일 및 실행 :

npm run dev 명령어로 Next.js 개발 서버를 실행하면 TypeScript 코드가 자동으로 컴파일됩니다.
컴파일 과정에서 발생한 오류를 확인하고 수정합니다

.
.
.
.

4. 마무리

오늘은 Typescript에 대해 알아보았습니다. Typescript는 자바스크립트의 상위집합으로,
정적 타입 지정 기능을 제공하여 개발 과정에서의 오류를 사전에 방지할 수 있는 프로그래밍 언어입니다.

Typescript는 자바스크립트와 호환되면서도 타입 안전성을 높여주기 때문에,
대규모 프로젝트 개발 시 큰 도움이 됩니다.
정적 타입 지정 기능을 통해 코드의 가독성과 유지보수성이 향상되며,
컴파일 단계에서 오류를 미리 확인할 수 있어 디버깅 시간을 줄일 수 있습니다.

Typescript는 점점 더 많은 개발자들에게 주목받고 있으며,
특히 Angular, React, Vue.js, Next.js 등의 프레임워크와 함께 사용되면서 그 활용도가 높아지고 있습니다.
개발 생산성 향상과 유지보수성 개선을 위해 Typescript의 도입을 고려해볼 만한 것 같습니다.