[Typescript] 타입스크립트 기본타입 / typescript enum / typescript any / typescript void / typescript unknown

타입스크립트 기본 타입

타입스크립트에는 다양한 기본타입들이 있다.
boolean, number, string, Array, object, tuple, enum, any, void, null, undefiend, never, unknown 에 대해서 알아보자.

 

불리언(Boolean)

true, false 값
관례로 앞에 is~ 를 붙인다. (ex: 모달 열려있니?)

const isOpenModal:boolean = true;

 

숫자(Number)

16진수, 10진수, 2진수 8진수 리터럴값을 지원하는 부동소수값.

const integer: number = 100
const hex:number = 0xefef; // 61423

 

문자열(String)

텍스트 데이터타입. 큰따옴표("), 작은따옴표 ('), 백틱(`)으로 문자열 데이터를 감싸 표현한다. 
백틱을 사용하면 문자열과 함께 다른 표현식을 포함시킬 수 있다.

const myName:string = 'rumi';
let yourName:string = "minji";
const herName:string = `suji`;

const greeting = `Hi, my name is ${myName}. Nice to meet you ${yourName}`

 

배열(Array)

배열은 두가지로 표현할 수 있다.

1. 타입 뒤에 []
2. 제네릭 배열타입

let numberList:number[] = [1,2,3]
let stringList:Array<string> = ['1','2','3']

 

튜플(Tuple)

배열처럼 여러개의 데이터를 열거해 담아두는 자료구조로, 수정과 삭제가 안되는 녀석이다.
튜플타입을 쓰면, 요소의 개수와 순서, 타입이 모두 일치해야만한다.

let test:[string, number, number, number, string] = ['1',2,3,4,'5']

test = ["1", 2, 3, 4, 5]; // 6은 number이므로 에러 발생
test = ["1", 2, 3, 4]; // 다섯번째 요소 없으므로 에러 발생

 

열거(Enum)

0부터 시작해 번호를 매긴다. 관례로 대문자로 시작한다.

enum Block {
  One = 4,
  Two = 2,
  Three = 3
}

console.log(`I have ${Block[1]} Blocks`); // 1이 없으므로 Block[1]에 undefiend 출력
console.log(`I have ${Block[3]} Blocks`); // I have Three Blocks

enum LevelSystem {
  GENERAL = "GENERAL",
  TRAVELER = "TRAVELER",
  GOSU = "GOSU",
  PRO = "PRO",
  ROTTEN_WATER = "ROTTEN_WATER",
}

 

오타를 줄이기 위해, 공통 enum을 만들어 쓰는 편이다.

 

애니(Any)

모든 타입을 허용하는 타입. 알지 못하는 타입을 표현할때 쓴다. 남용하면 애니스크립트가 되어버린다.
특히 서드파티 라이브러리를 사용할때 어떤 값이 사용되는지 타입을 예측할 수 없을때 사용하기도 한다.

let originArray:any = [1,'test',32,{id:3},true]

const newArray = originArray.map((item:any) => item)

 

Void

'없음'을 나타내는 타입. 함수에서 반환값이 없을때 반환 타입을 표현하기 위해서 종종 사용한다.
null 또는 undefiend만 할당할 수 있기때문에 변수에는 선언하지 않는다. (* --strictNullchecks를 사용하고있으면 할당안됨)

const findSize = (number: number): void => {
  console.log(number);
};

리턴값이 없으므로 함수의 반환타입에 void 타입을 선언.

 

null, undefiend

null과 undefiend는 다른 타입들의 하위타입이기 때문에, number 같은 타입에 할당할 수 있다.
그러나 strictNullchecks를 사용하면 any 타입인 경우에만 할당이 가능하다.
undefiend는 void에 할당 가능하다.

 

Never

'절대' 나올수 없는 타입을 의미하기 때문에, 항상 오류를 발생시키거나, 절대 반환하지않는 타입으로 쓴다. 종종 never 에러를 만나게 되는데, 타입을 잘못 선언한 경우에 발생한다. * any도 never에 할당할 수 없다.

function executeError() {
    return error("executeError"); // 반환 타입은 Error로 추론
}

const error = (message: string): never => {
  console.log(message);
};

never는 함수의 끝에 '절대' 도달할 수 없음을 의미한다.
위 코드의 경우 A function returning 'never' cannot have a reachable end point. 라는 에러가 발생하는데, 함수의 끝인 console.log에 도달했고, 아무것도 반환하지 않고 있으므로 never가 아니라 void 타입을 사용해야한다.

 

unknown

어떤 타입이 올지 모르기 때문에 any처럼 모든 값을 허용하지만, any 와 다른 점은 연산이나 프로퍼티 사용이 불가능하다는 점이다.

let test:any = 123
console.log(test.length); // undefiend

let test1:unknown = 123
console.log(test1.length); // error: 'test1' is of type 'unknown'.

 

객체(Object)

object는 원시타입(number, string, boolean...)이 아닌 타입을 말한다.
object의 타입을 object로 정의하면 any처럼 객체 내에 모든 타입의 값을 할당할 수 있다. 따라서 객체타입을 object로 정의하는것은 타입스크립트 사용의 목적이 모호해지므로 권장하지 않는다.

const test = (o: object): void => {
  console.log(o);
};

test({ id: 4, idstring: "test", bool: true, test: null }); // TS 쓰는 의미가 없음

 

타입 단언

"이 타입은 정확히 string이야" "이 타입은 무조건 number야" 라고 개발자가 직접 정의해주는것.
타입단언의 문법은 아래 두가지가 있고, JSX와 함께 쓸 때는 as 문법만 허용이 된다.

angle-bracket

let test:any = "Good Bye World!"
let testStringLength:number = (<string>test).length

as

let test:any = "Good Bye World!"
let testStringLength:number = (test as string).length