/ TYPESCRIPT

TypeScript 강좌(2) - Data Type(Part 1)

TypeScript 강좌는 여러 절로 구성되어 있습니다.


TypeScript Data Type

  • boolean
  • number
  • string
  • Array
  • Tuple
  • enum

프로그래밍 언어를 배울 때 가장 먼저 학습하는 부분이 바로 Data Type입니다. 이전에도 언급했듯이 TypeScript는 JavaScript의 superset이기 때문에 JavaScript의 data type을 그대로 이용합니다. 거기에 추가적인 데이터 타입이 더 존재합니다.

그럼 하나하나 예를 들면서 보도록 하죠.


boolean

우리가 알고있는 boolean type입니다. truefalse keyword를 사용할 수 있습니다.

TypeScript에서는 변수선언시 var을 사용하지 않습니다. var는 전통적으로 javascript의 변수를 선언하기 위한 keyword로 사용되고 있지만 몇가지 우리를 힘들게 하는 특징이 있습니다. 이부분은 나중에 다시 포스팅하기로 하겠습니다.

여하간 TypeScript에서는 var대신 constlet을 이용합니다. 다음과 같이 boolean type의 변수를 선언할 수 있습니다.

let myVar: boolean = false;

WebStorm에서는 다음그림처럼 확인하시면 편합니다. 왼쪽창에는 .ts파일, 오른쪽 창에는 변환된 .js파일을 열어서 .ts가 어떻게 .js로 변환되는지를 확인해보세요.

코드비교

JavaScript에는 생성자 함수라는게 있습니다.
원래 JavaScript는 객체지향언어가 아닙니다. Prototype기반의 함수형 언어입니다. 그래서 JavaScript 초기버전에는 class가 도입되지 않았습니다. class는 ECMAScript 2015(ES6)에 도입되었습니다. class가 도입되기 이전에는 함수를 이용해서 객체를 생성하는 생성자 함수라는걸 사용했습니다. 지금도 역시 사용하고 있구요. 우리가 알고있는 new Date(); 이런게 다 생성자 함수를 이용한 객체의 생성입니다.

그 중 특수한 생성자 함수들이 있습니다. 바로 primitive type에 대한 생성자 함수들 입니다. 이런것들을 우리는 흔히 Wrapper라고 부릅니다. JavaScript에도 Wrapper Object가 존재합니다. Boolean과 같은 생성자 함수를 이용해서 object를 만들면 우리는 그걸 primitive wrapper object라고 하는거지요.

let myVar: boolean = false;
let myBooleanVar: Boolean = new Boolean(true);   

이제 아래의 코드를 살펴보죠.

let myVar: boolean = false;
let myBooleanVar: Boolean = new Boolean(true);

console.log(myVar.valueOf());
console.log(myBooleanVar.valueOf());

위와 같은 코드는 좀 이상합니다. myVar는 primitive type임에도 불구하고 method를 호출했습니다. 그럼에도 이상없이 실행이 잘 됩니다. 그 이유는 자동형변환이 일어나기 때문입니다. autoboxing이라고 하죠.

let myVar: boolean = new Boolean(true);    // 코드 에러

console.log(myVar.valueOf());

위의 코드는 에러입니다. boolean type의 변수에 Boolean wrapper object를 assign할 수 없다는 오류가 발생합니다.

혼용해서 사용하는건 좋지 않습니다. JavaScript할 때야 그냥 막(?) 했지만 TypeScript는 data type을 정확히 명시하는 습관을 들이셔야 합니다.

결론적으로 booelan / Boolean 이 존재하는군요. 하나는 primitive data type이고 다른 하나는 primitive wrapper object를 만들기 위한 생성자 함수입니다. data type 용도로 사용할 경우는 boolean을 이용하셔야 합니다.(나머지 data type에 대해서도 동일합니다. - 권장사항)


number

TypeScript는 정수와 실수를 구분하지 않습니다. 모두 다 실수( floating point values )입니다. data type으로는 number를 사용합니다. 대응되는 wrapper 생성자 함수는 Number가 되겠네요. 기본적인 10진수, 16진수에 더해 ECMAScript 2015에서 2진수, 8진수의 사용도 추가되었습니다.

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

console.log(octal.valueOf());

string

문자열을 지칭합니다. 기본적으로 double quotes (") 와 single quotes (') 둘 다 이용할 수 있습니다. 일반적으로는 single quotes (')를 이용합니다. 대응되는 wrapper 생성자 함수는 String 입니다.

한가지 더 기억해야 할 것이 있는데 template string이라는 걸 사용할 수 있습니다. backquote ( ` ) 를 이용하여 여러줄에 걸쳐 문자열을 입력할 수 있고 ${ expr } 형태로 embedded expression을 사용할 수 있습니다.

let myStr: string = "Hello";
let myNumber: number = 100;

let myTemplateString = `this is
a
sample
Text => ${ myNumber + 100 }
myStr : ${ myStr }
`;

console.log(myTemplateString);

실행결과는 다음과 같습니다.

this is
a
sample
Text => 200
myStr : Hello

Array

TypeScript는 JavaScript와 마찬가지로 Array를 지원합니다. 배열은 primitive data type이 아닌 객체입니다. 배열은 두가지 방식으로 사용할 수 있습니다. 일반적인 방식은 다음과 같습니다.

let myArr: string[] = ["Hello", "Hi", "안녕하세요"];

console.log(myArr);

또 다른 방식은 Array Interfacegeneric을 이용하는 방법입니다. 자세한 설명은 다른 포스트에서 진행합니다. 여기서는 어떻게 배열을 선언하고 사용하는지만 보시면 됩니다.

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

console.log(myNumArr);

Tuple

Tuple은 배열입니다. 특수한 형태의 배열로 인식하시면 됩니다. 배열의 각 원소에 대해 각기 다른 data type을 허용합니다. 다음과 같은 코드를 가지고 이해해보죠

let myTuple: [string, number];

myTuple = ["Hello", 100]; // 가능

myTuple = ["Hello", "World"]; // 에러

위의 코드의 제일 마지막 문장인

myTuple = ["Hello", "World"];

코드는 Tuple의 type선언에 맞지 않기때문에 Error가 발생합니다.

다음의 코드를 살펴보죠

let myTuple: [string, number];

myTuple = ["Hello", 100]; // 가능

console.log(myTuple[0]);  // "Hello" 출력
console.log(myTuple[1]);  // 100 출력
console.log(myTuple[2]);  // undefined 출력

위에서 언급했듯이 배열로 사용합니다. 2칸짜리 배열을 만들고 첫번째 칸에는 string, 두번째 칸에는 number를 data type으로 가지는 배열입니다.

JavaScript의 배열은 크기를 동적으로 늘릴 수 있습니다. 3번째 칸( myTuple[2] )에 데이터를 입력해 보겠습니다.

let myTuple: [string, number];

myTuple = ["Hello", 100]; // 가능

myTuple[2] = "World"; // 가능
myTuple[2] = 200;     // 가능
myTuple[2] = true;    // 불가능( 코드 에러 )

3번째 칸에 string과 number는 assign이 되는것을 확인할 수 있습니다. 하지만 boolean은 들어가지 않는군요.

정리하자면 현재 사용할 수 있는 index를 넘어가는 곳에 데이터를 입력할 때는 Tuple선언에서 사용한 data type의 union type을 이용합니다. 쉽게 말하면 string 혹은 number가 되어야 한다는 말입니다.


enum

enum을 이용할 수 있습니다. C#의 enum과 동일합니다. 숫자 대신 친숙한 이름으로 설정하기 위해서 이용합니다. 다음의 코드를 이용해서 살펴보죠

enum Color { Red, Green, Blue }

let myColor: Color = Color.Red;

console.log(myColor);   // 0 출력

별다른 설명이 필요없습니다. 이번에는 다음의 코드를 보죠

enum Color { Red = 1, Green, Blue = 4 }

let myColor: Color = Color.Green;
console.log(myColor);   // 2 출력

myColor = Color.Blue;
console.log(myColor);   // 4 출력

Color.Red의 값을 1로 설정하면 그 다음 원소들은 당연히 1부터 1씩 증가합니다. Color.Blue는 4로 명시적으로 지정했네요.

아래의 예제는 좀 특이합니다. string 변수에 enum을 대입한 후 결과를 출력합니다.

enum Color { Red = 1, Green, Blue }

let myColorStr: string = Color.Green;  // 코드 에러( 문자열에 숫자대입 안됨 )

let myColor: string = Color[3];        // 가능( 배열로 처리 - index에 주의 )
console.log(myColor);                  // "Blue" 출력

위의 코드에서

let myColorStr: string = Color.Green;

코드는 에러가 발생합니다. 문자열 type에 숫자를 넣으려 했기 때문이죠. 또한 enum은 배열형태로 사용이 가능한 데 이런 경우 해당 문자열을 바로 이용할 수 있습니다.

여기까지는 아마 우리가 알고있던 JavaScript와 거의 동일하니 이해하는데 어려움은 없을 듯 보입니다. 나머지 data type은 다음 포스트에서 이어가도록 하죠.

End.


이 포스트의 내용은 아래의 사이트를 참조했습니다. 조금 더 자세한 사항을 알고 싶으시면 해당 사이트를 방문하세요!!