타입스크립트
장점
- 타입이 있다
- 안정성 - 컴파일 단계에서 미리 오류를 감지할 수 있다.
- 가독성 - 타입을 보고 무엇을 하는지 미리 알 수 있다.
단점
- 초기 설정을 있어 힘들수 있다.
- 스크립트 언어의 유연성이 낮아진다.
- 컴파일 시간이 길어질 수 있다. 프로젝트의 크기가 커질수록 더 길어진다..!
타입주석
- 변수 뒤에
:type을 붙여주어 자바스크립트에 없는 타입을 명시해줌 - 타입이 정해져 있기 때문에 엄격함
- 반환해줄 수는 있지만 컴파일에서 걸리게 된다.
- string, number, object, function등에 사용가능하다.
- any를 통해
유연함(모든타입 가능)을 줄 수 있지만 이렇게 하면 타입스크립트의 의미가 사라지니 웬만하면 쓰지 않는것을 추천
인터페이스
- 객체 타입을 정의하는 방법 Interface라는 키워드로 가능하다.
Tuple
- 배열을 Tuple로 이용하는 방법
- 배열에 여러가지 타입을 담고싶을 때 사용
Enum
- 열거형을 사용하는 방법
- JS에서 상수 만들 때 사용하면 좋을듯 하다.
대수 타입
- 여러 자료형의 값을 가질 수 있게하는 방법
- 합집합 타입과 교집합 타입이 있다.
- 새로운 타입을 만들 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let numOrStr: number | string = 1; //number혹은 string이 될 수 있다.
let numAndStr: number & string = "";
//원시 타입에서 사용할 수 없다.
//인터페이스에서 사용할 수 있다.
interface Name {
name: string;
}
interface Age {
age: number;
}
let person: Name & Age = {
name: "seonjae",
age: 100,
};
type Person = Name & Age; //새로운 타입 생성
Optional
- ES 2021에 추가된 기능이지만 타입스크립트엔 이미 있었다.
- 선택속성 타입을 선언하는 콜론앞에 ?: 이런식으로 물음표를 붙여준다.
- 객체내의 프로퍼티의 유무를 확인하는데 원래 &&를 이용해 확인을 했지만 ?를 붙이면 해결된다.
Generic
- 하나의 인터페이스로 여러 타입을 이용할 수 있게 하는 방법
- 여러가지 타입을 받고 싶다면 여러가지 타입을 선언하는것도 방법이지만 그것은 낭비가 심하기 때문에 Generic문법을 이용해 여러가지 타입을 받는다.
- 사용시 제네릭 문법은 타입추론으로 생략이 가능하다
재사용
- Optional: 모든 필드가 안들어가도 된다.
- Required: 모든 필드가 무조건 들어가야된다.
- Pick: 특정 필드만 골라서 사용할 수 있다
- Omit: 특정 필드만 빼고 사용할 수 있다.
Extends
- 특정 인터페이스를 상속받아 인터페이스를 확장할 수 있다.
타입스크립트의 전반적인 내용을 봤을 때는 뭐야 금방 적용할 수 있다고 느껴졌다. 그런데 다시 TIL을 읽어보니 대수타입의 합집합 부분과 Generic이 많이 헷갈릴거 같다. 이 부분을 유의하면서 코드를 짜는게 중요할 거같다.
재사용 문법을 이용해 필요한 데이터의 타입들을 뽑아내는게 가장 흥미로웠다. 왜냐하면 프로젝트를 하면서 가장 고민했던 부분이 user데이터에 필요한 데이터만 뽑고 싶다라는 생각을 많이 했기 때문이다.
앞으로 해야될것은 많지만…JS노션을 React로 바꾸기 바꾸고 TS도입해서 만들어보기를 해보면 TS와 친해질수도..?! ㅎㅎ