기본 타입

공식 문서에서 자바스크립트와 동일하지 않거나 새로 나온 부분만 정리

불리언

숫자

• 자바스크립트와 동일하게 모든 숫자는 부동 소수 값

• 16진수, 10진수 뿐만 아닌 2진수와 8진수 리터럴까지 지원

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

문자열

배열

• 자바스크립트의 배열과 동일

• 사용방법에는 두 가지가 있다
  1. 배열 요소들의 타입 + []

     let list: number[] = [1, 2, 3];

  2. 제네릭 배열 타입

     let list: Array<number> = [1, 2, 3];

튜플

1. 요소의 타입과 개수가 고정된 배열을 표현 가능
   • 요소들의 타입이 모두 같을 필요는 없음

2. 정해진 인덱스의 요소는 미리 정의된 타입을 반환 함
   • 예를 들어 넘버로 정의한 인덱스에 string 의 split 같은 함수를 호출하려하면 에러가 발생한다는 뜻

3. 배열과 다르게 정해진 인덱스가 아닌 곳에 접근하면 에러 발생

// 1 튜플 타입으로 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 성공
// 잘못된 초기화
x = [10, "hello"]; // 오류

// 2
console.log(x[0].substring(1)); // 성공
console.log(x[1].substring(1)); // 오류, 'number'에는 'substring' 이 없습니다.

// 3
x[3] = "world"; // 오류, '[string, number]' 타입에는 프로퍼티 '3'이 없습니다.
console.log(x[5].toString()); // '[string, number]' 타입에는 프로퍼티 '5'가 없습니다.

열거형 (Enum)

• 값의 집합에 더 나은 이름을 붙여줄 수 있다.

• 기본적으로 enum 은 0 부터 시작해 멤버들의 번호를 매긴다.

• 모든 값을 수동으로 설정할 수 있다.

• 인덱스로 접근하면 enum 멤버의 이름을 알아낼 수 있다.

// 사용 방법
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

• 사용 시 주의할 점
  • enum 은 자바스크립트에는 없고 ts에서 생긴 스펙임

    ⇒ 트랜스파일링 하면 JS에서 즉시 실행함수로 변경된다.

  • 그래서 웹팩과 같은 번들링 툴이 사용되지 않는 enum 을 제대로 트리쉐이킹 못 해준다는 단점이 있음
  • 해당 글 참고

UnKnown

• 애플리케이션 구현 시 알지 못하는 타입을 표현해야 할 때 사용
  • 사용자로부터 받은 데이터 혹은 서드 파티 라이브러리 등의 동적인 컨텐츠

• 이 경우 컴파일러와 추후 코드를 읽는 사람에게 이 값은 어떤 것 이든 될 수 있다고 표시하는 타입

let notSure: unknown = 4;
notSure = "maybe a string instead";

// OK, definitely a boolean
notSure = false;

• unknown 은 typeof 체크, comparison check 등의 타입 체크 기법으로 특정 타입을 의미하도록 할 수 있다.
  • 이후에 다룰 내용

Any

• 어떤 상황에서는, 모든 타입을 정의 하기가 불가능 하거나 부적절 하리만큼 많은 노력이 드는 경우가 있다.

• 이는 보통 TS 로 작성되지 않은 코드나 서드 파티 라이브러리 때문인데, 이 경우 에 any 를 사용한다

• Unknown 과는 다르게 any 에서는 존재하지 않는 속성을 사용할 수 있다.
  • TS 에서는 any 가 이 속성을 갖는지 검사하지 않는다

let looselyTyped: any = 4;
// OK, 런타임에는 ifItExists 라는 속성이 있을수도 있음!
looselyTyped.ifItExists();
// OK, toFixed 가 존재하므로 컴파일 성공 (하지만 실제로 컴파일러는 체크하지 않는다)
looselyTyped.toFixed();

let strictlyTyped: unknown = 4;
strictlyTyped.toFixed();
// Error, Object is of type 'unknown'.

• Any 는 객체를 통해 전파 될 수도 있음

let looselyTyped: any = {};
let d = looselyTyped.a.b.c.d;
//  ^ = let d: any

• 주의할 점 : 이 타입을 사용함으로 얻는 편리함은 타입 안전성을 잃는데서 나오는 것 이라는 점을 기억할 것.
  • 그리고 타입 안정성은 타입스크립트를 사용하는 주요 동기 중 하나임

any 와 unknown 의 차이

Void

• void는 어떤 타입도 존재할 수 없음을 나타냄

• void는 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰이는 것을 볼 수 있다

• void를 타입 변수로 선언하는 것은 유용하지 않음
  • 그 변수에는 null(--strictNullChecks을 사용하지 않을 때만 해당, 자세한 건 다음 섹션을 참고)또는 undefined 만 할당할 수 있음
  • ❓잘 써먹을 만한 방법이 없을까?

Null and Undefined

• TypeScript는 undefined 과 null 둘 다 각각 자신의 타입 이름으로 undefined , null로 사용

• void 처럼 그 자체로 유용한 경우는 거의 없다

// 이 밖에 이 변수들에 할당할 수 있는 값이 없음
let u: undefined = undefined;
let n: null = null;

• 기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입이다.

• 이건, null과 undefined를 number 같은 타입에 할당할 수 있다는 것을 의미

• 하지만, --strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능 (예외적으로 undefined는 void에 할당 가능합니다)
  • 이건 많은 일반적인 에러를 방지하는 데 도움을 준다.
  • 이 경우, string 또는 null 또는 undefined를 허용하고 싶은 경우 유니언 타입인 string | null | undefined를 사용할 수 있다. (유니언 타입은 상급 주제로, 이후 챕터에서 다룸)

Never

• never 타입은 절대 발생할 수 없는 타입을 나타냄

• 예를 들어, never는 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰임.

• 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 타입을 얻게 될 수 있다

• never타입은 모든 타입에 할당 가능한 하위 타입

• 하지만 어떤 타입도 never에 할당할 수 있거나, 하위 타입이 아님 (never 자신은 제외)
  • 심지어 any 도 never에 할당할 수 없다.

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
    throw new Error(message);
}

// 반환 타입이 never로 추론된다.
function fail() {
    return error("Something failed");
}

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function infiniteLoop(): never {
    while (true) {
    }
}

Object

• object는 원시 타입이 아닌 타입을 나타낸다

• number, string, boolean, bigint, symbol, null, 또는 undefined 가 아닌 나머지

Type assertions

• 가끔, TypeScript보다 개발자가 값에 대해 더 잘 알고 있을 때가 있다.

• 대개, 이런 경우는 어떤 엔티티의 실제 타입이 현재 타입보다 더 구체적일 때 발생

• 타입 단언(Type assertions) 은 컴파일러에게 "날 믿어, 난 내가 뭘 하고 있는지 알아"라고 말해주는 방법

•  타입 단언은 다른 언어의 타입 변환(형 변환)과 유사하지만, 다른 특별한 검사를 하거나 데이터를 재구성하지는 않는다. 이는 런타임에 영향을 미치지 않으며, 온전히 컴파일러만 이를 사용함,

• 타입 스크립트는 개발자가 필요한 어떤 특정 검사를 수행했다고 인지
  • 다시 말해 사용하려면 특정 타입 검사를 하라는 의미로도 볼 수 있음

• 타입 단언의 형태 2가지
  1. angle-bracket

     let someValue: any = "this is a string";
     
     let strLength: number = (<string>someValue).length;

  2. as-문법

     let someValue: any = "this is a string";
     
     let strLength: number = (someValue as string).length;

• 위 두 예제는 기능상 완전히 동일하지만 TypeScript를 JSX와 함께 사용할 때는, as-스타일의 단언만 허용

About Number, String, Boolean, Symbol and Object

• Number, String, Boolean, Symbol, Object 와 같이 대문자로 시작하는 타입들이 위의 소문자 타입들과 같다고 생각하기 쉽다.

• 하지만 이 타입들은 primitive language 를 참조하지 않으며, 따라서 절대 타입으로 사용되서는 안 된다.

• 대신 소문자로 된 타입을 쓰라고 권함