타입스크립트: 타입이 추가된 자바스크립트.
타입스크립트의 장점:
타입스크립트 학습시 권장 사항
1. any 키워드는 회피한다. any를 쓰면, 타입스크립트보다 자바스크립트에 더 가까워진다.
2. strictNullChecks를 사용한다(undefined와 null을 참조하는 것을 방지하는 기능)
3. 선 타입선언, 후 구현.
타입스크립트의 기본 타입
- 원시 타입: string, number, boolean 타입.
- 객체 타입: 자바스크립트의 객체 literal 문법을 사용해서, 타입을 선언할 수 있음.
- 함수 타입: parameter의 타입과 return 타입 선언 가능.
- 배열 타입: 동일한 타입의 element를 가지는 배열로 선언 가능. Union operator와 사용하면 편함.
- 리터럴 타입: string, number, boolean 값을 타입으로 선언 가능.
- 튜플 타입: 배열 타입과 유사. 배열은 동일한 타입의 element를 가지지만, 튜플은 각 element의 타입이 다를 수 있고, 배열의 크기도 선언할 수 있음.
- undefined, null: 자바스크립트에서 접하던 undefined와 null.
- void: undefined와 유사하지만 조금 다름. void를 타입으로 선언하면 undefined를 할당/반환할 수 있지만, undefined를 타입으로 선언하면 void를 할당/반환할 수 없음.
- any: 어떤 타입이 할당돼도 괜찮음을 나타낼 때 사용하는 타입
- unknown: unknown 타입의 변수를, any가 아닌 다른 타입의 변수에 할당할 수 없다. type guard를 사용하지 않으면, unknown 타입의 변수를 통해, 프로퍼티에 접근할 수 없다. 이처럼, any보다는 엄격하기 때문에, any보다는 unknown을 사용하는것이 좋다.
클래스
아래와 같이, class 키워드를 사용하여 클래스를 정의할 수 있다. 이때, 클래스의 필드의 타입을 선언할 수 있고, 생성자와 메소드의 파라미터 타입 그리고, 메소드의 반환 타입을 선언하고 구현할 수 있다.
class ClassName{
field1: type1;
field2: type2;
constructor(parameter1: type3, parameter2: type4){
}
method1(parameter3: type5, parameter4: type6): returnType1{
}
}Getter,Setter
자바스크립트에도 존재하고, 대체적으로 비슷하다. 차이점은, 타입스크립트에서는, setter의 매개변수의 타입을 선언하지 않으면, getter의 반환 타입으로 추론한다.
접근-제어자
필드/메소드가, 어디에서 접근 가능한지 설정하는 키워드들이다. public, private, protected가 있다. public 필드/메소드는, 클래스 밖에서 접근할 수 있고, private 필드/메소드는 클래스 안에서만 접근할 수 있다. protected는, 해당 클래스 안과, 해당 클래스를 상속받는 클래스 안에서 접근할 수 있다.
readonly
해당 프로퍼티에 접근할 수 있지만, 재할당할 수 없음을 나타낸다.
메소드나 생성자 앞에 readonly 키워드를 사용할 수 없다.
추상클래스
new 키워드를 사용하여, 인스턴스화 할 수 없는 클래스를 의미한다. 추상필드와 추상메소드는, 추상클래스의 자손클래스가 구현해야하는 필드와 메소드를 의미한다.
parameter properties
타입스크립트에서는, 필드를 선언하고, 생성자 함수를 통해서 필드를 초기화할 수 있다. 이때, 필드의 선언과 생성자 함수를 통한 필드의 초기화를, 한번에 하도록 도와주는 syntactic sugar.
인터페이스
자바스크립트에는 없는 개념이다.
추상클래스와 비슷하게, 필드와 메소드를 정의한 뒤, 인터페이스를 구현하는 클래스가, 해당 필드와 메소드를 구현하도록 강제한다.
추상클래스와의 공통점
추상클래스와의 차이
타입 가드
타입 가드는, 타입을 좁혀나가는 방법이다. 크게 네가지의 방법이 있다.
typeof
typeof를 사용하여, 해당 데이터의 타입을 알 수 있다. 자바스크립트에서는 해당 데이터가 undefined, Null, Boolean, Number, BigInt, String, Symbol, Function, 호스트객체인지 궁금할 때 사용할 수 있다.
타입스크립트에서는, 위의 타입뿐만 아니라 다른 타입인지 확인하고 싶을 때나, 다른 변수의 type을 가져올 때도 사용할 수 있다.
유의할 점은, 자바스크립트로 컴파일되서 실행된다는 것이다. console.log(typeof 변수)를 하면, 해당 변수의 타입스크립트 타입이 아니라, 위에 나열한 자바스크립트 타입을 프린트한다.
ex)
let bar: number[];
let foo: typeof bar; // foo의 타입은 number[]in
해당 객체가, 특정 프로퍼티를 갖는지 체크하는 연산자다.
instanceof
해당 객체가, 특정 객체의 자손이거나 특정 객체인지 체크하는 연산자다.
사용자 정의
객체의 type을 체크하는 함수를 만들 수 있다.
해당 함수는, "매개변수 is 타입" 을 반환하도록 선언하면 된다.
열거형
키-값으로 이루어진 상수 집합.
계산된 값을 사용할 수 있다.
열거형은, 크게 세종류로 나뉜다.
1. 숫자형
숫자형 enum은 숫자를 값으로 갖는 enum을 말한다.
값을 초기화하지 않아도, 저절로 할당되며, 1씩 증가한다.
키-밸류로 멤버를 정의하면, 밸류-키 멤버또한 자동으로 정의되고, 이를 '리버스 매핑'이라 한다.
2. 문자형
문자를 값으로 갖는 enum을 말한다.
값을 초기화해야 하며, 리버스 매핑이 일어나지 않는다.
3. 혼합형
문자를 값으로 갖는 멤버와 숫자를 값으로 갖는 멤버가 공존하는 enum을 말한다.
값을 초기화해야 하고, 리버스 매핑이 일어나지 않는다.
const 열거
enum을 정의할 때, const 키워드를 앞에 사용하면 된다.
희한하게도, 컴파일 후 사라진다.
그 외로는, 불완전한 접근을 막는다고 하는데... 어떤 의미인지 이해할 수 없었다.
열거형 활용
타입 별칭
타입에 이름을 붙일 수 있다. 이는 타입을 재사용할 때 유용하다.
ex)
type type1 = {
first: num;
second: string;
}이 때, 타입을 추론하지 않는다.
유니온 타입
타입 여러개를 합칠 때 사용하는 연산자.
타입 별칭들을 합칠수도 있다.
타입을 복잡하게 여러곳에서 합치다 보면, 나중에는 특정 타입 별칭의 타입이 무엇인지 따라가기 힘들어진다. 그래서 조심히 사용해야 한다.
교차 타입
여러 타입을 동시에 만족하는 타입을 선언할 때 사용하는 연산자.
