Typescript - 기본타입

아래 내용은 강좌를 들으며 공부한 내용을 요약 정리한 자료입니다.

Types

• number: 11, 11.23, -550 -> integer, float 을 포함
• string: 'hi', "hi", `h`
• boolean: true, false -> 참과 거짓을 다룸 값이 두 개 뿐
• object: { age: 30 } -> 모든 자바스크립트 객체는 모두 객체 타입이지만, 타입스크립트에서는 조금 더 구체적인 객체도 있음.리터럴 또는 생성자 필요
• array: [1,2,3] -> 어떤 자바스크립트의 타입도 저장할 수 있는 구조
• tuple: [1,2], [1, “admin”] -> 길이 및 타입이 고정 된 배열
• enum: enum { NEW, OLD } -> 열거 목록 제공, 라벨들은 0부터 시작하는 숫자로 변환되고 식별가능한 라벨이 존재, 우리는 종종 대문자로 이루어진 상수를 보곤 하는데, 사실 어떤 방식으로 해도 상관 없음(하지만 저는 보통 FEATURE_STATUS 등으로 사용)
• any: * -> 타입스크립트에게 어떤 것도 제한하지 않고, 원하는대로 동적 할당 가능 any 가 존재하면 타입스크립트 컴파일러가 동작하지 않음
• void → void 로 정의한 경우 return 값이 있어도 괜찮음
• never → 절대로 리턴이 될 일이 없음
  • 브라우저에는 내장 타입스크립트 지원이 없기 때문에 런타임에서 자바스크립트가 다른 식으로 작동하도록 변경하지 않는다.

자바스크립트(dynamic type)와 타입스크립트(static type)의 차이를 보자.

• 자바스크립트이 타입은 동적 타입이다. 즉, 나중에 문자열을 할당할 때 처음에 숫자형을 잡아둘 수 있는 변수가 할당 되었더라도 전혀 지장이 없는 것을 의미한다. 그래서 특정 타입에 의존하는 코드가 있는 경우, 런타임에서 현재 타입을 확인할 수 있게 해주는 typeof 로직이 추가되어야 한다.
• 타입스크립트의 경우는 타입이 정적이므로 할당할 수 없는 값을 컴파일 단계에서 확인가능하다.

타입 케이스

• 타입스크립트에서는 항상 string 또는 number 와 같은 타입을 다룬다.
• 타입스크립트의 주요 원시 타입은 모두 소문자

타입 추론(Type inference)

• 내장기능
• 특정 변수나 상수에 어떤 타입을 사용했는지 타입스크립트가 알아서 이해하는 것
• e.g) const number = 4; // 자연스럽게 넘버로 인지
• e.g) let number // 이런 경우는 타입을 지정해줘야함
  • 선언 시에 굳이 타입을 지정하지 않는 것이 좋음

Object type

중첩된 객체 및 타입

• 물론 객체 타입은 중첩 객체에 대해서도 생성할 수 있습니다.

// 다음과 같은 자바스크립트 객체가 있다고 가정해 봅시다:
const product = {
  id: 'abc1',
  price: 12.99,
  tags: ['great-offer', 'hot-and-new'],
  details: {
    title: 'Red Carpet',
    description: 'A great carpet - almost brand-new!'
  }
}

// 이러한 객체의 타입은 아래와 같습니다.

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

//따라서 객체 타입 안에 객체 타입이 있다고 말할 수 있습니다.

타입 alias 및 객체 타입

• 타입 별칭을 사용하여 타입을 직접 “생성”할 수 있습니다. 유니온 타입을 저장하는 것만 가능한 것이 아닙니다. 복잡할 수 있는 객체 타입에도 별칭을 붙일 수 있습니다.

type User = { name: string; age: number }
const u1: User = { name: 'Max', age: 30 } // this works!

타입 별칭을 사용하면 불필요한 반복을 피하고 타입을 중심에서 관리할 수 있습니다.

// 예를 들어, 다음 코드를 아래와 같이 단순화할 수 있습니다.
function greet(user: { name: string; age: number }) {
  console.log('Hi, I am ' + user.name)
}
function isOlder(user: { name: string; age: number }, checkAge: number) {
  return checkAge > user.age
}

// 단순화 후:

type User = { name: string; age: number }
function greet(user: User) {
  console.log('Hi, I am ' + user.name)
}
function isOlder(user: User, checkAge: number) {
  return checkAge > user.age
}