[TypeScript] 타입스크립트의 기본 타입들

저번 글에서는 요즘 자바스크립트보다는 타입스크립트를 왜 선호하는지에 대해서, JS와 TS의 차이에 대해서 알아보았다.

https://guun-oni.tistory.com/142

[TypeScript] 요즘 다들 타입스크립트를 사용하는 이유

 

 

이번엔 타입스크립트의 기본 타입에 대해서 알아보자!

 

 

1. 기본 타입 :: 숫자, 문자열, 논리, 배열

 

기본 타입들을 자바스크립트에서는 이렇게 선언했었다. 

let name = ' yewon'; 
let age = 30;
let isAdult = true;

let hobby = ['러닝', '독서'];

 

자바스크립트는 동적 타입 언어이기 때문에, 변수의 타입이 고정되지 않고 런타임에 값에 따라 바뀐다. 

때문에 아래 코드 처럼 문자열 타입을 넣었던 변수에 숫자를 넣어도 잘 동작했다.

let name = 'yewon'; 
name = 30; // 정상적으로 동작 (오류 없음!!)

 

 

 

타입스크립트는 변수를 선언할 때 타입주석(:타입명)을 적어 컴파일 시 변수의 타입이 고정된다.

let name:string = ' yewon'; 
let age:number = 30;
let isAdult:boolean = true;

let hobby:string[] = ['러닝', '독서'];  //let hobby:Array<number> = ['러닝', '독서'];

 

꼭 타입주석을 써주지 않아도 TypeScript는 타입 추론(type inference) 기능이 있어서, 변수의 초기값을 기준으로 타입을 자동으로 추론한다.

 

 

타입스크립트는 정적 타입 언어로, 자바스크립트와 다르게 변수의 타입이 고정되므로 타입이 맞지 않으면 컴파일 에러 발생한다. 

let name: string = 'yewon'; 
name = 30; // Error: Type 'number' is not assignable to type 'string'.

 

 

 

 

2. 튜플 

 

튜플은 배열과 비슷하지만 요소의 개수와 타입을 고정시킨다. 

//튜플 정의
let tuple: [number, string, boolean];

//값 할당
tuple = [42, "Hello", true];

b[0].toLowerCase(); // error! b[0]은 숫자타입이기때문
b[1].toLowerCase();

 

* b[0]는 숫자 타입이기 때문에 소문자로 바꾸는 함수를 사용할 때 오류가 발생한다.

 

 

 

3. 함수 

 

void : 함수의 반환 값이 없을 때 

function sayHello():void{
	console.log('hello');
}

 

never : 에러를 반환하거나, 영원히 끝나지 않을 때

function showError():never{
	throw new Error();
}

function Loop():never{
	while(true) {
    	//...
	}
}

 

 

 

4. enum

관련된 상수 값들을 하나의 그룹으로 묶어 관리하는 기능이다. 

enum Direction {
    Up,       // 0
    Down,     // 1
    Left,     // 2
    Right     // 3
}

이렇게 선언하면 기본적으로 0부터 차례대로 값이 지정된다. 

 

let move: Direction = Direction.Up; // Direction의 값만 할당 가능
console.log(move); // 0 (기본값은 숫자)

 

 

열거형 값을 문자열로 지정할 수 도 있다. 

enum Color {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE"
}
console.log(Color.Red);   // "RED"
console.log(Color.Green); // "GREEN"
console.log(Color.Blue);  // "BLUE"

 

 

🤔 왜 enum을 사용할까?

1. 단순한 코드 관리 :: 관련된 상수를 하나의 그룹으로 묶어 관리할 수 있다. 

 

2. 코드의 가독성 

enum HttpStatus {
    OK = 200,
    NotFound = 404,
    InternalServerError = 500
}
let status = HttpStatus.OK; // 의미가 명확

 

이렇게 에러 넘버에 대한 의미를 붙인 이름을 달아 의미를 빠르고 명확하게 파악할 수 있다. 

 

3. 오류 방지 : 제한된 값만 사용하도록 강제 

let move: Direction = Direction.Up; // Direction의 값만 할당 가능
console.log(move); // 0 (기본값은 숫자)

move라는 변수는 Direction 안의 값만 할당 가능하도록 제한하고 있다.