TypeScript 타입 종류

문자 타입

let str: string; // 1
let red: string = "Red"; // 2
let green: string = 'Green'; // 3
let myColor: string = `My color is ${red}`; // 4
let yourColor: string = "Your color is" + green; // 5

변수명 뒤에 string라는 타입을 명시해 주고, 타입에 일치하는 데이터인 문자를 변수에 할당해 주었습니다. 1~5의 코드를 순서대로 살펴보도록 하겠습니다.

• 1번 코드 : 타입만 명시하고 값을 할당하지 않았습니다. 아무런 값을 할당하지 않을 경우 undefined가 할당이 되는데 TypeScript는 undefined를 할당받고 시작하더라도 이후에 할당받을 값의 타입을 string이라고 명시해줄 수 있습니다.
• 2번 코드 : 1번 코드와 동일하게 타입을 명시해주고 추가로 ""를 사용해 문자 데이터를 할당하고 있습니다.
• 3번 코드 : 2번 코드와 동일하며, 값을 할당할 때 ''를 사용하여 할당하고 있습니다.
• 4번 코드 : 1, 2번 코드와 동일하며, 값을 할당할 때 ``을 사용하여 할당하고 있습니다.

* 5번 코드는 별도의 설명을 추가하지 않았지만, JS에서 사용하는 문법과 동일하게 문자 데이터를 다룰 수 있습니다.
* 지정하는 타입에 해당하는 데이터를 할당하지 않으면 사용이 불가능합니다.

숫자 타입

let num: number;
let integer: number = 6;
let float: number = 3.14;
let infinity: number = Infinity;
let nan: number = NaN;

변수명 뒤에 number라는 타입을 명시해 주고, 타입에 일치하는 데이터인 숫자를 변수에 할당해 주었습니다.

number 타입을 사용하면 정수, 실수, Infinity, NaN 할당이 가능합니다.

* 지정하는 타입에 해당하는 데이터를 할당하지 않으면 사용이 불가능합니다.

불린 타입

let isBoolean: boolean;
let isDone: boolean = false;

변수명 뒤에 boolean이라는 타입을 명시해 주고, 타입에 일치하는 데이터인 boolean을 변수에 할당해 주었습니다.

boolean 타입을 사용하면 true, false 할당이 가능합니다.

* 지정하는 타입에 해당하는 데이터를 할당하지 않으면 사용이 불가능합니다.

Null / Undefined

let nul: null;
let und: undefined;

nul = null;

console.log(nul);
console.log(und);

변수명 뒤에 null이나 undefined라는 타입을 명시해주고 있습니다.

JS에서 null이나 undefined는 아무것도 의미하지 않는 값에 해당하며, null은 명시적으로 값을 지정하지 않았음을 의미하고 undefined는 암시적으로 값을 지정하지 않았음을 의미합니다.

이때 변수 nul의 경우 값을 할당하지 않을 경우 undefined를 할당받게 되는데 타입 null의 경우 무조건 null만 할당받을 수 있기 때문에 추가적으로 null 값을 할당해주지 않으면 타입 오류가 발생하게 됩니다.

*null / undefined의 경우 유용하지 않기 때문에 많은 경우 타입으로 지정하지 않습니다.
* 지정하는 타입에 해당하는 데이터를 할당하지 않으면 사용이 불가능합니다.

배열

const fruits: string[] = ["apple", "banana", "cherry"];
const number: number[] = [1, 2, 3, 4, 5, 6];
const union: (string | number)[] = ["apple", 1, 2, "Banana"];

변수명 뒤에 배열 안에 들어있는 요소의 속성의 타입을 명시해주고 뒤에 []를 불여 타입을 명시해주고 있습니다.

기본적으로 배열 안에 들어있는 요소가 모두 문자이면 string, 모두 숫자이면 number를 명시해주며 배열의 요소가 여러 타입으로 구성되어 있을 경우 배열 안 요소의 타입을 |(버티컬 바)를 사용하여 명시해 줍니다.

이렇게 버티컬 바를 사용한 타입 명시를 union타입이라고 하며, 자바스크립트의 OR 연산자의 역할을 합니다.

위의 경우 배열 타입을 의미하는 대괄호와 union타입을 함께 사용하고 있는데 union 타입을 소괄호로 묶지 않으면 다르게 해석이 됩니다.

객체

const ogj: object = {};
const arr: object = {};
const func: object = function () {};

변수명 뒤에 object라는 타입을 명시해주고 있습니다.

object에는 배열, 함수도 포함되기 때문에 object 타입을 사용할 경우 타입에 대한 엄격함이 떨어지게 됩니다. 이러한 이유로 object 타입은 많이 사용하지 않고 아래의 방법을 사용합니다.

const userA: {
  name: string;
  age: number;
  isValid: boolean;
} = {
  name: "rati",
  age: 5,
  isValid: true,
};

해당 예시 코드의 경우 상수에 객체 데이를 할당하고 있으며, 할당되는 객체 안에 있는 속성의 타입을 객체 형식으로 명시해주고 있습니다.

즉, 객체의 타입을 명시해줄 때 타입의 엄격함이 떨어지는 object 타입을 명시해주지 않고, 객체의 각각의 속성의 타입을 객체 형식으로 명시해 줍니다.

함수

const add: (x: number, y: number) => number = function (x, y) {
  return x + y;
};

const a: number = add(1, 2);

const hello: () => void = function () {
  console.log("hello world");
};
const h: void = hello();

함수를 할당받는 변수명 뒤에 함수의 매개 변수로 들어오는 인수의 타입을 명시해 주었으며, 반환되는 값의 타입을 명시해주고 있습니다.

추가로 함수 hello의 경우 매개 변수가 없기 때문에 별도의 타입 명시를 해주지 않았으며, 함수 내부에서 return 키워드를 사용하지 않으면 TS에서는 void의 타입의 데이터가 나오기 때문에 void를 명시해 주었습니다.

*void 타입의 경우 해당 함수가 반환하는 값이 없기 때문에 함수를 실행하여 반환되는 값을 변수에 할당하는 것은 의미가 없음을 명시적으로 나타내는 타입입니다.

const add = function (x: number, y: number): number {
  return x + y;
};

const hello = function (): void {
  console.log("hello world");
};

함수의 경우 타입 명시를 함수 자체에서 할 수 있으며, 각각의 매개 변수 뒤에 명시해주고 반환되는 값의 타입을 위와 같이 명시해줄 수 있습니다.

Any

let hello: any = "hello world ";

hello = 123;
hello = false;
hello = null;
hello = {};
hello = [];
hello = () => {};

변수명 뒤에 any라는 타입명을 명시해 주었습니다.

anything 즉, 어떤 데이터 타입이든 사용이 가능합니다. 하지만 any의 경우 일반 JS를 사용하는 것과 같기 때문에 잘 사용하지 않는 타입입니다.

Unknown

const a: any = 123;
const u: unknown = 123;

const any: any = a;
const boo: boolean = a;
const num: number = a;
const arr: string[] = a;
const obj: { x: string; y: number } = a;

unknown은 무엇인가 알 수 없다는 뜻을 가지고 있습니다. 앞서 사용한 any와 다른 점은 any의 경우 어떠한 데이터 타입이든 할당해도 상관없지만, unknown의 경우 정확하게 어떤 데이터가 할당될지 알 수 없으니 일단 알 수 없다고 표시함을 나타냅니다.

*위의 코드 예시처럼 any 타입의 변수 a를 boolean, number, 객체 타입 등의 변수에 할당이 가능합니다.

만약 변수 a 위치에 unknown 타입의 변수 u로 바꿔주는 경우 any 타입의 변수를 제외한 다른 변수들에서 타입 에러가 발생하는 것을 확인할 수 있습니다. 원인은 각 변수들의 타입이 정해져 있는데 알 수 없는 타입의 데이터가 할당되었기 때문입니다.

*TS에서 코드를 작성할 때 데이터의 타입을 정확하게 무엇으로 지정할지 모르는 상황에서 가장 쉽게 사용할 수 있는 any 타입의 유혹을 많이 받게 되는데, 이때 any 타입 대신 unknown 타입을 사용하면 위와 같이 엄격한 타입 조건을 따져 코드 상으로 확인할 수 있게 됩니다.

Tuple

const tuple: [string, number, boolean] = ["a", 1, false];
const users: [number, string, boolean][] = [
  [1, "rati", true],
  [2, "merry", false],
  [3, "lewis", true],
];

tuple 타입의 경우 대괄호 내부에서 각 요소이 인덱스와 동일한 인덱스에서 타입을 명시해 줍니다. 배열과 유사하게 타입을 명시해주고 있는데 tuple 타입은 길이와 요소의 타입이 고정된 배열입니다.

즉, 할당하는 데이터 안 요소의 타입이 명시된 동일한 인덱스에 위치한 각각의 타입과 일치해야 합니다.

tuple 타입의 경우 변수 users처럼 배열 안의 각 요소가 배열로 구성되어 있고, 각 배열이 동일한 구조의 요소를 가질 경우 사용됩니다.
*배열의 요소는 3개여야 하며, 각 요소의 타입은 순서대로 number, string, boolean 이어야 합니다.

Void

function hello(msg: string): void {
  console.log(`hello ${msg}`);
}

const hi: void = hello("world");

함수가 return 키워드를 사용하여 값을 반환하지 않을 경우 JS에서는 undefined를 반환하지만, TS에서는 반환 타입이 void에 해당합니다.

Never

const nev: [] = [];
nev.push(3);

never 타입은 절대 발생하지 않을 값이라는 의미를 가지고 있는 타입입니다.

위의 예시 코드를 입력할 경우 타입 에러가 발생하게 됩니다. 변수 nev에는 빈 배열을 할당하고 있어 변수의 타입에 []만 사용해 주었습니다.

원래 배열 타입을 명시할 때 배열 안에 요소가 어떤 타입인지 [] 앞에 명시해주었는데 위의 타입 명시의 경우 배열 안에 어떠한 요소도 넣을 수 없습니다. 이 경우 TS는 위와 같이 만들어진 배열의 타입에는 never라는 타입을 자동으로 지정하게 됩니다.

Union

let union: string | number;

union = "hello";
union = 123;

변수 union에는 별도의 값을 할당하지 않았으며, 버티컬 바를 사용하여 string, number 타입을 명시만 해주었습니다.

union 타입의 경우 버티컬 바를 사용하여 명시한 타입 중 하나에 해당하는 데이터를 할당할 수 있습니다. JS의 OR 연산자와 동일합니다.

Intersection

interface User {	// 1
  name: string;
  age: number;
}
interface Validation {	//2
  isValid: boolean;
}
const rati: User & Validation = {	//3
  name: "rati",
  age: 5,
  isValid: true,
};

1번의 경우 interface 키워드를 사용하여 객체 내부에 name 속성과 age 속성의 타입을 명시해주고 있으며, 2번의 경우도 동일하게 객체 내부에서 속성의 타입을 명시해주고 있습니다.

3번의 경우 변수 rati에서 1번, 2번에서 작성한 User, Validation을 &를 사용하여 묶어 타입을 명시해주고 있습니다. 이렇게 타입을 명시해주게 되면 변수 rati에 할당된 객체의 속성 중 name 은 문자 타입, age는 숫자 타입, isValid는 boolean 타입이어야 합니다.

만약 위의 코드처럼 isValid 속성을 선언하지 않게 되면 위와 같은 타입 에러 메시지를 확인할 수 있습니다.

 

Function

const func = () => {
  console.log("콘솔을 출력하는 함수");
};

let funcConsole: Function = func;

funcConsole = 123; // 타입 에러 발생

변수 func는 위의 함수 본문을 가진 함수를 할당받고 있으며, 변수 funcConsole은 위에서 생성된 변수 func를 할당받고 있고 Function 타입으로 명시되어 있습니다.

 

이제 변수 funcConsole은 함수만 할당받을 수 있는 변수가 되었기 때문에 숫자를 할당할 경우 위와 같은 에러가 발생하게 됩니다.

 

*Function 타입의 경우 타입에 제약 조건이 다소 널널해 그냥 함수 타입이면 할당할 수 있기 때문에 앞서 작성한 함수의 매개 변수와 반환값의 타입을 명시하는 방법 사용을 추천합니다.