TS는 JS의 단점을 보완하기 위해 등장한 언어임.
변수 타입이 실행 때 결정되던 것이 컴파일 시간에 결정이 된다.(코드를 작성하자마자 오류를 잡아줌)
자료형을 지정할 수 있어서 지정한 자료형 이외의 자료형을 입력하면 에러를 발생시켜줌
정의되지 않은 프로퍼티를 연산하는 것을 막아 NaN을 방지할 수 있다.
TS를 사용하면 객체지향 프로그래밍에서의 메리트를 얻을 수 있음.(값을 변경하지 못하게 한다던가...)
컴파일러는 내가 사용하는 언어로 작성한 코드를 다른 언어로 변환해주는 도구임.
컴파일 과정에서 내 코드를 검사해서 문제가 없는지 확인을 한다. tsc === 타입스크립트 컴파일러(TS -> JS)
tsc --init 명령을 사용하면 tsconfig.json파일이 생성된다.(TS의 프로젝트 설정파일)
.d.ts파일: TS 타입 정의 파일임. JS 라이브러리에 대한 타입 정보를 제공해준다.(JS 라이브러리도 TS 환경에서도 사용할 수 있게 도와준다.) .d.ts파일은 JS 라이브러리에 대한 타입 정보를 제공해 줄 뿐만 아니라, 외부 라이브러리의 타입 추론도 할 수 있다 = 컴파일러가 스스로 해당 타입에 대해 추론을 해주는 것)
JS 라이브러리를 TS에서 사용하려면? => JS라이브러리를 삭제할 필요 없이 라이브러리에 대한 .d.ts파일만 제공을 해주면 된다.
타입을 제대로 알아야하는 이유
1. 타입을 이해하고 올바르게 사용을 하면 코드의 가독성과 안정성이 향상된다.
2. 타입의 안정성은 내가 예상한 동작들을 보장한다.
3. 코드의 품질이 좋아지고, 실행 시 발생할 수 있는 오류를 줄일 수 있음
(안정성과 디버깅 시간의 감소)
4. 타인이 코드를 봤을 때 이해하기 쉬워지며, 협업에 이득이 된다.
타입을 잘못 사용했을 때 발생하는 문제점
1. 예상치 못한 타입이나, 잘못된 타입을 사용했을 경우 오류가 발생함
2. 코드가 복잡해질 수록 에러를 찾기 어려워짐
기본 타입(불리언, 넘버, 스트링, 어레이, 튜플, 이넘)
* 2가지의 상태(true/false로 이분법이 가능한 것)를 표현하고 싶은 경우는 boolean을 사용함
** 3가지 이상의 상태를 표현하고 싶은 경우에는 enum이나 string을 사용해야한다.
- 튜플(tuple): 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열임
배열과 튜플의 차이: 배열은 같은 타입(자료형)의 원소만 가질 수 있지만, 튜플은 어떤 타입의 원소를 허용할 것인지 정의만 해주면 된다.
튜플 사용시 주의점: 자료형의 순서를 따라 값이 들어와야 한다.
- enum: 열거형 데이터 타입이라고도 한다.
다양한 상수를 이해하기 쉬운 문자열 이름으로 접근하고 사용할 수 있게 해준다.
* enum안의 요소는 number와 string타입의 값만 할당이 가능하다
* enum안에 있는 요소는 값이 설정되어 있지 않으면 기본적으로 숫자 0으로 시작함
const와 readonly
- readonly는 객체 버전의 const임(객체의 속성을 불변으로 만드는데 사용된다)
=> class나 interface의 속성을 변경할 수 없게 잠궈버린다.
(속성에 접근해서 다른 값으로 재할당 할 수 없다.)
any, unknown, union
위 세가지 타입은 가변적인 타입의 데이터를 저장할 때 사용한다.
(any보다는 unknown을 사용하는 것이 좋고 일일이 가변적인 타입을 정의 가능하면 union이 가장 이상적임)
- any: TS에서 모든 타입의 슈퍼 타입이다.(어떤 타입의 값이든 저장 가능함)
** any의 경우에는 어떤 타입의 데이터 타입을 저장을 할 수 있기 때문에 타입을 지정하여
코드의 안정성을 지키려는 TS의 근간을 해치기 때문에 사용을 지양하는 것이 좋다.
- unknown: any와 비슷한 역할을 하지만 보다 더 안전한 방식으로 동작한다.
더 안전한 이유? 값을 다른 타입의 변수에 할당하기 위해서는 명시적으로 타입을 확인해야하기 때문임
ex) let unknownValue: unknown = '문자열입니다'
console.log(unknownValue); // 문자열입니다
let stringValue: string;
stringValue = unknownValue // 에러 발생 암시적으로는 문자열이지만, 문자열이 보장되지 않음
stringValue = unknownValue as string
console.log(stringValue ); // 문자열입니다.
변수 뒤에 as 자료형 방식으로 Type Assertion(타입 단언)을 해줘야함
- union: unknown의 위험성을 더 줄여주기 위해 사용한다.
unknown의 한계: 재할당 시 타입 체크가 이뤄지지만 재할당을 하지 않는다면 타입의 안정성을 보장하지 않는다.
union은 여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용한다.
union은 | 연산자를 사용하여 여러 타입을 결합하여 표현한다.
ex) type StringOrNumber = string | number (StringOrNumber은 문자열과 숫자형 중 하나를 받을 수 있다는 것을 보여줌)