[Typescript] 타입스크립트의 타입 (원시타입, 리터럴타입, 배열, 튜플, 객체, 타입별칭, 인덱스 시그니쳐, 열거형타입, any, unkown, void, never)

기본 타입

타입스크립트가 자체적으로 제공하는 타입 (내장 타입)

타입스크립트의 각각의 타입들은 부모, 자식관계를 이루며 계층구조를 가진다.

 

---

 

원시타입 (Primitive Type)

하나의 값만 저장하는 타입

: number, string, boolean, null, undefined

 

// number

let num1:number = 123;  // 타입 주석(annotation)

let num2:number = -123;

let num3:number = 0.123;

let num4:number = -0.123;

let num5:number = Infinity;

let num6:number = -Infinity;

let num7:number = NaN;

// string

let str2:string = "hello";

let str1:string = 'hello';

let str3:string = `hello`;

let str4:string = `${str1} world`;

// boolean

let bool1:boolean = true;

let bool2:boolean = false;

// null

let null1:null = null;

// undefined

let undefined1:undefined = undefined;

 

 

임시로 null값 넣기

만약 여기서 num1에 들어갈 값이 아직 로드되지 않았을 경우, null을 임시로 넣고 싶을 때가 있다.

하지만 타입스크립트에서는 num1에 null이 들어갈 경우 당연히 에러가 나게 된다.

이럴 경우 tsconfig.json의 "compilerOptinos"에 아래와 같은 설정을 해주면 된다.

 

"strictNullChecks": false,

 

이 설정은 null을 엄격하게 체크하지 않도록 하는 옵션이고, 설정하지 않을 시 기본적으로 strict의 설정값을 따른다.

 

 

---

 

리터럴타입

값 자체가 타입이 되는 것을 의미

아래와 같이 변수의 타입을 원시타입 중 하나로 설정할 수 있다.

10이라는 값이 타입이 되었으므로, 10외의 다른 값을 넣으면 에러가 발생한다.

 

let numA:10 = 10;

 

아래와 같이 string, boolean 등의 값도 사용할 수 있다. 

 

// 리터럴 타입

let numA:10 = 10;

let strA:"hello" = "hello";

let boolA:true = true;

 

---

 

배열

 

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

let strArr:string[] = ["a", "b", "c"];

let boolArr:Array<boolean> = [true, false, true]; // 제네릭 타입

// 요소들의 타입이 여러개일 경우

let multiArr:(number | string)[] = [1, "hi"];

// 다차원 배열의 타입을 정의하는 방법

let doubleArr:number[][] = [

  [1,2,3],

  [4,5]

]

 

 

 

---

 

튜플

길이와 타입이 고정된 배열

개수와 타입이 모두 같아야 한다.

js에는 없고, ts에만 존재한다. js로 변환할 경우 일반 배열로 변환된다. 

 

let tup1:[number, number] = [1,2]

// tup1 = [1,2,3]; // 개수 다를 경우 에러

// tup1 = ['a','b']; // 타입이 다를 경우 에러

 

아래와 같이 배열 매소드를 사용할 수 있는데, 이럴 경우 튜플 타입이 꺠질 수도 있으니 주의해서 사용해야 한다.

 

tup1.push(1);

tup1.pop();

 

 

 

---

 

객체

객체타입을 그냥 아래와 같이 object로 정의할 경우 객체인건 알지만, 각각의 프로퍼티나 매소드에 접근할 경우 타입을 알 수 없다.

 

let user:object = {

  id:1,

  name:"소현진"

}

 

user.id; // 에러

 

따라서 아래와 같이 객체 리터럴 타입을 사용해서 각 프로퍼티와 매소드의 타입까지 정의할 수 있다.

 

// object - 객체 리터럴 타입

let user:{

  id:number,

  name:string

} = {

  id:1,

  name:"소현진"

}

 

user.id;

이를 구조적 타입 시스템, 혹은 property based 타입 시스템 이라고 한다.

반대로 c++과 같이 그냥 object를 사용하는 대부분의 언어들을 명목적 타입 시스템이라고 한다.

 

만약 여기에서 id 값을 모를 경우 입력하지 않고 싶다면 어떻게 할까?

아래와 같이 id 뒤에 물음표(?)를 붙이면 된다. 이렇게 하면 id 값이 있어도, 없어도 된다는 뜻으로 이를 선택적(optional) property라고 한다. 

 

let user:{

  id?:number,

  name:string

} = {

  id:1,

  name:"소현진"

}

 

만약 아래와 같이 중요한 key가 프로퍼티로 들어있을 경우에는 값을 바꾸지 못하게 해야한다.

이를 때 앞에 readonly를 붙여서 읽기 전용으로 만들 수 있다.

 

let config:{

  readonly apiKey:string

}={

  apiKey:"123"

}

config.apiKey = "456"; // readonly이므로 에러

 

 

 

---

 

타입 별칭

아래와 같이 타입이 중복으로 사용되어야 할 경우 중복된 코드가 길어질 수 있으므로, 타입별칭을 사용할 수 있다.

 

// 타입 별칭

type User = {

  id:number;

  name:string;

  nickname:string;

  birth:string;

  bio:string;

  location:string;

}

let user1: User={

  id:1,

  name:"소현진",

  nickname:"현진",

  birth:"1995-01-01",

  bio:"안녕하세요",

  location:"인천"

}

let user2: User={

  id:1,

  name:"소현진2",

  nickname:"현진",

  birth:"1995-01-01",

  bio:"안녕하세요",

  location:"인천"

}

 

같은 *scope 내에서는 타입 별칭이 중복되면 안되므로 조심하자!

또다른 함수 내에서 사용하는 것은 가능하다.

*scope : 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위

 

---

인덱스 시그니처

키와 값의 규칙을 기준으로 객체의 타입을 정의할 수 있는 문법

만약 같이 키와 값이 항상 string으로 반복될떄, 프로퍼티의 개수가 많아지면 그에 해당하는 타입규칙도 늘어나므로 효율적이지 않게된다.

 

type CountryCodes = {

  korea:string;

  usa:string;

  china:string;

}

 

let countryCodes:CountryCodes = {

  "kr":"대한민국",

  "en":"미국",

  "jp":"일본"

}

 

이럴 떄는 다음과 같이 규칙을 이용해서 타입을 정의한다.

 

type CountryCodes = {

  [key:string]:string;

}

let countryCodes:CountryCodes = {

  korea:"ko",

  usa:"en",

  china:"cn"

}

 

 

---

 

열거형 타입 (Enumerable Type)

여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입 

아래와 같이 숫자에 어떤 값들의 의미를 부여해두고 사용할 때, 숫자가 의미하는 바가 헷갈릴 수 있다.

const user1 = {

  name:"소현진",

  role: 0 // 0 <- 관리자

}

const user2 = {

  name:"홍길동",

  role: 1 // 1 <- 일반 사용자

}

const user3 = {

  name:"김철수",

  role: 2 // 2 <- 게스트

}

 

이럴 때, 다음과 같이 enum을 사용해서 각각이 의미하는 바를 명시적으로 나타낼 수 있다.

 

enum Role{

  ADMIN = 0,

  USER = 1,

  GUEST = 2

}

const user1 = {

  name:"소현진",

  role: Role.ADMIN // 0 <- 관리자

}

const user2 = {

  name:"홍길동",

  role: Role.USER // 1 <- 일반 사용자

}

const user3 = {

  name:"김철수",

  role: Role.GUEST // 2 <- 게스트

}

 

참고로 enum은 컴파일 했을 떄, js에서 코드가 사라지지 않고 객체로 변환되기 때문에 Role.ADMIN과 같이 코드에서 값을 사용하듯 사용할 수 있다. 

 

 

---

 

Any

모든 타입을 넣을 수 있는 타입

특정 변수의 타입을 모를 때 사용한다. 아래와 같이 모든 타입을 넣거나 모든 타입에 해당하는 함수들을 적용해도 에러가 나지 않는다.

let anyVar:any = 10;

anyVar = "hello";

anyVar = true;

anyVar = {};

anyVar = () => {};

anyVar.toUpperCase();

anyVar.toFixed();

let num:number = anyVar;

num = anyVar;

 

하지만 any를 사용할 때는 타입검사를 하나도 해주지 않는 것과 같으므로 주의해야 한다.

위의 코드는 당장은 에러가 나지 않지만 실행할 경우 에러가 발생한다.

 

---

 

Unkown

unkown은 any와 아주 유사하지만 약간의 차이가 있다.

any와 같이 모든 타입의 값들을 넣을 수 있지만, 타입이 지정되어 있지 않기 때문에 어떤 타입의 변수에 넣을 수 없다. 

또한 toUpperCase와 같은 매서드도 사용할 수 없고, 덧셈과 같은 연산도 사용할 수 없다.

만약 필요시에는 아래와 같이 조건문을 통해 타입을 가정하고 사용해야 한다.

(이를 타입 정제라고 한다)

if(typeof unknownVar === "number"){

  num = unknownVar;

}

 

 

따라서 만약 변수에 들어갈 값을 모르는 상황이라면 any 보다는 좀 더 안전한 unkown을 사용하는 것이 좋다.

unkown은 아무 연산이나 변수, 매서드에 값을 넣을 수 없기 때문에 런타임 에러를 일으킬 확률이 적기 때문이다.

 

 

---

 

Void

void란 '공허'라는 뜻으로 아무것도 없음을 의미

함수에서는 아무런 반환값이 없을 때 사용한다.

function func1():string{

  return "hello";

}

function func2():void{

  console.log("hello");

}

변수에 void를 사용했을 경우 어떠한 값도 들어갈 수 없고, undefined만 들어갈 수 있다.

(strictNullCecks 옵션을 끌 경우에만 null도 들어갈 수 있다.)

 

---

 

Never

존재하지 않는 이라는 뜻으로 불가능한 타입을 의미 

정상적으로 종료될 수 없어서 함수에 반환값이 있는 것 자체가 모순인 경우에 사용한다. 

 

function func3():never{

  while(true){}

}

function func4():never{

  throw new Error();

}

 

never 타입은 어떠한 값도 담을 수 없다.

void와 다르게 undefined도 담지 못하고, strictNullChecks 옵션을 꺼도 null을 담지 못한다.

 

---

 

출처

한 입 크기로 잘라먹는 타입스크립트 대시보드 - 인프런 | 강의 (inflearn.com)

한 입 크기로 잘라먹는 타입스크립트 - 인프런 | 강의