[Typescript] Basic Types

[Basic Types]

1. Boolean

true/false 값을 가지고있다.

let isDone: boolean = false;

/* test.ts 파일에 위와같이 입력 후 tsc를 사용해 컴파일하면 아래와같은 test.js가 만들어진다. */

var test = false;

/* typescript에서 선언한 boolean 타입이 사라지고 var로만 표시되는 것을 확인할 수 있다. */

2. Number

float형을 사용하며 2진수, 8진수, 10진수, 16진수 또한 지원한다.

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

/* test.ts 파일에 위와같이 입력 후 tsc를 사용해 컴파일하면 아래와같은 test.js가 만들어진다. */

var decimal = 6;

var hex = 0xf00d;

var binary = 10;

var octal = 484;

/* typescript에서 선언한 number 타입이 사라지고 var로만 표시되는 것을 확인할 수 있다. */

3. String

JavaScript처럼 TypeScript 또한 큰따옴표(") 또는 작은따옴표(')룰 문자열 양끝에 사용한다.

let color: string = "blue";
color = 'red';

/* test.ts 파일에 위와같이 입력 후 tsc를 사용해 컴파일하면 아래와같은 test.js가 만들어진다. */

var color = "blue";

color = "red";

/* typescript에서 선언한 string 타입이 사라지고 var로만 표시되는 것을 확인할 수 있다. */

또한 문자열 주변을 backquote(`)로 감싼 후 입력 받은 변수를 ${exptr} 다음과 같이 표현하여 여럿 라인을  이을수있다.

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.`

/* test.ts 파일에 위와같이 입력 후 tsc를 사용해 컴파일하면 아래와같은 test.js가 만들어진다. */

var fullName = "Bob Bobbington"; 

var age = 37; 

var sentence = "Hello, my name is " + fullName + ".\n\nI'll be " + (age + 1) + " years old next month.";

/* backqutoe(`)가 큰따옴표(")로 변경되며 이어지는 문자들이 +로 변경된다. */

4. Array

JavaScript와 마찬가지로 TypeScript에서도 Array 사용이 가능하다.

Array type은 두가지 방법으로 사용 가능한다.

첫번째는 literal array을 이용한 방식이다.

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

두번째는 generic array를 이용한 방식이다.

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

두 방식 모두 tsc를 이용해 컴파일하면 다음과 같은 test.js가 만들어진다.

var list = [1, 2, 3];

5. Tuple

Tuple Type은 요소로 가질 수 있는 Type이 여러가지로 정의될수있다라는 것을 제외하면 Array와 비슷하다.

// Declare a tuple type
let x: [string, number];

첫번째 요소엔 String type, 두번째 요소엔 number type을 가진 Array x를 정의한 것이다.

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error
// Initialize it correctly
x = [10, "hello", 10];  // OK'number' can be assigned to 'string | number'
// Initialize it incorrectly
x = [10, "hello", flase]; // Error'boolean' isn't 'string | number'

첫번째 요소, 두번째 요소에 처음 정의된 type과 다른 type을 입력 시 Error를 리턴한다.

그러면?! 정의되지않은 세번째 요소에 값을 넣으면?

결과는 첫번째, 두번째 요소에 사용된 type이면 문제없지만 사용되지않은 새로운 type이면 문제가 발생한다.

6. Enum

C#과같이 enum은 numeric value를 지정해줄수있는 친근한 방법이다.

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

/* test.ts 파일에 위와같이 입력 후 tsc를 사용해 컴파일하면 아래와같은 test.js가 만들어진다. */
var Color; (function (Color) { Color[Color["Red"] = 0] = "Red"; Color[Color["Green"] = 1] = "Green"; Color[Color["Blue"] = 2] = "Blue"; })(Color || (Color = {})); ; var c = Color.Green; /* javascript로 변환되니 지금까지와는 다르게 코드가 생성되었다. 

이는 javascript에서는 사용하지않는 enum을 enum과 같이 동작하게끔 만들어서이다. */

7. Any

JavaScript와 같이 하나의 변수에 어떠한 타입을 입력해도 오류가 나지않는다.

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

/* any type사용 시 number, string, boolean type 모두 ok! */

8. Void

이 리턴하는 값이 없는 함수일 경우 리턴값으로 void type을 명시할수있다.

function warnUser(): void {
    alert("This is my warning message");    return null;
}

NULL & Undefined type과 마찬가지로 null과 undefined밖에 할당할수밖에 없어 유용하게 사용되지는 않는다.

9. Null and Undefined

// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

10. union 

'|'를 사용하여 type을 조합할수 있다.

let a: string | number = "aaaa"; /* 해당변수는 string type과 number type 둘 다 사용한다. */
a = 4; /* number 사용 OK */a = true; /* boolean 사용 ERROR */

11. never

함수를 활용하는 경우 예외가 아니고는 리턴을 하지않음을 보장해야할 경우가 있다. 

예를 들면, 항상 에러를 호출하는 함수이거나 무한루프가 포함된 함수이다.

// Function returning never must have unreachable end point
function error(message: string): never {
    throw new Error(message);
}

// Inferred return type is never
function fail() {
    return error("Something failed");
}

// Function returning never must have unreachable end point
function infiniteLoop(): never {
    while (true) {
    }
}

12. Type assertions

형변환 타입으로 다음과 같은 방법으로 가능하다.

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

또는 as - 구문으로 가능하다.

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