3. typescript - 타입

js와는 다르게 typescript에는 각 변수 및 파라미터, 함수에 타입이 활용된다. 그럼 이번 포스터를 통해 타입을 간단하게 정리해보겠습니다. 

 

Boolean

let isDone: boolean = false;
isDone = true;

 

Number

number타입은 소수든 정수든 상관없이 사용할 수 있습니다. 그리고 10진수 뿐만아니라 2진수, 8진수, 16진수 등을 사용할 수 있습니다. 

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

 

String 

string은 기존의 웹사이트를 개발할 때 필수적으로 필요합니다. js와 같이 ", '을 사용할 수 있으며 `도 사용할 수 있습니다. 

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

// js와 같이 `와 ${}를 사용하여 변수를 집어 넣을 수 있습니다.
let age: number = 24;
let fullName: string = "hoony";
let introduce: string = `my name is ${fullName} my age is ${age}`

 

Array 

당연하지만 js와 같이 array를 사용할 수 있다. 선언 방법은 두가지가 있다. []와 generic을 사용한 방법이 있습니다. 

type[] 또는 Array<type> 등으로 선언할 수 있다.

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

 

Tuple

고정된 수 만큼의 데이터를 표현할 수 있습니다. 어떤 타입이든 상관 없습니다. 

let x: [string, number];
x = ["hello", 10];

x = [10, "hello"]; // Error Type 'number' is not assignable to type 'string'.

딱 타입을 맞추어서 데이터를 넣어주어야 합니다.

 

또는 문자열을 인덱싱 해줄 때 숫자를 인덱싱 해주면 아래와 같은 에러가 생깁니다. 

console.log(x[0].substring(0));
console.log(x[1].substring(0)); // Error Property 'substring' does not exist on type 'number'.

 

현재 크기 2개를 지정하여 사용할 수있는데 숫자를 넘어서서 참조 혹은 대입을 하게되면 에러가 발생합니다. 

x[2] = "world"; //Type '"world"' is not assignable to type 'undefined'.
console.log(x[5].toString()); // index.ts:28:15 - error TS2493: Tuple type '[string, number]' of length '2' has no element at index '5'.

 

Enum

js에 없는 Enum 타입을 사용할 수 있습니다. 사용법은 C에서 사용하는 방법과 비슷합니다. 

enum Color {
  Red,
  Green,
  Blue
}

let c: Color = Color.Green;

기본적으로 enum은 0부터 시작합니다. 하지만 우리는 설정을 통해서 0부터 시작하는 것을 1부터 시작하게 바꿀 수 있습니다. 

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 = 2,
  Blue = 4
}
let colorName: string = Color[1];

 

Any

하지만 동적인 데이터의 경우 모든 타입의 데이터를 받아서 사용할 수 있을 수도 있습니다. 그래서 Any라는 타입을 사용하여 모든 타입의 데이터를 다룰 수 있습니다. 

let notSure: any = 44;
notSure = "sure";
notSure = false;

 

이러한 역할을 보면 다른언어의 Object와 비슷하다고 생각할 수 있습니다. 하지만 typescript에서 Object의 경우 함수를 불러 올 수 없습니다. 

let notSure: any = 44;
notSure = "sure";
notSure = false;

let prettySure: Object = 4;
prettySure.toFixed(); // Error Property 'toFixed' does not exist on type 'Object'.

 

그리고 any 배열을 사용하여 다양한 타입의 값을 넣을 수 있습니다. 

let anyValue: any[] = [1, "sure", false];
anyValue[1] = false;

 

Void

void는 any의 반대편이다. 모든 타입이 존재하지 않는다. 함수의 반환 타입에 주로 사용하는데 이러한 함수는 아무 값도 반환하지 않는다. 

function warnUser(): void{
	console.log("This is my warning message");
}

만약 변수의 타입이 void라면 무조건 null 또는 undefined만을 할당할 수 있어서 유용하게 사용할 수 없을 것입니다.

(null의 경우 --strictNullChecks 해당 구문이 제공되지 않으면 사용할 수 있습니다.)

let unusable: void = undefined;
unusable = null; // OK if `--strictNullChecks` is not given

 

Null and Undefined

typescript에서는 undefined와 Null을 두개의 타입으로 제공하고 있습니다. 이 두타입은 극도로 많이 사용하지는 않습니다. 

let u: undefined = undefined;
let n: null = null;

 

null과 undefined는 모든 타입의 subtype입니다. 따라서 null과 undefined를 제외한 다른 모든 타입의 변수에 할당해줄 수 있습니다. 

 

하지만 --strictNullChecks를 사용해준다면 오로지 any에만 할당해줄 수 있습니다. (예외로 undfined는 void에 할당해줄 수 있습니다.)

또한 타입을 사용할 때 string, null, undefined 타입의 값을 통과시키고 싶다면 아래와 같이 표현할 수 있습니다. 

string | null | undefined

 

Never

never는 일반 함수나 애로우 함수는 항상 예외를 던지거나 절대 반환하지 않는 반환식입니다. 

그리고 모든 타입의 서브 타입입니다. 그러나 어떤 타입도 never의 서브 타입이 될 수 없습니다. any또한 안됩니다.

//Never
//never를 리턴할때 반드시 도달하지 않는 end point를 갖고 있어야합니다.
function error(message: string): never {
  throw new Error(message);
}

// never type으로 추론됩니다.
function fail() {
  return error("something failed");
}

// never를 리턴할 때 end point가 도달하지 않는 포인트를 가져야한다.
function infiniteLoop(): never {
  while (true) {}
}

 

Object

object타입은 number, string, boolean, bigint, symbol, null, or undefined 등을 제외하여 사용할 수 있습니다. 즉 non-primitive 타입입니다.

let unusable: object = {hoony: true};