[TypeScript] 기본 타입

TypeScript의 기본 타입은 JavaScript와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 이용하면 더 편리하게 사용할 수 있다고 한다.

 

Type 목록

1. Boolean

2. Number

3. String

4. Array

5. Tuple

6. Enum

7. Any

8. Void

9. Null and Undefined

10. Never

11. Object

 

1. Boolean

참/거짓 (true/false) 값

let isDone: boolean = flase;

 

2. Number

TypeScript의 모든 숫자는 부동 소수 값이다. 16진수, 10진수 리터럴에 더불어 2진수 8진수 리터럴도 지원함.

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

 

3. String

let name: string = "jang";
name = 'jang;

템플릿 문자열을 사용하여 여러 줄에 걸쳐 문자열을 작성할 수 있으며, 표현식을 포함시킬 수 있다.

let fullName: string = `jang ba`
let age: number = `200`
let my: string = `Hello. my name is ${fullName}, I'll be ${ age + 1 } years old next month.`

 

4. Array

배열 타입은 두 가지 방법으로 가능하다.

첫 번째 방법은 배열 요소들을 나타내는 타입 뒤에 "[]"를 쓰는 것이다.

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

두 번째 방법은 제네릭 배열 타입을 쓰는 것이다.

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

 

5. Tuple

튜플 타입을 사용하면, 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

단 요소들의 타입이 모두 같을 필요는 없다.

정해진 인덱스에 위차 한 요소에 접근하면 해당 타입이 나타난다.

정해진 인덱스 외에 다른 인덱스에 있는 요소에 접근하면, 오류가 발생하며 실패한다.

 

6. Enum

enum은 이름이 있는 상수의 집합을 만들 수 있다.

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

기본적으로, enum은 0부터 시작하여 멤버들의 번호를 매김. 멤버 중 하나의 값을 수동으로 설정하여 번호를 바꿀 수 있다.

또는. 모든 값을 수동으로 설정이 가능하다.

// 0이 시작이 아닌 1이 시작으로 변경
enum Color {Red = 1, Green, Blue = 4}
let c: Color = Color.Green;

enum의 유용한 기능 중 하나는 매겨진 값을 사용해 enum 멤버의 이름을 알아낼 수 있다는 것이다. 예를 들어, 위의 1이라는 값이 위의 어떤 color enum 멤버와 매칭 되는지 알 수 없을 때, 이에 일치하는 이름을 알아낼 수 있다.

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[1];

console.log(colorName); // 값이 1인 'Red'이 출력됩니다.

 

7. Any

정해지지 않은 type에 대해서도 표현이 가능하다. 이 값들은 사용자로부터 받은 데이터나 서드 파티 라이브러리 같은 동적인 콘텐츠에서 올 수 있음. 이 경우 type검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과하기 위해 any type을 사용한다.

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 성공

any type은 기존에 JavaScript로 작업할 수 있는 강력한 방법으로, 컴파일 중에 점진적으로 type 검사를 하거나 하지 않을 수 있다. 혹 다른 언어에서 그렇듯, Object가 비슷한 역할을 할 수 있는 것 같다고 생각이 가능하다. 그런데, Object로 선언된 변수들은 오직 어떤 값이든 그 변수에 할당할 수 있게 해 주지만 실제로 메서드가 존재하더라도 임의 호출이 불가능하다.

let notSure: any = 4;
notSure.ifItExists(); // 성공, ifItExists 는 런타임엔 존재할 것입니다.
notSure.toFixed(); // 성공, toFixed는 존재합니다. (하지만 컴파일러는 검사하지 않음)

let prettySure: Object = 4;
prettySure.toFixed(); // 오류: 프로퍼티 'toFixed'는 'Object'에 존재하지 않습니다.

또한, any type은 type의 일부만 알고 전체는 알지 못할 때 유용하다. 예를 들어, 여러 다른 타입이 섞인 배열을 다룰 수 있다.

let list: any[] = [1, true, "free"];

list[1] = 100;

 

8. Void

void는 어떤 type도 존재할 수 없음을 나타내기 때문에, any의 반대 타입과 같다. void는 보통 함수의 반환 값이 없을 때 사용된다.

function warnUser(): void {
    console.log("This is my warning message");
}

 

9. Null and Undefined

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

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

 

10. Never

never은 일반적으로 함수의 리턴 타입으로 사용되며 이 경우 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미한다. 무한 루프에 빠지는 것과 같다.

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

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

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

 

11. Object

object는 원시 타입이 아닌 타입을 나타냄. 예를 들어 number, string, boolean, bigint, symbol, null, undefined가 아닌 나머지를 의미한다.

객체의 타입을 정의하는 방법은 interface와 type이 존재하는데, 대부분의 TypeScript 개발자들은 확장성이 좋은 interface 사용을 권장한다.

declare function create(o: object | null): void;

create({ prop: 0 }); // 성공
create(null); // 성공

create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류

일반 Object 타입 정의

let obj: object = { name: 'NAME', age: 29 };

obj = { A: 'A', B: 'B' };

타입을 Object로 정의하면, any 타입처럼 모든 타입의 값을 할당할 수 있다.

이렇게 객체를 Object 타입으로 정의하면 TypeScript를 사용한 목적이 애매해진다.

 

interface로 구현

위와 같이 동작하지 않도록 interface를 구현하여 객체의 타입을 정의할 수 있다.

interface IUser {
  name: string,
  age : number
}

let obj: IUser = { name: 'NAME', age: 29 };

type으로 구현

Object의 타입은 interface와 유사한 type으로 구현이 가능하다.

type UserType = {
  name: string,
  age : number
}

let obj: UserType = { name: 'NAME', age: 29 };