2023-12-19 본캠프 54일차 / 73일차 TIL

주요진행사항

- typescript 강의 수강

 

---

typescript 강의수강

 

1. 타입스크립트의 타입

- number 
- string
- boolean
- object
- array
- tuple
- enum
- any

자바스크립트는 동적타입 사용 (런타임에 변경가능)
타입스크립트는 정적타입 사용 (런타임에 변경불가)
타입스크립트는 자바스크립트보다 더 많은 타입을 가지고 있다.
따라서 타입스크립트는 더 강력한 타입 지정이 가능하다.
* 타입스크립트의 주요 원시 타입은 모두 소문자

타입스크립트의 타입추론 내장기능
상수나 변수에 어떤타입을 사용하였는지 추론 가능
따라서 다음과 두 코드는 같은 코드이다.
const number1:number =1;
const number1 = 1;

허나 최초 값의 초기화가 되지 않은 경우에는 사용한다.
const number2:number;


- object type
object의 형식과 비슷하게 생겼지만 차이가 있음
1. 쉼표가 없고 세미콜론이 들어간다
2. key: value pair 가 아닌 key: type pair다
object를 선언할 때는 구체적인 프로퍼티의 타입이 명시되어야 한다.
중첩 객체 역시 다음과 같이 사용하면 된다.

{
  id: string;
  price: number;
  tags: string[];
  details: {
    title: string;
    description: string;
  }
}

- array type
array type의 형태는 배열 내부의 값의 타입을 먼저 명시 후 대괄호를 사용한다.
string[] , number[] 등

이렇게 했을 때 좋은 점은 배열 내부의 값을 미리 추론이 가능하여 각 타입에 맞는 메서스, 프로퍼티를 모두 추론하여 사용이 가능하다는 점이다.


- tuple type
tuple type은 타입스크립트에서 제공되는 타입으로
특정한 타입과 개수를 명시할 수 있는 배열을 고정할 때 사용한다.
사용 법은 배열과 다르게 [number,string] 과 같이 대괄호 내부에 타입을 명시한다.
2의 크기를 가졌기 때문에 2 이상이 들어가면 오류가 발생하며, 각 인덱스당 타입이 다르다면 오류가 발생한다.
허나 배열 함수인 push를 사용했을 때는 오류가 발생하지 않는 문제가 있으니 주의해야한다.

- enum type
enum type은 상수를 묶어서 관리할 수 있는 타입이다.
enum Role {ADMIN, READ_ONLY, AUTHOR} 형식으로 사용되며,
기본적인 요소의 값은 맨 앞부터 0에서 1씩 증가한다.
이는 최초 값에 숫자를 지정할 시 지정한 숫자부터 1씩증가하며,
각각에 다른 값을 줄 수도 있다. (string 등)

- any type
모든 값을 사용 가능하기 때문에 유연하다.
하지만 타입스크립트의 장점을 사용할 수 없기 때문에
사용하지 않는 것이 좋다.

- 유니온타입
유니온 타입은 | (파이프 기호) 로 여러 타입을 묶는 역할을 한다.
유연한 타입 처리를 가능하게 해준다.
매개변수의 타입이 유니온타일 일 시 주로 타입키퍼를 통해 반환값을 처리한다.

- 리터럴타입
리터럴 타입은 말그대로 리터럴을 이용한 타입으로 유니온 타입과 묶어서 자주 사용한다.
유니온 타입처럼 파이프기호 | 로 구분하며 다음과 같이 사용한다
'as-number'|'as-text' 
이러한 사용은 간단하게 구분되는 것들에 사용하기 좋으며, enum으로 대체도 가능하다.
만약 리터럴 타입에 포함된 리터럴 값이 아니라면 오류를 발생한다.

- 알리어스타입
알리어스타입이란 특별한 타입이 아니라 type 이라는 키워드와 함께 특정 타입을 변수화 하는 것을 뜻한다.
물론 단일 타입을 변수화 한다면 오히러 가독성을 해칠 수 있지만,
유니온 타입처럼 다수의 타입을 묶는 용도로는 아주 좋은 선택지이다.
재사용성이 좋으며, 코드 가독성도 높힐 수 있다.

- 함수의 반환값
반환값이 없는 함수는 반환값의 타입을 지정할 때 void의 값이 추론된다.
이런 형태의 함수를 console.log 하였을 때 undefined가 나타난다.
따라서 반환값이 없는 함수의 반환값 타입은 void이지만 기술적으로는 undefined을 반환한다.