[TS] 타입스크립트 타입

📌 Typescript type

tuple, Enum, Any, Never, Void, Union

자바스크립트에서 사용하는 원시형, 참조형 타입은 물론이고, 타입 스크립트에서 추가로 제공하는 타입도 있다.

✅ Any

사용자로부터 받은 데이터, 서드 파티 라이브러리에서 가져온 데이터 등 잘 알지 못하는 타입을 표현할 수 있다.

any 타입을 부여하면 컴파일 검사할 때 타입 검사를 하지 않고 통과 시킨다. = 일반 자바스크립트 같은 기능

그러면 타입스크립트를 쓰는 이유가 없기 때문에 any 타입은 최대한 쓰지 않는게 좋다.

✅ Union

변수 또는 함수의 매개변수에 대해 둘 이상의 데이터 타입을 사용할 수 있다.

let code: (string | number);
code = 123; //OK
code = 'hello'; //OK
code = false; //Compile Error

let ID: string | number;
ID = 111; //OK
ID = 'E111'; //OK
ID = true; //Compile Error

✅ Tuple

배열을 보다 특수한 형태로 사용할 수 있게 해주는 타입
tuple에 명시적으로 지정한 형식에 따라 아이템의 순서를 정해야 한다.
추가되는 아이템 또한 tuple에 명시된 타입만 사용 가능하다.

var employee: [number, string] = [1, 'Steve'];
var person: [number, string, boolean] = [1, 'Steve', true];

변수 선언과 초기화를 따로 할 수 있다.

var user: [number, string, boolean, number, string] //변수 선언
user = [1, 'Steve', true, 20, 'Admin'] //변수 초기화

다차원 배열

배열의 아이템으로 배열이 들어가는 다차원 배열 형태에서 아이템의 타입을 지정해줄 수 있다.

var employee: [number, string][];
employee = [[1, 'Bill'], [2, 'Steve'], [3, 'Jeff']];

Tuple에 요소 추가

튜플 타입의 배열에 요소를 추가할 때는 명시한 타입에 맞춰 추가해야한다.

var employee: [number, string] = [1, 'Bill'];
employee.push(2, 'Steve');
console.log(employee) //[1, 'Bill', 2, 'Steve']

명시한 타입과 다른 타입의 데이터를 추가하려고 시도하면 에러가 발생한다.

employee.push(true); //ERROR

✅ enum

enumerated type(열거형)
값들의 집합을 명시하고 이를 사용하는 타입

enum PrintMedia {
  Newspaper, //0
  Newsletter, //1
  Magazine, //2
  Book //3
}

열거된 PrintMedia의 각 아이템은 별도의 값이 설정되지 않은 경우 0부터 시작한다. (인덱스 느낌...?)

각 아이템에 값을 할당할 수 있다.
값이 할당되지 않은 아이템은 이전 아이템의 값에 +1된 값이 설정된다.

enum PrintMedia {
  Newspaper = 1, //1
  Newsletter = 50, //50
  Magazine = 55, //55
  Book //55 + 1 => 56
}

그러면 이 데이터 타입을 어떤 식으로 사용할 수 있나?

let mediaType: number = PrintMedia.Book //56
let type: string = PrintMedia[1] //Newspaper

🔍 enum과 객체의 차이점

enum과 객체는 비슷하게 생겼다. 그리고 그 기능도 비슷해 보인다.
실제로 enum은 그 자체로 객체이기도 하다. 하지만,

• 객체는 선언 후에 새로운 속성을 자유롭게 추가하거나 삭제 또는 변경할 수 있지만, enum은 한 번 선언한 이후로 변경할 수 없다.
• 객체의 속성 값은 JS가 허용하는 모든 타입이 올 수 있지만, enum의 속성값으로는 string / number만 허용된다.

✴️ enum 예시

enum을 사용해서 언어 코드를 정의하는 집합을 만들 수 있다.

enum LanguageCode {
  korean = 'ko',
  english = 'en',
  japanese = 'ja',
  chinese = 'zh',
  spanish = 'es',
}

const code: LanguageCode = LanguageCode.english

✅ void

데이터가 없는 경우 void를 사용한다.
예를 들어, 함수가 값을 반환하지 않으면 (=리턴값이 없으면) 반환 유형으로 void를 지정할 수 있다.

타입이 없는 상태이며, any와 반대의 의미이다.

타입스크립트에서 값을 리턴하지 않는 함수는 undefined를 반환한다.

function sayHi(): void {
  console.log('Hi')
}

let speech: void = sayHi();
console.log(speech) //undefined

만약 함수의 리턴값이 있다면?

리턴값의 타입을 적어주면 된다.

function sayHi(): string {
  console.log('Hi')
  return 'Hello'
}

✅ never

절대 발생하지 않을 값을 나타내는 타입

일반적으로 함수의 리턴 타입으로 사용.
항상 오류를 리턴하거나 리턴값을 절대로 내보내지 않을 것(=리턴값이 없는 무한 루프)을 확신할 때 사용한다.

//항상 오류 리턴
function throwError(errorMsg: string): never {
  throw new Error(errorMsg);
}

//무조건 리턴값이 없을 때
function keepProcessing(): never {
  while (true) {
    console.log('I always does something and never ends.')
  }
}

🔍 void와 never의 차이점

void 타입은 undefined나 null 값을 가질 수 있다.
never 타입은 어떠한 값도 가질 수 없다. (undefined, null도 불가)

function sayHi(): void {
  console.log('Hi')
}

let speech: void = sayHi();
console.log(speech) //undefined

위 예제에서 speech: never 를 설정하면 컴파일 오류 발생

일단, sayHi() 함수는 리턴값이 없고 리턴값의 데이터타입을 void로 설정해놓은 상태이다. 이때, 함수를 실행하면 실제로 반환하는 데이터의 값이 undefined이기 때문에 값을 가진다고 볼 수 있다.

따라서 이 함수를 실행한 결과(=반환값의 데이터 타입)을 speech 라는 변수에 할당한다고 했을 때 이 데이터의 타입(=sayHi() 함수의 리턴값의 타입)은 never가 될 수 없다!!!

---

📌 타입 사용해보기

✅ Boolean

//Boolean
let boolean: boolean;
let falseBoolean: boolean = false;

✅ Number

let number: number;
let integer: number = 6;
let float: number = 1.2345;

✅ String

let string: string;
let firstName: string = 'Doe';
let lastName: string = 'John';

✅ Array

//한가지 타입만 가지는 배열
let names1: string[] = ['John', 'Kim'];
let names2: Array<string> = ['John', 'Kim'];

//여러 타입을 가지는 배열
let array1: (string | number)[] = ['John', 1, 2];
let array2: Array<string | number> = ['John', 1, 2];

//읽기 전용 배열 생성
let stringArray: readonly string[] = ['A', 'B'];
let numberArray: ReadonlyArray<number> = [1, 2];

✅ Tuple

배열과 비슷하지만 해당 자리에 정해진 타입, 고정된 길이를 지켜야 한다.

let tuple1: [string, number];
tuple1 = ['a', 1];
tuple1 = ['a', 1, 2]; //ERROR
tuple1 = [1, 'a']; //ERROR

//튜플 타입의 배열(2차원 배열)
let users: [number, string][];
// users.push(2); //ERROR
users = [[1, 'John'], [2, 'Doe']];

//push() 등을 통해 값을 넣는 것은 가능
let tuple2: [string, number];
tuple2 = ['a', 1];
tuple2.push(2);
console.log(tuple2) //['a', 1, 2]

✅ Any

모든 타입으로 어떠한 값도 할당 가능, 되도록 사용 X
서드파티 라이브러리 사용 시 타입 모를 때만 사용

let any: any = 'abc';
any = 1;
any = [];

✅ Unknown

알 수 없는 타입을 의미, 어떠한 값도 할당 가능

Any와 다른 점

any 타입을 다른 타입에 할당하는 것은 가능하지만,
unknown을 다른 타입에 할당하는 것은 불가능

let unknown: unknown = 123;
let string1: string = unknown //ERROR, unknown을 다른 타입에 할당 불가능

💡 타입 단언

'as' 키워드를 통해 타입스크립트가 추론하지 못하는 타입을 개발자가 직접 명시해주는 문법

let string2: string = unknown as string //타입 단언을 통해 억지로 넣어줄 순 있음

✅ Object

typeof 연산자를 사용해서 타입을 확인했을 때 object를 반환하는 데이터들에 할당 (객체, 배열, null... 등)

let obj: object = {};
let arr: object = [];
let date: object = new Date();

객체 속성에 대한 타입을 개별적으로 지정할 수 있다.

let obj: object = {
  id : 1,
  name : 'John'
}

//위 방법보다 아래 방법으로 타입을 작성해주는 것이 좋다.

let obj: {id: number, name: string} = {
  id : 1,
  name : 'John'
}

✅ Union

2개 이상의 타입을 허용

let union: (string | number);
union = 'hi';
union = 123;
union = []; //ERROR

✅ Function

let func1: (arg1: number, arg2: number) => number;
func1 = function (x, y) {
  return x * y;
}

let func2: () => void;
func2 = function () {
  console.log('hi');
}

✅ Void와 Never

타입스크립트 타입