Item 1 : 타입스크립트와 자바스크립트 관계 이해하기
자바스크립트는 타입스크립트에 포함한다.
자바스크립트가 더 작은 단위라는 것! 즉, TS는 JS의 상위집합이다.
이슈 존재시 오류는 아니더라도, 타입체커에게 지적당한다!
JS 프로그램을 TS 프로그램으로 마이그레이션 할 시?
- 기존코드를 그대로 유지 가능하면서 타입을 추가하여 적용할 수 있다.
타입스크립트가 타입을 명시하는 추가적인 문법을 가진다!
타입스크립트는 초깃값으로부터 타입추론을 한다.
const [state, setState] = useState("")
위 코드일 경우 문자열로 추론을 한다
코드의 ‘의도'가 무엇인지 타입구문을 통해 타입스크립트에게 알려줄 수 잇다.
TS목표는 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것이다
명시적으로 states 선언하여 의도를 분명하게하자.
모든 JS는 TS이지만 일부 JS(TS)만이 타입체크를 통과한다.
Item 2 : 타입스크립트 설정 이해하기
tsconfig.json
어디서 소스파일 찾을지, 어떤 종류의 출력을 생성할지 제어한다.
noImplicitAny - 변수 미리 정의된 타입 가져가야하는지 여부를 설정할 수 있다.
any 타입 매개변수에 사용하면 타입체커는 속절없이 무력해진다.
strictNullCheck - null과 undefined가 모든 타입에서 허용되는지 확인하는 설정
Item 3 : 코드 생성과 타임이 관계없음을 이해하기
코드 생성은 TypeScript와도 무관하다.
런타임 동작 및 성능에 영향을 주지 않는다!
타입 오류가 존재하더라도 코드 생성은 가능하다. (= 컴파일)
TS타입은 런타임에 사용불가하다.
타입 정보유지를 위한 별도 방법이 필요하다.
Item 4 : 구조적 타이핑에 익숙해지기
자바스크립트는 덕 타이핑 기반이고, 타입스크립트가 이를 모델링하기 위해 구조적 타이핑을 사용해야한다.
덕 타이핑
타입에 부합하는 변수와 메서드를 가질 경우 객체를 해당 타입에 속하는 것으로 간주하는 방식
클래스 역시 구조적 타이핑 규칙을 따른다는 것을 명심해야한다.
클래스의 인스턴스가 예상과 다를 수 있다.
구조적 타이핑을 사용하면 유닛 테스팅을 손쉽게 할 수 있다.
Item 5 : any타입 지양하기
- 타입스크립트 타입시스템은 코드에 타입을 조금씩 추가 가능하여 점진적이고, 언제든지 타입체커를 해제가능하기 때문에 선택적이다.
- any사용시 TS장점들을 누릴 수 없다!
- 타입 안전성이 없다
- 함수시그니처를 무시한다.
- 시그니처란? 약속된타입의 입력을 제공하고, 함수는 약속된 타입의 출력을 반환한다.
- 언어서비스가 적용되지 않는다. (자동완성 기능 + 적절한 도움말)
- 코드 리팩토링 때 버그를 감춘다.
- 타입 설계를 감춘다.
- 타입시스템의 신뢰도를 떨어뜨린다.
any를 쓰지 않으면 런타임에 발견될 오류를 미리 잡을 수 있고 신뢰도가 높아진다!