Taeyoung Kim(RaccoonCode96)

Go for IT! Raccooncode’s TIL blog.

20210505 TypeSciprt 02 TS에서 활용하는 type(Object, Array, Tuple, Any, Unknown, Never, Void)

3 분 소요

TypeScript02

Object

  • 일반적으로 실제 값을 갖는게 아닌 값을 가진 곳을 가르키는 정보를 가짐
  • TS에서 object는 다른 의미로 사용됨
  • object type는 primitive가 아닌 type이라고 함
  • 즉, oject type <-> primitive type


object literal를 활용하여 만드는 경우

  • object가 아닌 object literal type임, 지정한 타입 그대로가 타입임
  • literal 모양으로 type을 표현
const person1 = { name: "Tom", age: 26 };
//person1 의 type은 object가 아님
// person1은 "{name: string, age: number}" 타입 임


Object 인 전역 내장 객체를 활용하여 만드는 경우

  • object type이거나 null 인 인자를 받음
  • 들어오는 인자는 null 또는 primitive 가 아닌 object type이어야 함
const person2 = Object.create({ name: "jerry", age: 28 });
  • object type에는 string, bool, number, symbol, null, undefined, bigint 는 넣을 수 없으므로 해당 primitive를 제한하고 싶을 때 사용
let obj2: object = {};

obj2 = { name: "tom" };
{
} // (O)

obj2 = [{ name: "tom" }]; // (O)
// array도 object의 일종이라서 넣을 수 있음

ogj2 = "string"; // (X)
ogj2 = 12; // (X)
// 등등..




Array

  • js에서 array는 객체임
  • Array의 경우 공통의 type으로 묶는게 좋음
  • 사용방법 : Array<타입> 또는 타입[]

타입[]

let list: number[] = [1, 2, 3];
let list2: (number | string)[] = [1, 2, 3, "4"]; // union 활용 가능

Array<타입> (충돌 가능성이 있어서 자제)

let list1: Array<number> = [1, 2, 3];




Tuple

  • 각 인덱스마다 type을 줄수 있음 (길이도 일치해야 함)
  • 즉, 순서 길이 모두 일치 해야함
let x: [string, number];

x = ["hello", 39];

const person: [string, number] = ["Tom", 25];

// 잘못된 사용

x = [35, "Not good"]; // 순서 error

x[2] = "word"; // 길이 error

x = ["hello"]; // 길이 error

const [first, second, third] = person; // third에는 받아올 수 없음




any

  • 어떤것이 될지 모르기 때문에 어떤 것이든 할당 가능하다. 라는 느낌
  • return type 지정
  • 최대한 쓰지 않는게 좋음 -> 컴파일 타임에 타입체크가 정상적으로 이뤄지지 않기 때문에
  • 그래서 컴파일 옵션중 any를 명확히 써줘야 하는데 그렇지 않으면 오류를 뱉도록 하는 옵션인 noImplicitAny 라는 옵션이 있음 (strict 옵션에 포함되서 켜짐)
  • any는 계속해서 개체를 통해 전파 됨 (편의는 타입 안전성을 잃는 대가로 오는 것임)
const returnAny = (message: any): any => {
  console.log(message);
};

const any1 = returnAny("아무거나");

any1.toString(); // toString도 any가 됨

let looselyTyped: any = {};

const d1 = looselyTyped.a.b.c.d.e; // 계속해서 any로 아무거나 올수 있게 됨

const leakingAny = (obj5: any) => {
  const a5: number = obj5.num;
  // number로 제한을 해줘야 나중에 맞지 않는 함수인지 check 할수 있음 (number 명시 안하면 any로 전파되서 적절한 함수의 사용이 되었는지 check를 못함)
  const b5 = a5 + 1;
  return b5;
};

const c5 = leakingAny({ num: 0 }); // c5는 any가 됨
// c5.indexOf(0) // number는 indexOf가 없으므로 오류로 잡힘




unknown

  • 응용 프로그램을 작성할 때 모르는 변수의 타입을 묘사해야하는 경우
  • type적으로 누수를 줄이기 위해서
  • 동적 콘텐츠로 부터 오기도 함 (사용자로부터, 또는 API의 모든 값을 의도적으로 수락하기를 원할 수 있음)
  • 컴파일러와 미래의 코드를 읽는 사람에게 이 변수가 무엇이든 될 수 있음을 알려주고 싶을 때
  • unknown의 경우 무조건 한정 되어야 사용할 수 있음 (바로 직접적으로 할당 불가함)
  • any 보다 type safe함
  • 컴파일러가 타입을 추론할 수 있게끔 타입의 유형을 좁히거나, 타입을 확정안해주면 다른곳에 할당 할 수 없고, 사용 불가함
  • runtime error를 줄일 수 있음
  • any 대신 unknown을 사용하도록 하여야 함
declare const maybe: unknown;

const aNumber: number = maybe // Error 바로 할당 불가

Type Guard

  • runtime 때 타입을 한정 시킴
if (maybe === true) {
  // if를 통해서 추론할 수 있게 타입 유형을 좁혀줌
  const aBoolean: boolean = maybe; // 앞의 조건에 맞게 알아서 값을 maybe에 유추해서 넣어줌 (number)

  const atring: string = maybe; // Error
}

if (typeof maybe === "string") {
  const atring: string = maybe; // 앞의 조건에 맞게 알아서 값을 maybe에 유추해서 넣어줌 (string)

  const aBoolean: boolean = maybe; // Error
}




never

  • return에 사용되는 type
  • 어떠한 형태도 return 되지 않거나, 항상 오류를 출력함을 의미 (무한 루프)
  • never 타입은 모든 타입의 subtype이며, 모든 타입에 할당 할수 있음
  • 하지만 , never에는 그 어떤 것도 할당 할 수 없음 (any도 불가능 함)
  • 잘못된 타입을 넣는 실수를 막고자 할 때 사용하기도 함
  • 함수의 바디 부분이 끝나지 않아야 함
const error = (message: string): never => {
	throw new Error(message);
};

const fail = () => {
	return error('failed');
};

const infiniteLoop = (): never => {
	while (true) {}
};

let a6: string = 'hello';
declare const b6: string | number;

if (typeof a6 !== 'string') {
	a6; // string인데 string이 아닌 경우니까 never로 간주됨
}

if (typeof b6 !== 'string') {
	b6; // 나머지인 number가 나옴
}




void

  • return type으로서 사용됨
  • return 값이 없으므로 어떻게 활용하지 않겠다를 명시적으로 표현하고 막는 행위라고 볼 수 있음
  • undefined 만 return 값 (void)으로 할당 가능함
const returnVoid = (message: string) => {
  console.log(message);

  return undefined;
  // return; 이어도 상관 X, return이 없어도 상관x
};

const r = returnVoid("no return"); // X (잘못된 사용)
returnVoid("no return"); // O  (이게 잘 사용한 것임)

참고