TypeScript :: 타입(자료형)에 대해 알아보자.

---

Windows 10
Node v16.15.0
TypeScript 4.7.3

타입스크립트 설치 과정이 필요하다면 아래 링크로 이동하세요.

2022.06.10 - [Develop Log/Coding Log] - TypeScript: 설치부터 JavaScript 변환까지

---

타입스크립트의 기본 타입 (자료형)

null & undefined

• null
  값이 없다는 것을 명시

• undefined
  값을 할당하지 않은 변수의 초깃값

  
  null 과 undefined는 다른 값의 하위 타입으로 다른 타입에 할당할 수 있습니다.

let _null: null = null;
console.log(_null); // null

let _undefined: undefined = undefined;
console.log(_undefined); // undefined


let test_null_undefined: number = 2;
console.log(test_null_undefined) // 2
test_null_undefined = _undefined;
console.log(test_null_undefined); // undefined
test_null_undefined = _null;
console.log(test_null_undefined); // null

boolean - 불리언

참/거짓을 나타내는 타입, 값으로는 true/false 를 사용한다.

let isBool: boolean = false;
console.log(isBool); // false

number - 숫자

정수와 실수, Infinity, NaN

let decimal: number = 10;
console.log(decimal) // 10

let decimal2: number = 10.12;
console.log(decimal2) // 10.12

string - 문자열

큰따옴표(") 또는 작은따옴표(') 를 문자열 데이터를 감싸는 데 사용할 수 있습니다.

그리고 템플릿 문자열을 사용하면 ${expr} 과 같은 표현식을 유용하게 사용할 수 있습니다.

let dogName: string = 'gogoma';
let color: string = 'brown';
console.log(dogName, color); // gogoma brown
console.log(`ES6: The color of '${dogName}' is ${color}` ); // ES6: The color of 'gogoma' is brown

object - 객체형(참조형)

const obj: object = {
    'dogName': 'gogoma',
    'color': 'brown'
};
console.log(obj); // { dogName: 'gogoma', color: 'brown' }
const obj2: object = { dogName, color };
console.log(obj2); // { dogName: 'gogoma', color: 'brown' }

array - 배열

배열 타입은 두 가지 방법으로 사용할 수 있습니다.

[] 로 사용하거나, Array<> 로 사용할 수 있습니다.

let list2: number[] = [ 1, 2, 3 ];
let list3: Array<Number> = [1, 2, 3]; // generic
console.log(list2); // [ 1, 2, 3 ]
console.log(list3); // [ 1, 2, 3 ]

tuple - 튜플

고정된 요소 수만큼의 타입을 미리 선언 후 배열을 표현합니다.

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

let tuple: [string, number] = ['hello', 1];
console.log(tuple); // [ 'hello', 1 ]
tuple = ['hi', 2]; 
console.log(tuple); // [ 'hi', 2 ]

tuple = [2, 'hello'] // error!

enum - 열거형

숫자 값 집합에 이름을 지정한 것입니다.

단순히 순서대로가 아닌, 지정한 멤버에 값을 수동으로 설정할 수도 있습니다.

enum Color1 {Red, Green, Blue};
let c1: Color1 = Color1.Red;
console.log(c1); // 0
console.log(`${Color1.Red}, ${Color1.Green}, ${Color1.Blue}`); // 0, 1, 2

enum Color2 {Red=2, Green, Blue=6};
let c2: Color2 = Color2.Green;
console.log(c2);
console.log(`${Color2.Red}, ${Color2.Green}, ${Color2.Blue}`); // 2, 3, 6
console.log(`${Color2[6]}`); // Blue

유용한 점은 Color2.Blue 처럼 사용해 6 이라는 값을 가져올 수도 있지만

Color2[6] 을 사용해 Blue 라는 값을 가져올 수도 있습니다.

any

타입을 추론할 수 없거나, 타입을 체크할 필요가 없는 경우 사용합니다.

어떤 타입의 값이라도 할당할 수 있습니다.

예를 들어 기존 자바스크립트에서 'var' 키워드로 선언한 경우 타입을 마음대로 변경해서 값을 할당할 수 있었습니다.

var jsType = '1';
jsType = 2;

그러나 타입스크립트에서는 정적 타입으로 선언하므로 이를 대신할 수 있는 것을 any 라고 할 수 있겠습니다.

let anyType: any = 4;
anyType = '모든 타입의 값을 할당할 수 있다. (타입을 추론할 수 없는 경우 사용한다.)';
anyType = false;
// let numberList: number[] = [ 1, '2', 3 ]; // error! Type 'string' is not assignable to type 'number'.
let anyList: any[] = [ 1, '2', 3];
console.log(anyList); // [ 1, '2', 3 ]

any 타입은 배열에 들어갈 값의 타입을 정확히 알지 못할 때 효율적으로 사용할 수 있습니다.

number[] = [1, '2', 3] 은 숫자가 아닌 문자열의 값이 포함되므로 에러가 발생합니다.

그러나 any[] = [1, '2', 3] 은 사용할 수 있습니다.

void

일반적으로 함수에서 반환값이 없을 때 사용합니다.

any와는 반대로 어떤 타입도 존재할 수 없습니다.

function warnUser(): void {
    console.log('warnning!');
}
warnUser(); // warnning!

단, null 과 undefined 는 할당이 가능합니다.

let warnUser2 = function():void {
    console.log('warning2!');
}
warnUser2(); // warning2!
warnUser2 = null;
warnUser2 = undefined;
// warnUser2 = 2; // error!

이처럼 void 타입의 변수는 null 과 undefined 값만 할당할 수 있기 때문에 일반적으로는 사용하지 않습니다.

never

결코 발생하지 않는 값

어떤 타입도 never 에 할당할 수 없습니다.

function error(message: string): never {
    throw new Error(message);
}

never 타입은 반환을 할 수 없기 때문에 '끝' 이라는 지점이 없어야 합니다.

function infiniteLoop(): never {
    while (true) {
    }
}

예를 들어 위의 결과는 에러가 발생하지 않는 코드이지만,

function infiniteLoop(): never {
    while (true) {
        break;
    }
}

해당 코드는 에러가 발생하는 코드입니다. break 라는 부분에서 연결 가능한 끝지점이 있을 수 있기 때문에 에러가 발생합니다.

Symbol - 식별자

Symbol은 유일한 식별자를 만들고 싶을 때 사용합니다.

let id1 = Symbol("id");
let id2 = Symbol("id");
console.log(id1 == id2); // false
console.log(Symbol.keyFor(id1) == Symbol.keyFor(id2)); // true

id1, id2 에는 같은 값인 "id" 를 할당했지만

실제로 두 변수를 비교했을 때는 false 를 반환합니다.

이렇게 같은 값이지만 두 변수는 고유의 식별자이므로 값을 비교하고 싶다면

해당 식별자의 값을 꺼내어 비교해야 합니다.

References

1. Angular Essentials / 저자 : 이웅모

2. 소개 · GitBook (typescript-kr.github.io)