자바스크립트에서 값은 타입을 가지지만 변수는 별도의 타입을 가지지않음
타입스크립트는 이 변수에 타입을 지정할 수 있는 타입 시스템 체계를 구축함
-> 특정 타입을 지정한 변수에 해당 타입의 값만 할당 가능

원시 타입

boolean

자바스크립트에는 boolean 원시 값은 아니지만 형 변환을 통해 true/false로 취급되는 Truthy/Falsy 값이 존재함
ex> 0, -0, undefined

이 값은 boolean 원시 값이 아니므로 타입스크립트에서도 boolean 타입에 해당하지 않음

undefined

정의되지 않음, 초기화되지 않은 값
변수 선언만 한 경우

type Person {
	name: string;
    job?: string;

Person 타입의 job속성의 경우 undefined 할당가능

null

오직 null만 할당 가능
보통 빈값을 할당해야 할 때 null을 사용
이때 사용된 null은 명시적 의도적으로 값이 아직 비어있음을 보여줌

undefined vs null
자바스크립트에서는 흔히 값이 없다는 것을 나타낼때 이 둘을 혼용함
심지어 ==연산자로 둘 비교하면 true값을 뱉음
하지만 엄연히 따로 존재하는 원시 값이기에 서로의 타입에 할당할 수 없음

type Person1 = {
  name: string;
  job?: string;
};

type Person2 = {
  name: string;
  job: string | null;
};

undefined : job속성이 있을 수 도 없을 수도...
null : job속성을 사람마다 가지고 있지만 값이 비어있을 수도....

number

모든 숫자는 number 타입에 할당 가능
숫자에 해당하는 원시 값 중 NaN이나 Infinity도 포함됨

bigInt

ES2020에 새롭게 도입된 데이터 타입. 타입스크립트 3.2버전부터 사용 가능
이전의 js에서는 가장 큰수인 Number.MAX_SAFE_INTEGER를 넘어가는 값을 처리할 수 없었는데 bigInt를 사용하면 이보다 큰 수 처리가능
Number, bitInt는 엄연히 서로 다른 타입이기에 상호작용은 불가능

string

symbal

ES2015에서 도입된 데이터 타입으로 Symbol()함수를 사용하면 어떤 값과도 중복되지 않는 유일한 값을 생성할 수 있음

const MOVIE_TITLE = Symbol("title");
const MUSIC_TITLE = Symbol("title");
console.log(MOVIE_TITLE === MUSIC_TITLE); // false

객체 타입

위 7가지 원시 타입에 속하지 않는 값은 모두 객체 타입으로 분류할 수 있음

object

object타입은 가급적 사용하지 말도록 권장함. any타입과 유사하게 객체에 해당하는 모든 타입 값을 유동적으로 할당 가능해서 정적 타이핑의 의미가 없어져버림

{}

중괄호는 자바스크립트에서 객체 리터럴 방식으로 객체를 생성할 때 사용함
빈 객체 타입을 지정하기 위해서는 {}보다는 유틸리티 타입으로 Record<string, never>처럼 사용하는 게 바람직함

array

자바스크립트의 배열 자료구조는 원소를 자유롭게 추가하고 제거할 수 있음
그리고 타입 제한 없이 다양한 값을 다룸, 즉 하나의 배열 안에 숫자, 문자열과 같은 서로 다른 값이 들어있을 수 있음

하지만 이런 쓰임은 타입스크립트가 추구하는 정적 타이핑 방향과 맞지 않음
그래서 타입스크립트에서는 배열을 array라는 별도 타입으로 다룸
타입스크립트 배열 타입은 하나의 타입 값만 가질 수 있음

Array키워드 사용 or 대괄호([]) 사용

type과 interface키워드

object타입은 실무에서 잘 안씀.
흔히 객체를 타이핑하기 위해 자주 사용하는 키워드로 type과 interface가 있음.
중괄호를 사용한 객체 리터럴 방식으로 타입을 매번 일일이 지정하기에는 중복적인 요소가 많음. 그래서 type,interface를 아래처럼 씀

type NoticePopupType = {
  title: string;
  description: string;
};

interface INoticePopup {
  title: string;
  description: string;
}
const noticePopup1: NoticePopupType = { /* ... */ };
const noticePopup2: INoticePopup = { /* ... */ };

일반적으로 타입스크립트에서는 변수 타입을 명시적으로 선언하지 않아도 컴파일러가 타입을 추론함 -> 타입 유추
명시적으로 할건지, 타입추론을 컴파일러한테 맡길지는 개인취향 or 팁의 컨벤션을 따르자

둘 다 쓸 수 있을 때는 내 기준을 만들거나 팀 컨벤션 따르자 -> 책 p76

function

함수를 별도 함수 타입으로 지정
자바스크립트에서 typeof 연산자로 확인한 function이라는 키워드 자체를 카입으로 사용하지 않음
둘째, 함수는 매개변수 목록을 받을 수 있는데 이걸 별도 타입으로 지정해야됨
반환값 있으면 반환값에 대한 타이핑이 필요

function add(a: number, b: number): number {
  return a + b;
}

호출 시그니처(함수 타입을 정의할 때 사용하는 문법)를 정의하는 방식으로 한다~ 아래처럼

type add = (a: number, b: number) => number;

끝
.
.
.
🫠

출처 : 우아한 타입스크립트 with 리엑트