[타입스크립트] 기본 타입

타입스크립트의 기본타입

자바스크립트는 string, number, boolean, object 등의 타입을 typeof를 통해 구별할 수 있다.
물론 코드 내에서 if문을 걸어 타입의 검사가 가능하긴 하지만, 이는 개발 단계에서 버그를 잡아내는데 비효율적일 수 있다.

따라서 우리는 타입스크립트를 통해 변수의 타입을 미리 설정하고, 이를 통해 개발 단계에서 사전에 에러를 발견하여 즉각적으로 수정할 수 있다.

number, string, boolean 타입 (기초)

아래와 같이 코딩을 하게 되면, 1은 string이고 2는 number이기 때문에 문자열로 변환되어 ‘12’가 반환된다.

function sum(a, b) {
  return a + b;
}

const num1 = '1';
const num2 = 2;

console.log(sum(num1, num2));

하지만 타입스크립트를 활용하여 아래와 같이 코딩을 하면 우리는 사전에 오류를 잡아낼 수 있고, 의도한 대로 코드의 결과 값을 반환 받을 수 있다.

function sum(a: number, b: number, c: boolean) {
  if (c) {
    return a + b;
  }
}

const num1 = '1';
const num2 = 2;
const isTrue = true;
console.log(sum(num1, num2, isTrue));
//Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)
// 이렇게 오류를 잡아주기 때문에 우리는 즉각적으로 잘못된 코드의 방향성을 바로잡을 수 있는 것이다.

초기화와 할당

변수를 선언할 때 할당이 이미 특정 타입으로 되어있는 것과, 그냥 생성+초기화만 되어있는 것과는 타입 할당 방법에 차이가 존재한다.

무슨 말인가 하면… 아래와 같이 이미 특정 변수에 특정 타입의 값이 선언되어 있다면, 타입스크립트는 해당 변수의 타입을 해당 값의 타입으로 할당해버린다.

// 이제 value의 타입은 number인 것이다.
let value = 5;

// 이 때문에 이와 같은 타입 지정은 중복 또는 반복이기에 굳이 타입을 할당해줄 필요가 없다.
let value: number = 5;

하지만 아래와 같은 경우는 타입을 할당해주는 것이 옳다

// 이렇게 변수의 생성과 할당이 분할되어 있는 경우에는 선언 당시에 타입을 할당해줘야 한다.
let value: string;
value = 5;

---

타입스크립트에서의 객체와 배열 타입

타입스크립트에서는 객체 안에 들어가는 value들의 타입도 손쉽게 사전 정의해줄 수 있다.

1. 오브젝트의 기본 타입 선언법

   // 이렇게 기본적인 오브젝트 타입 선언을 할 수 있다.
   const profile = {
   	name: string;
   	age: number;
   }
   
   // 아래는 조금 더 심화된 예시다.
   const profile = {
   	name : string;
   	age: number;
   	friends: string[];
   	details: {
   		uiv: string;
   		gpa : number;
   	}
   }

   위의 심화 타입스크립트 코드를 JS코드로 표현하면 이와 같을 것이다.

   

그렇다면 **배열(Array)**은 타입스크립트에서 어떻게 다뤄질까?

위에서 약간의 힌트가 나왔지만, 해당 배열의 요소들이 가질 타입을 [] 앞에 선언해주면 된다.

const friends: string[];

근데 그러면 배열 안에 들어가는 요소들이 다양한 경우엔 어떻게 처리할까…?

아래와 같이 any를 사용해주면 된다. 하지만 any를 너무 남발하는 것은 타입스크립트의 이점을 제대로 활용하지 못하는 경우가 될 수 있으니 최대한 요소들의 타입을 고려하여 배열의 타입을 지정해줘야 한다.

let friends: any[];

friends = ['hoonjoo', 185, 77]; // 이렇게 어떤 타입이 들어와도 오류를 반환하지 않는다.

튜플

타입스크립트에는 튜플이라는 타입이 존재한다. 이는 배열과 모양새가 비슷한데, 위에서 설명한 것과 같이 배열 요소의 타입들이 순서에 따라 지정되어 있는 타입을 의미한다.

const profile = [string, number];
profile = ['age', 50]; // 이런식으로 순서를 반드시 고려하여 그에 맞는 타입을 집어 넣어주면 된다.

enum

enum 타입 또한 자바스크립트에는 존재하지 않는 타입이다.
enum은 내가 사전에 정의한 특정 변수의 고정값을 두어 활용하고 싶을 때 사용한다.

글로만 보면 이해가 쉽지 않을 수 있는데, 아래의 코드를 보면 이해가 쉬울 수 있다.

// 이렇게 enum을 사용하면, 사전에 특정 변수에 고정값을 지정해두고 활용 가능하다.
enum Role {
  ADMIN = 0,
  READ_ONLY = 1,
  BANNED = 2,
}

const person = {
  name: 'hoonjoo',
  role: Role.ADMIN, // 0의 값이 자동으로 지정된다.
};

---

기타 타입

이제 타입스크립트에서의 모든 핵심 타입은 모두 훑어봤다.
그 외의 타입들만 더 알아보면 될 것 같다…!!

조합 타입

우선 조합 타입이다. 이는 javascript의 삼항연산자와 비슷한 느낌이라고 볼 수 있는데
or, || 과 같은 맥락이라고 보면 이해하기 쉽다.

function combine(a: number | string, b: number | string) {
  return a + b;
}

combine('hoonjoo', 'park'); // hoonjoopark
combine(5, 15); // 20

리터럴 타입

위에서 설명한 enum과 궤를 같이 한다고 볼 수 있다.
특정 값을 조합(union)타입과 함께 사용할 수도 있는 조금 더 유연한 타입이다.

function combine(a: number | string, b: number | string, c: 'toNum' | 'toStr'){
	c === 'toNum' ? return a + b || return a.toString() + b.toString();
};

근데…. 계속 이렇게 타입을 타이핑 하는게 귀찮을 땐 어떻게 방법이 없을까?

type Alias를 사용하면 된다 🙂

// 이렇게 타입을 변수화 하여 사용할 수 있다.
type CalcType = number | string;

function combine(a: CalcType, b: CalcType){
	return a + b;
}

// 이런 방식도 물론 가능하다.
type User = { name: string; age: number };

function sayHello(user: User){
	console.log(`Hi ${user.name}, you are ${user.age} years old right?')
};

sayHello('Jonh Doe', 33);

---

함수 타입 & ‘절대’ 타입 & ‘알 수 없는’ 타입

함수 return 값의 타입 지정

타입스크립트에선 함수에서 내가 반환하고자 하는 값을 미리 산정하여 해당 타입의 값만 return 되도록 설정할 수 있다.

// return값이 number만 반환될 수 있도록 지정한다.
function sum(a: number, b: number): number {
  return a + b;
}

// return값이 아예 없도록 지정한다. (void)
function sayHello(a: string): void {
  console.log(`hi ${a}!!`); // console.log는 return이 아니라는 점에 유의하자!
}

함수 자체를 타입으로 지정해주기

특정 변수에 함수 자체를 담아야 하는 경우가 발생할 수도 있다.
이런 경우에는 아래와 같이 함수를 타입으로 지정해주면 된다.

const add(num1: number, num2: number) {
	return number1 + number2;
};
const combine(input1: string, input2: string) {
	return input1 + input2;
};

let sum: (a: number, b: number) => number;

sum = add; // 두 함수의 들어가는 매개변수 타입이 동일하기 때문에 오류 없이 잘 실행될 수 있다.
sum = combine // 이는 매개변수 타입이 서로 상이하기 때문에 오류가 발생된다.

콜백을 지정해주기

const add(num1: number, num2: number, (num: number)=> void) {
	testCallback(num1 + num2);
};

// 위에서 콜백함수의 리턴값을 void로 지정해줬기 때문에, return이 아닌 console.log를 사용했다.
add(5,10, (result)=>{
	console.log(result)
})

---