JavaScript는 Dynamic Typing을 지원하는 동적 언어이다.
대표적인 예시는 위와 같다. 보라돌이가 6명인 것은 귀엽지만 개발자에게는 귀여워보이지 않을 것이다.
TypeScript는 이런 JavaScript의 단점을 보완하기 위해 탄생한 정적 타입의 컴파일 언어이다.
컴파일 과정을 거쳐 자바스크립트로 변환해주는 단계에서 타입을 체크해 예기치 못한 오류를 미연에 방지해주는 역할을 한다.
또한 자바스크립트에서 표시해주는 에러 메세지의 경우 대체 어디서 뭐가 잘못됐는지 찾는 것에 시간을 허비하게 되는 경우가 굉장히 많은데 타입스크립트는 어느 부분에서 어떤 에러가 난 것이며 어떻게 수정해야할 지까지 개발자에게 알려준다.
예를 들어 미묘한 오타를 입력하면 "흠.. 네가 입력한 변수명이 '애기개발자'인데, 혹시 '아기개발자' 이거 입력하려다가 실수한 거 아니니?" 이런 식으로 굉장히 친절하게 안내해준다는 것이다.
사실 장점만 있는 것은 아니고 일단 코드가 길어지며 가독성도 -당연히- 자바스크립트만 입력할 떄보다는 길어지고.. 설치도 귀찮고.. 이런저런 단점들이 존재한다. 하지만 단점보다 장점이 훨씬 크고 무엇보다 요즘은 필수 스택으로 꼽히기 때문에 ^^.. 열심히 배워야 한다.
공부하고 느낀 점 : 아.. "Do It! 타입 스크립트" 구매해야겠다..
1. 변수 타입 지정
이렇게 할 수 있다는 것 뿐이지 사실 이런 간단한 변수 선언은 타입스크립트의 '타입 추론' 기능으로 알아서 타입을 지정해주기 때문에 굳이 입력해주지 않아도 된다.
string[]같은 경우 Array<string>으로 대체 가능하다. generic이라고 하는데 잠시 후에 알아보자.
2. 객체 타입 선언
객체의 타입을 선언하는 방법은 type과 interface 두가지가 있다.
당장 보기에 등호의 유무를 제외하고 차이는 없어보이지만 생각보다 자잘한 차이들이 존재한다. 이것도 잠시 후에 알아보자.
age 옆의 ? 기호의 경우 age : number | undefined와 같은 의미이다.
이렇게 작성하면 해당 타입을 가진 객체에 name과 fatih 속성은 반드시 존재해야 하지만 age 속성은 존재하지 않아도 된다.
3. 함수 타입 지정
함수 표현식이든 선언식이든 큰 차이는 없다.
미리 타입을 선언해서 사용 가능하며 방법은 위와 같이 두 가지 중에 원하는대로 사용하면 된다.
나는 아무래도 화살표 함수 형식이 보기 좋은 것 같다.
4. 잡다한 것들
4-1 return값을 void로 설정해주면 return이 없다는 것을 의미한다.
4-2 타입 앞에 readonly를 선언하면 해당 값은 추후 수정할 수 없도록 보호된다. (타입스크립트에서만 보호될 뿐 자바스크립트 파일에서는 여전히 수정 가능하다.)
4-3 unknown은 아직 타입이 정해지지 않은 모든 곳에 사용할 수 있지만 any와는 달리 처음 타입 지정시에만 자유롭고 사용 시에는 타입 체크 과정을 거쳐야한다.
5. 제네릭
제네릭이란 타입을 함수 파라미터 같이 사용하는 것을 의미한다.
위에서 arr로 들어오는 값을 T[]로 지정해놨기 때문에 만약 arr에 number[]가 인자로 들어온다면 T는 number[]이 되고 string[]이 인자로 들어온다면 T도 string[]이 될 것이다.
또한 제네릭은 한 개 이상의 파라미터를 사용 가능하다.
6. 클래스 타입 지정 및 상속
타입스크립트에서는 접근 제한자(private, public, protected)를 사용할 수 있다.
private를 사용할 시 클래스 내부에서만 객체 인스턴스를 접근 가능하다.
protected를 사용할 경우 상속받은 클래스에서는 객체 인스턴스를 접근할 수 있다
public을 사용할 시 모든 곳에서 객체 인스턴스를 접근 가능하다.
abstract는 추상클래스로써 클래스의 템플릿이라고 생각하면 된다.
지금은 실제로 존재하지 않으나 이를 상속 받는 클래스는 반드시 해당 메서드를 구현해야 한다.
7. 클래스를 함수의 타입으로 전달할 수 있다..
그렇다고 합니다.
8. interface와 type의 차이
interface는 타입을 계속해서 재선언하면 자동으로 이들을 합쳐준다. type은 같은 이름의 타입을 재할당/재선언할 수 없다.
interface는 class와 같이 extends를 사용하여 기존의 타입을 상속받을 수 있다.
type도 가능하지만 type 타입명 = 타입명아빠 & { type : string } 이런 식으로 받아와야 한다.
사실 여기까지는 별로 중요한 거 아니고 아래 내용이 가장 큰 차이를 보여준다.
type으로 클래스의 타입을 선언해 줄 경우 constructor부터 모든 것을 class와 똑같은 형태로 만들어줘야 한다.
interface의 경우 기존 객체 타입 선언할 때처럼 간단하게 선언할 수 있다.
참고로 이는 자바스크립트에서도 차이를 보이는데, type으로 선언할 시 js 파일에 class 형태로 흔적이 남지만 interface의 경우 js 파일에는 아무 것도 남지 않는다.
자바스크립트의 용량을 줄이고 깔끔하게 관리하고 싶다면 class의 타입 지정 시에는 interface를 사용하는 것이 좋을 것 같다.
그러나 유일한 단점이 있으니 interface에서는 접근 제한자를 설정해줄 방법이 없다는 것이다. 접근 제한자를 사용해야 한다면 type을 사용하는 수 밖에 없다.