Typescript 기초(1) – Basic Types

Typescript Handbook / Developer’s Record 를 참고했습니다.

String, Number, Boolean

let myName: string = "윤병인"
let age: number = 25
let hasGirlFriend: boolean = false

Array

let list1: number[] = [1, 2, 3]
let list2: Array<number> = [1, 2, 3]
let list3: Array<string> = ["A", "B", "C"]

for…in

var arr = ["A", "B", "C"]
for(var key in arr) {
    console.log(arr[key]) // A, B, C 출력
}

for…of

var arr = ["A", "B", "C"]
for(var val of arr) {
    console.log(val) // A, B, C 출력
}

Tuple

let x: [string, number]
x = ["Hello", 100]
// ERROR
x = ["Hello", 100, 500] // Type '[string, number, number]' is not assignable to type '[string, number]'.

Enum

enum은 특수한 숫자 문제에 대한 해결책을 제공합니다. 특정 숫자와 사람이 읽기 쉬운 이름을 연결할때 유용합니다.

enum Color {
  Red,
  Green,
  Blue
}
let c: Color = Color.Green; // Color["Green"] 도 가능하다.
console.log(c); // 1

Red를 3으로 하면 Green, Blue는 자동으로 4, 5가 됩니다.

enum Color {
  Red = 3,
  Green,
  Blue
}
let c: Color = Color.Green;
console.log(c); // 4

하나하나 값을 설정할 수 도 있습니다.

enum Color {
  Red = 3,
  Green = 100,
  Blue = 200
}
let c: Color = Color.Green;
console.log(c); // 100

반대로 Red, Green, Blue를 얻을수도 있습니다.

enum Color {
  Red = 3,
  Green = 100,
  Blue = 200
}
let colorName: string = Color[100];
console.log(colorName); // Green

열거형을 상수로 만드는것도 가능합니다.

const enum Color {
  Red,
  Green,
  Blue
}
console.log(Color.Red)
console.log(Color["Red"])

하지만, console.log(Color[0]) 이렇게 index로 접근하는건 안됩니다. 보통의 enum은 컴파일러가 클로저로 변환해서 index로도, key로도 접근이 가능했지만, 이게 성능상 별로 좋지 않아서 const enum이 나오게 된건데, const enum은 컴파일하면서 모두 그냥 숫자로 바꿔버립니다. 그래서 위 코드를 컴파일하면 아래와 같이 나옵니다.

"use strict";
console.log(0 /* Red */);
console.log(0 /* "Red" */);

Any

let notSure: any = 4
notSure = "뭐 어때"
notSure = true
notSure = [1, '2', false, new Object()]
notSure.testFunction();

Void, Null, Undefined

Void

리턴 값이 없을때 Void를 사용합니다.

function doNothing1() { }
function doNothing2(): void { }
function doNothing3(): void {
  return undefined;
}

null을 넣을 수는 없습니다.

function doNothing4(): void {
  return null; // ERROR : Type 'null' is not assignable to type 'void'.
}

Null

let a: null = null
a = undefined // ERROR : Type 'undefined' is not assignable to type 'null'.
function sayHi(message: string | null) {
  console.log(message);
}
sayHi() // ERROR : An argument for 'message' was not provided.

Undefined

let iDontKnow: undefined = undefined;
// optional property는 기본적으로 undefined이다
function sayHi(message?: string) {
  console.log(message);
}
sayHi(); // 인자값이 없어도 호출은 된다

기본적으로는 null과 undefined 모두 number에도 넣을 수 있고, string에도 넣을 수 있는 subtype입니다. 그러나 --strictNullChecks flag를 사용할때 null과 undefined는 any 타입에만 넣을 수 있습니다. 그래서 어떤 함수가 뭘 리턴할지 모를때 union을 써서 리턴타입을 이렇게 string | null | undefined 해주는게 좋습니다.

Never

function error(message: string): never {
  throw new Error(message);
  console.log("END !!")
}
function infiniteLoop(): never {
  while(true) {
    console.log("도르마무 거래를 하러왔다!");
  }
  // 여기는 절대(never) 읽히지 않는다.
}

어떤 함수가 error를 던져서 함수가 끝까지 실행될일이 없거나, 코드안에 무한루프가 있어서 끝까지 실행될 일이 없을때 그 리턴값을 never로 지정합니다.

Object

let obj: Object = {
  apple: "사과",
  banana: "바나나",
  year: 2019
}

Type Assertions

let someValue: any = "This is string"
let strLength: number = (<string>someValue).length;
strLength = (someValue as string).length
let item1 = <any>{id: 1, name: "yoon"}
item1 = {id : 2} // name property가 없지만 문제 없음

다만, java와 같은 다른 언어의 형변환과는 다릅니다. 메모리가 다르게 잡힌다던지 하는게 아니라, 그냥 컴파일 할때만 “~~형으로 바꿔쓰겠다” 라고 표시만 해주는겁니다.

function addNumber(a: number, b: number) : number {
  return a + b
}
let result = addNumber(10, 20)
console.log(`result is ${result}`) // result is 30

let addNumber = function(a: number, b: number) : number {
  return a + b
}
let result = addNumber(10, 20)
console.log(`result is ${result}`)