[TIL] 2021년 12월 19일

1. 오늘 공부한 것

enum(열거형) type

any type

union type

literal type

alias type

function type and callback

unknown type

never type

 

2. enum type

enum type은 열거형 타입이다.

 

//1. 일반적인 열거형
enum GameKind { RPG, TCG, RTS, MMORPG, AOS };

const game = {
  name: 'League Of Legend',
  kind: GameKind.AOS
};
console.log('게임의 종류: ' + game.kind);
//게임의 종류: 5

//2. 열거형 속성 명시적으로 값 정하기
enum GameKind { RPG = 10, TCG = 15, RTS = 20, MMORPG, AOS };

const game = {
  name: 'Leaque Of Legend',
  kind: GameKind.AOS
};
console.log('게임의 종류: ' + game.kind);
// 게임의 종류: 21

 

 

enum에서 명시적으로 정한 마지막 값에 대해서

다음에 나오는 key의 값은 이전 값의 +1이 된다.

 

3. any type

저번에 TIL을 쓰면서 any에 대해서 얘기한 적이 있었다.

되도록이면 any는 TypeScript에서 안쓰는 게 좋다.

타입을 엄격하게 다룰려고 사용하는데 의미 없는 것 같다.

 

그래서 결국 어떤 값이 들어갈지 모를 때 사용한다.

그리고 런타임 때 오류를 감지 해야할 것이다.(일반 자바스크립트와 똑같이 처리)

 

//자유로운 값 할당

let product: any;
product = ['이어폰', '의자'];
product = {
  name: '이어폰',
  price: 150000
};

 

4. union type

union type은 any만큼은 아니지만, 좀 더 타입에 대해서 자유로워진다.

//num1과 num2는 string과 number만 허용한다.
//문자열이든 숫자든 뭐든 숫자 계산으로 바꾸는 함수
function add(num1: string | number, num2: string | number){
	return +num1 + +num2;
}
const result = add(10, '20');
console.log(result);

 

5. literal type

literal type은 변하지 않는 데이터를 의미한다. 

즉, string과 number와 같은 것이다.

그러니까 데이터를 타입으로 지정해놓은 것이다.

 

let data: 'hello' = 'hello';
data = 'hello'; // => 괜찮음
data = 'hellow'; // => 오류 생김

 

literal type이란 것은 'hello'처럼 데이터 자체를 의미한다.

느낌은 상수와 비슷하긴 하지만, 상수는 변하지 않는 변수를 의미한다.

 

6. alias type

alias type은 typescript에서 타입을 관리하기 편한 기능을 제공한다.

type 으로 선언한 변수들이 alias type이다.

 

 

type User = {
  name: string;
  age: number;
}

type ObjectList = object[];

function addUser(user: User, list: ObjectList){
  list.push(user);
  console.log(list);
}

let user_list: ObjectList = [{
  name: 'gunbro',
  age: 24
}];

addUser({name: 'jun seok', age: 24}, user_list);

 

7. function type and callback

function 이름(){} 이렇게 설정하지만, 변수에 function을 할당하는 경우도 있다.

이러한 경우에는 function type이 필요할지도 모른다.

 

 

function add(num1: number, num2: number): number{
	return num1+ num2;
}

//1. 이 변수가 함수가 할당 될 것이라고 알려주기 => 함수면 된다.
let combineValues: Function;

//2. 이 변수가 좀 더 세부적으로 함수가 할당 될 것이라고 알려주기 => 함수여도 해당 조건에 맞아야 한다.
let combineValues: (a: number, b: number) => number;
combineValues = add;

//3. 콜백 함수에 function type 적용하기
type User = {
	name: string; age: number;
}
function getUserData(user: User, cb: (user: User) => void){
    const result = cb(user);
    console.log(result);
}
const user_obj = {
    name: 'gang ho',
    age: 24
};

getUserData(user_obj, (user)=>{
    const game_name = "overwatch";
    return {game_name, user};
});

 

위 코드의 3번에 대한 결과

 

function type을 세부적으로 구상할 때 return type을 void로 하였다.

void는 자바스크립트에 존재하지 않는다.

 

void는 return 값이 없을 때 주로 설정하는데,

void가 적용된 함수를 console.log(함수()) 찍어보면 undefined라고 나온다.

 

void라면 undefined라는 값이 생기면 안 되지만 생긴다.

(undefined 타입도 존재한다. 값이기 때문에)

 

return 구문 조차도 없다면, void를 작성하는 것이 맞다.

그리고 return; 이라는 구문이 존재하며 값이 없다면, undefined를 작성해야한다.

 

 

function greet(): void {
  console.log('안녕');
}
function greet2(): undefined {
  console.log('안녕하세요');
  return;
}
greet();
greet2();

 

8. unknown type

unknown type은 any type과 정말 유사하다.

하지만, 내부적으로 돌아가는게 다르다.

 

any type은 일반 자바스크립트 처럼 코드를 작성하면 된다.

 

unknown type은 이미 타입이 unknown으로 할당된 변수를 다른 타입으로 할당된 변수에 값에

 할당하려고 하면 오류를 일으켜 한 번 확인하게끔한다.

 

 

//이렇게 해야지 오류가 안 나온다.
let userInput: unknown;
let text: string;
userInput = 5;
userInput = "10";
if(typeof userInput === 'string'){
  text=userInput;
}

 

9. never type

nerver type은 어느 특정 함수에서 오류를 발생하거나 무한 루프를 일으키는 함수에 대해서 사용한다.

 

오류를 발생하면 스크립트를 멈추게 된다.

 

그래서 그 다음 것을 실행못하게 되는데 이러한 기능과 관련된 타입이 never인 것이다.

 

function generateError(message: string, code: number): never{
  throw {message: message, errorCode: code};
}

 

10. 느낀점

 

오늘 좀 많은 걸 공부 했다.

 

그래서 머리로 기억하기 위해서 내가 생각해낸것을 예시로 코드로 작성해봤다.

 

이전 TIL부터 지금까지 공부한 것은 core types에 대한 것이며,

 

다음 공부는 typescript의 구성에 대해서 공부하려고 한다.

 

---

참고

 

https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#literal-types

Documentation - Everyday Types