* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.
* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.
1. TypeScript의 개념
-
TypeScript는 Microsoft에서 개발한 JavaScript의 상위 집합(superset) 언어, 정적 타입 체킹(static type checking)을 지원.
-
JavaScript의 기능을 확장하여 더 나은 코드 품질과 유지보수를 제공.
-
TypeScript는 컴파일 타임에 오류를 잡을 수 있으므로, 런타임 오류를 줄이는 데 효과적.
-
TypeScript 코드는 JavaScript로 트랜스파일(transpile)되며, 모든 JavaScript 런타임 환경에서 실행 가능.
-
더 자세한 내용은 이전 포스팅 참조.
2. TypeScript 설치 방법 (React.js 기준)
2.1 기존 React 프로젝트에 TypeScript 추가
- TypeScript 패키지 설치:
npm install typescript @types/react @types/react-dom --save-dev- TypeScript 설정 파일 생성: 프로젝트 루트에 tsconfig.json 파일을 생성.
npx tsc --init- Vite 기반 React 프로젝트 초기화와 TypeScript 추가
npm create vite@latest my-react-app --template react-ts-
Vite는 애초에 TypeScript를 지원하기 때문에 프로젝트 생성이 매우 간단하다.
-
Vite? Create React App(CRA)를 대체하는 React.js 프로젝트 보일러플레이트.
-
CRA는 초기 설정이 간단하지만, 너무 많은 라이브러리들을 포함하여 프로젝트가 필요 이상으로 무겁게 시작하는 문제점이 있다.
-
게다가 2022년 즈음부터 메이저 업데이트가 중단되어버렸다. 최근에는 CRA 라이브러리보다 Vite를 사용하는 것이 권장되는 상황.
기존 파일 확장자 변경:
-
기존 JavaScript 파일(.js)을 TypeScript 파일(.tsx)로 변경.
-
js, jsx, ts, tsx? 각 확장자의 차이점은 이전 포스팅 참조.
3. TypeScript 환경설정
-
tsconfig.json 파일은 TypeScript의 동작을 제어합니다. 주요 설정 항목은 다음과 같음:
-
설정 방법 및 동작 원리는 이전 포스팅 참조.
{
"compilerOptions": {
"target": "ES6", // 트랜스파일된 JavaScript의 버전
"module": "ESNext", // 사용할 모듈 시스템
"jsx": "react-jsx", // React의 JSX 지원
"strict": true, // 엄격한 타입 검사 활성화
"baseUrl": "./", // 경로 기준 디렉토리
"paths": { // 경로 별칭 설정
"@components/*": ["src/components/*"]
},
"outDir": "./dist", // 컴파일된 파일의 출력 폴더
"esModuleInterop": true, // ES6 모듈 호환
"skipLibCheck": true // 라이브러리 타입 체크 건너뛰기
},
"include": ["src"], // 포함할 파일 및 폴더
"exclude": ["node_modules"] // 제외할 파일 및 폴더
}3.1 strict 옵션 세부 사항
- strict 옵션은 엄격한 타입 검사를 활성화, 다음을 포함:
- noImplicitAny: 암시적으로 any 타입이 되는 것을 방지.
- strictNullChecks: null과 undefined를 명시적으로 처리.
- strictBindCallApply: 함수 바인딩과 호출 시 타입 체크.
4. TypeScript의 주요 문법
4.1 데이터 타입과 타입 추론
- TypeScript는 변수를 선언할 때 타입을 명시하지 않더라도, 초기값을 통해 타입을 추론한다.
타입 추론 예시:
- 각 데이터에 타입을 명시적으로 지정하지 않아도, TypeScript 엔진이 타입을 자동으로 추론.
let count = 10; // number로 추론
let name = "John"; // string으로 추론- 명시적으로 타입 지정도 가능:
let age: number = 25;
let isStudent: boolean = true;4.2 인터페이스 (Interface)
-
객체의 타입을 정의하기 위해 사용.
-
더 자세한 내용은 이전 포스팅 참조.
interface User {
id: number;
name: string;
email?: string; // 선택 속성
}
const user: User = { id: 1, name: "John" };4.3 열거형 (Enum)
-
열거형은 숫자 또는 문자열 값의 집합을 정의.
-
더 자세한 내용은 이전 포스팅 참조.
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
const move = Direction.Up;
console.log(move); // 출력: "UP"