정중식의 개발공부로그

타입스크립트 타입 정리(primitive types,union type, any, unknown)

11 Apr 2023 | typeScript

코딩애플강의를 보고 정리했습니다.

기본 변수 타입(primitive types)

// 예시용으로 작성해줬지만 name이라는 변수명은 전역변수로 사용불가능함
let name: string = 'kim';
let age: number = 20;
let check: boolean = false;

array 혹은 object 자료 안에도 타입 지정이 가능하다.

  • array 타입 지정
let members: string[] = ['kim', 'park'];
let members: (string | number)[] = ['kim', 20];
  • object 타입 지정
let myInfo: { age: number } = { age: 20 };

Tip!

타입스크립트는 타입을 자동으로 부여해주는 경우가있다.

let name = 'kim';
let age = 20;

이렇게만 써줘도 자동으로 name은 string, age는 number을 갖게된다.
(변수명에 마우스 올려보면 확인 가능)
array나 object 만들 때도 자동으로 알아서 된다. 그러니 간단한 변수들은 타입을 생략하자. 하지만 언제나 그렇듯 케바케니깐 타입지정하는게 보기좋다면 그렇게 하자

Union type(가장 좋음)

  • OR 연산자 같은 느낌이다.
  • 아래예제에서 할당하는 순간 타입은 string 또는 number 중 하나로 변한다.
let name: string | number = 'kim';
let age: string | number = 100;

name, age 변수엔 string 혹은 number만 들어올 수 있다.

array,object를 union type으로 쓰려면?

var array: number | string[] = [1, '2', 3];
var object: { data: number | string } = { data: '123' };

특징은 변수에 정의된 Union 타입은 할당과 동시에 OR 역할이 사라지는 반면에,
array, object에 정의된 Union 타입은 OR 연산자가 유지된다.

any 타입 unknown 타입

any 타입

  • 아무 자료나 집어넣을 수 있는 타입이다.(쉽게말해서 실드 해제)
  • 막 사용은 하지말자. 타입관련 버그가 발생할 경우 추적하기 어려워짐
    • 타입 실드를 안씌우면 타입스크립트를 쓸 이유가 없다.
  • 비상시 쓰는 변수 타입체크 해제기능 이런 용도로 쓰자.
// 다 쌉가능
let name: any = 'kim';
name = 123;
name = undefined;
name = [];

unknown 타입

  • any타입과 똑같이 모든 타입을 집어넣을 수 있다.
  • 자료를 집어넣어도 타입은 그대로 unknown 이다.
  • 요즘은 unknown을 사용함
let name: unknown = 'kim';
name = 123;
name = undefined;
name = [];

any unknown 차이점

let 이름: unknown;

// 타입 에러 발생
let 변수1: string = 이름;
let 변수2: boolean = 이름;
let 변수3: number = 이름;

unknown 타입을 다른 곳에 집어넣으려고 하면 타입 에러가 난다.
하지만 any는 안그럼

let name: unknown;
name[0];
name - 1;
name.data;

이렇게 해줘도 unknown타입은 에러가 난다.
역시나 any는 안그럼

왜냐하면,타입스크립트는 정확하고 확실한걸 좋아하기 때문이다.
확실하지않은 타입(unknown)에 뺄셈해주고 하는걸 싫어한다. 숫자가 아닌걸 뺄셈할 수는 없으니까.
타입스크립트에선 뺄셈은 number 류의 타입만 할 수 있고, .name 이런건 object류의 타입만 할 수 있다고 미리 정의되어있다.

결론

아직 뭘 집어넣을지 모르겠는데 약간의 안정성을 도모하고 싶으면 unknown 타입을 써보자.

강사말로는 “근데 실은 코드짜다가 any, unknown 부여할 경우는 별로 없습니다.” 라고는 하시는데.. 초보자인 내가 코드를 짜봤을때는 의외로 any를 좀 자주 접했던거같다. 근데 unknown을 알게되었으니 이제는 이거 사용할듯

왜 에러?

let age: string | number;
age + 1; // 자바스크립트에선 문자에도 +1, 숫자에도 +1 가능함

let age: unknown = 1;
age + 1;

두개의 코드 둘다 에러가 난다.
이유는 타입스크립트는 언제나 확실한걸 좋아한다.
지금 변경하려는 변수의 타입이 확실해야 연산을 수행해주는데, unknown은 number타입이 아니고, string | number 도 number 타입이 아니다.
앞서 배운 string | number은 유니온타입인데, 유니온타입은 값 할당이 되는 순간 타입이 정해진다. 만약 값을 숫자로 할당해줬다면 에러가 발생하지않는다.

Related Posts