[Typescript] 자료형

Typescript에서 기본 제공하는 데이터 타입

사용자가 만든 타입은 결국 이 기본 자료형들로 쪼개진다.

◆ Javascript 기본 자료형 포함 (superset)

• Boolean
• Number
• String
• Null
• Undefined
• Symbol (ECAMScript 6에서 추가)
• Array : Object형

 

◆ 추가

(프로그래밍을 도울 몇가지 타입이 더 제공된다.)

• Any
• Void
• Never
• Enum
• Tuple : Object형

let 변수명: 타입 = 값;

 

Primitive Type

• 오브젝트와 에퍼런스 형태가 아닌 실제 값을 저장하는 자료형
• Primitive 형의 내장함수를 사용 가능한 것은 자바스크립트 처리 방식 때문
  • 자바스크립트는 기본적으로 레퍼런스 타입이다. 그 중 Primitive Type만 값인데, 실제로는 마치 객체인 것처럼 동작한다. Primitive Type을 내장함수를 쓸 경우에 순간적으로 객체로 바꿔서 처리하고 다시 Primitive Type으로 돌려놓는다. (메모리 아낌)

let name = 'mark';
name.toString();

 

literal

• 값 자체가 변하지 않는 값을 의미
• 상수와 다른 것은 상수는 가리키는 포인터가 고정이라는 것이고, 리터럴은 그 자체가 값이자 그릇이다.

35;	// number 리터럴
'mark'	// string 리터럴
true	// boolean 리터럴

// object 리터럴
{
    name: 'mark',
    age: 35
}

 

Boolean / boolean

• 기본적인 데이터 타입. 단순한 true 또는 false 값.
• JavaScript / TypeScript 에서 'boolean'이라고 부른다.
• boolean은 Primitive Type, Boolean은 Wrapper Object의 생성자, 일종의 Class

let isDone: boolean = false;
typeof isDone === 'boolean';	// true

let isOk: Boolean = true;

// 컴파일 에러남
// 'boolean' is primitive, but 'Boolean' is wrapper object.
// Prefer using 'boolean' when possible. boolean 쓰는 걸 권장
let isNotOk: boolean = new Boolean(true);

 

Number / number

• JavaScript와 같이, TypeScript의 모든 숫자는 부동 소수점 값이다.
• TypeScript는 16진수 및 10진수 리터럴 외에도, ECMAScript 2015에 도입된 2진수 및 8진수 지원
• Boolean과 마찬가지로 new Number로 생성한 것을 Primitive number에 넣을 수 없고, number를 권장한다.

let decimal: number = 6;	// 10진수 리터럴
let hex: number = 0xf00d;	// 16진수 리터럴
let binary: number = 0b1010;	// 2진수 리터럴
let octal: number = 0o744;	// 8진수 리터럴

 

String / string

• 마찬가지, 문자열 데이터를 둘러싸기 위해 큰 따옴표(")나 작은 따옴표(')를 사용한다.

let name: string = "mark";
name = 'anna';

 

Template String

• ES6에 들어가는 Template String을 주로 사용한다.
• 쓰는 이유. 1. 여러줄에 걸쳐 표현할 수 있음. 2. 중간에 Javascript 변수를 넣을 수 있음.
• 행에 걸쳐 있거나, 표현식을 넣을 수 있는 문자열
• 이 문자열은 backtick(=backquote) 기호에 둘러쌓여 있다. ` `
• 포함된 표현식은 `${expr}` 와 같은 형태로 사용한다.

let fullName: string = `Bob Bobbington`;
let age: number = 37;

let sentence: string = `Hello, my name is ${ fullName }.

I'll be ${ age + 1 } years old next month.`;

// template string을 사용하지 않을 경우
let sentence: string = "Hello, my name is " + fullName " + ".\n\n" +
	"I'll be + (age + 1) + " years old next month.";

 

Undefined & Null

• TypeScript에서 'undefined'와 'null'은 실제로 각각 'undefined'와 'null'이라는 고유한 타입을 가진다.
• 'void'와 마찬가지로, undefined와 null은 그 자체로는 쓸모가 없다.
• 둘다 소문자만 존재한다.

// 이 변수들에 할당할 수 있는 것들은 거의 없다.
let u: undefined = undefined;
let n: null = null;

undefined & null are subtypes of all other types

• undefined나 null 타입은 다른 모든 타입에 대입이 가능하다.
• 하지만, 컴파일 옵션에서 '--strictNullChecks' 사용하면, null, undefined, void는 자기자신에게만 할당할 수 있다.
  • 이 경우, null과 undefined를 할당할 수 있게 하려면, union type을 이용해야 한다.

let name: string = null;
let age: number = undefined;

// strictNullChecks => true
// Type 'null' is not assignable to type 'string'
let name: string = null; (x)
// Type 'null' is not assignable to type 'undefined'
let u: undefined = null; (x)
let v: void = undefined; (O)
let union: string | null | undefined = 'str';

null in JavaScript

• null이라는 값으로 할당된 것을 null이라고 한다.
• 무언가가 있는데, 사용할 준비가 덜 된 상태
• null이라는 타입은 null 이라는 값만 가질 수 있다.
• 런타임에서 typeof 연산자를 이용해서 알아내면, object이다.

let n: null = null;

console.log(n);	//null
console.log(typeof(n));	// object

undefined in JavaScript

• 값을 할당하지 않은 변수는 undefined라는 값을 갖는다.
• 무언가가 아예 준비가 안된 상태
• object의 property가 없을 때도 undefined다.
• 런타임에서 typeof 연산자를 이용해서 알아내면, undefined다.

let n: undefined = undefined;

console.log(n);	//undefined
console.log(typeof(n));	// undefined

 

void

• 타입이 없는 상태
• 'any'와 반대의 의미를 가진다.
• Void는 없다. 소문자다.
• 주로 함수의 리턴이 없을 때 사용한다. 그 외에는 사용할 일이 거의 없다.

function returnVoid(message): void {
	console.log(message);
}

returnVoid('리턴이 없다.');

 

Any

• 어떤 타입이어도 상관없는 타입
• 이걸 최대한 쓰지 않는 것이 핵심이다. 왜냐면 컴파일 타임에 타입 체크가 정상적으로 이뤄지지 않기 때문이다. 그래서 컴파일 옵션 중에는 any를 쓰면 오류를 뱉도록 하는 옵션도 있다.
  • noImplicitAny

function returnAny(message): any {
	console.log(message);
}

returnAny('리턴은 아무거나');

 

Never

• 리턴에 주로 사용된다. (별로 안쓰임)
• 아래 3가지 정도의 경우가 대부분이다.

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

function fail() {
	return error("Something failed");
}

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

 

Array

• 원래 자바스크립트에서 array는 객체다.
• 사용방법
  • Array<타입>
  • 타입[]

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

 

Tuple

• 배열인데 타입이 한가지가 아닌 경우
• 객체다.
• 꺼내 사용할 때 주의가 필요하다.

// tuple 정의
let x: [string, number];

// Initialize
x = ["hello", 10];	// OK
x = [10, "hello"];	// Error

x[3] = "world";	// OK. 'string' can be assigned to 'string | number'

console.log(x[5].toString());	// OK. 'string' and 'number' both have 'toString'

x[6] = true;	// Error. 'boolean' != 'string | number'

 

Enum

• C와 같다.
• 아래 예제만 이해하면 사용준비 끝

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

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

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

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

 

Symbol

• ES6의 Symbol
• Primitive Type의 값을 담아서 사용
• 고유하고 수정 불가능한 값으로 만들어준다.
• 그래서 주로 접근을 제어하는데 쓰는 경우가 많다.

let sym = Symbol();

let obj = {
    [sym]: "value"
};

console.log(obj[sym]);	// value