React 프로젝트를 TypeScript로 시작하려면,
create-react-app
명령어에 --template typescript
옵션을 추가하여 실행하면 된다. 이 명령은 TypeScript 설정이 포함된 React 프로젝트를 생성한다.npx create-react-app my-app --template typescript
이 명령어를 실행하면,
tsconfig.json
파일이 포함된 TypeScript 프로젝트가 생성되며, .tsx
확장자를 가진 TypeScript 파일에서 React 컴포넌트를 작성할 수 있다.객체 타입 정의하기
type
키워드를 사용해 객체의 모양을 정의할 수 있다. 객체 내부 속성의 타입도 정의할 수 있다.type Restaurant = { name: string; category: string; address: { city: string; detail: string; } menu: { name: string; price: number; category: string; }[] }
TypeScript 컴포넌트화
React 컴포넌트에서 props의 타입을 지정하려면
React.FC
에 제네릭으로 props 타입을 지정하고, interface
로 props 타입을 정의하면 된다.const App: React.FC<Props> = ({ info }) => { return <div>{info.name}</div> } interface Props { info: Restaurant }
제네릭을 사용한 타입 정의
API 응답과 같이 타입이 동적일 경우 제네릭을 사용하여 유연하게 타입을 정의할 수 있다.
interface ApiResponse<T> { data: T; total: number; page: number; } type Restaurant = { name: string; address: string; } const response: ApiResponse<Restaurant> = { data: { name: 'My Restaurant', address: '123 Main St' }, total: 1, page: 1 };
타입 확장하기 - 조건부 타입과 유틸리티 타입
TypeScript는 조건부 타입 및 여러 유틸리티 타입(
Partial
, Readonly
, Pick
, Omit
등)을 제공하여 타입을 더욱 강력하고 유연하게 만들어 준다.extends
키워드로 인터페이스를 확장할 수 있다.
Omit
유틸리티 타입으로 특정 프로퍼티를 제거한 타입을 만들 수 있다.
Pick
유틸리티 타입으로 특정 프로퍼티만 추출한 타입을 만들 수 있다.
interface User { id: number; name: string; email: string; } // 'email' 필드를 제외한 타입 정의 type UserWithoutEmail = Omit<User, 'email'>; // 모든 필드를 선택적으로 만드는 타입 정의 type PartialUser = Partial<User>;
이렇게 하면 TypeScript의 다양한 기능을 통해 React 프로젝트에서 안전하고 효율적인 코드를 작성할 수 있다. TypeScript는 특히 대규모 프로젝트나 복잡한 상태 관리가 필요한 프로젝트에서 그 진가를 발휘한다.