TypeScript의 장점
- 변수 타입을 컴파일 시간에 결정한다.
- VS Code에 입력하는 순간 타입이 체크된다.
tsc
- 컴파일러 역할
- 소스코드의 정적 타입 검사
- TypeScipt => JavaScript로 코드 변환
- tsc --init
- tsc index.ts
- tsc src/*.ts
.d.ts 파일
- TypeScript 타입 정의 파일
- JavaScript로 작성된 라이브러리를 사용할 수 있게 해준다.
타입
- 가변적인 타입의 데이터를 저장할 때는 any, unknown, union을 사용한다.
- any는 가급적 사용하지 않는 것이 권장된다.
- 유틸리티 타입
- Partial<T> : 기존 타입의 일부 속성만 제공하는 객체 생성 시 사용한다.
- Required<T> : T 타입 객체에 정의된 모든 속성이 반드시 전부 제공되는 개체 생성시 사용한다.
- Readonly<T> : 모든 속성을 읽기 전용으로 만든다.
- Pick<T, K> : 타입 T에서 K 속성들만 선택해서 새로운 타입을 만든다.
- Omit<T, K> : 타입 T에서 K 속성들만 제외해서 새로운 타입을 만든다.
인터페이스
- 다중 상속 지원
- 객체가 특정 구조를 준수하도록 강제하고 싶다면, 인터페이스를 사용한다.
리액트 프로젝트 타입스크립트로 생성하기
yarn create react-app my-app --template typescript
props의 타입 지정
- {todos} : {todos: Todo[]}
- {todos, isDone} : {todos: Todo[]; isDone:boolean}
- {todos, isDone} : PropsType
더 알아야 할 내용
타입스크립트의 기본 타입에 대한 이해는 했으나
제네릭이나 인터페이스 상속 등 아직 알지 못하는 부분이 많고,
아직 익숙하지 않기 때문에 이론을 읽는 것 뿐만 아니라 실습을 통해 손에 익혀야겠다!🔥
- 타입스크립트에서 타입, 인터페이스 등 실습해보기
- 타입을 지정하는 다양한 방법에 대한 개념 공부
