[TypeScript]TypeScript 이해하기(1) - 타입 집합 / 추론 / 단언

✨타입과 집합

타입은 여러 개의 값을 포함하는 집합으로 생각할 수 있다. 그리고 타입 간에는 서로 포함 관계(슈퍼-부모 타입, 서브-자식 타입)이 존재한다.

 

✔타입 호환성

A와 B 두개의 타입이 존재할 때 A 타입의 값을 B 타입으로 취급해도 괜찮은지 판단하는 것

• 업캐스팅: 서브 타입의 값을 슈퍼 타입의 값으로 취급하는 것 ✔
• 다운캐스팅: 반대로 슈퍼 타입의 값을 서브 타입의 값으로 취급하는 것 ✖

→ 집합의 포함 관계처럼 업캐스팅은 모든 상황에 가능하지만, 다운 캐스팅은 대부분의 상황에 불가하다.

 

✔Unknown(전체 집합)

모든 서브 타입을 부분집합으로 갖는 전체 집합으로 unknown 타입 변수에 모든 타입의 값을 할당할 수 있다. 반대로 unknown 타입의 값은 any를 제외한 어떠한 타입의 변수에도 할당할 수 없다.

 

✔Never(공집합)

never은 타입 계층도에서 가장 아래의 공집합을 의미한다. 공집합은 아무 것도 없음을 의미하며 never 타입 변수에는 어떤 타입의 값도 할당할 수 없다. 반대로 never 타입은 모든 타입으로 업캐스팅 할 수 있다.

 

✔Void

undefined는 슈퍼 타입이므로 void로 선언한 함수에서 undefined를 반환해도 오류가 발생하지 않는다. void타입에는 undefined, never 타입만 할당할 수 있다.

 

✔Any

타입 계층도를 완전히 무시하는 치트키 타입이다. 모든 타입의 슈퍼타입이 될 수도 있고 모든 타입의 서브 타입이 될 수도 있다.

 

✨ 객체 타입의 호환성

객체도 객체가 담는 프로퍼티 구조에 따라 슈퍼~서브 관계가 만들어질 수 있다.

type Animal = {
  name: string;
  color: string;
};

type Dog = {
  name: string;
  color: string;
  breed: string;
};

let animal: Animal = {
  name: "기린",
  color: "yellow",
};

let dog: Dog = {
  name: "돌돌이",
  color: "brown",
  breed: "진도",
};

animal = dog; // ✅ OK (∵ 서브 타입인 dog를 슈퍼 타입인 animal에 할당하는 업캐스팅)
dog = animal; // ❌ NO (∵ 슈퍼 타입인 animal를 서브 타입인 dog에 할당하는 다운캐스팅)

 

✔초과 프로퍼티 검사

변수를 객체 리터럴로 초기화할 때는 타입에 정의된 프로퍼티 외의 다른 초과된 프로퍼티를 갖는 객체를 변수에 할당하지 못하도록 초과 프로퍼티 검사가 발동된다.

• 변수를 초기화할 때 객체 리터럴을 사용하지만 않으면 발생하지 않는다. 즉, 값을 별도의 다른 변수에 보관한 다음 변수 값을 초기화 값으로 사용하면 발생하지 않는다.

interface Person {
  name: string;
  age: number;
}

const personData = {
  name: "Alice",
  age: 25,
  job: "Engineer" // 초과 프로퍼티 포함
};

const person: Person = personData; // 오류 없음

• 초과 프로퍼티 검사는 함수의 매개변수에도 동일하게 발생하며, 이 때도 변수에 미리 값을 담아둔 다음 변수값을 인수로 전달하면 발생하지 않는다.

interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  console.log(`Hello, ${person.name}`);
}

// 초과 프로퍼티 검사 발생
greet({
  name: "Alice",
  age: 25,
  job: "Engineer" // 오류: 'job' 프로퍼티는 Person 타입에 존재하지 않음
});

 

✨ 대수 타입 - 합집합, 교집합

✔합집합(Union)

// Union 타입
let a: string | number | boolean;

a = 1;
a = "hello";
a = true;

// Union 배열 타입
let arr: (number | string | boolean)[] = [1, "hello", true];

// Union 객체 타입
type Dog = {
  name: string;
  color: string;
};

type Person = {
  name: string;
  language: string;
};

type Union1 = Dog | Person;

 

✔교집합(Intersection)

// Intersection 타입
let variable: number & string; // never 타입으로 추론
// 대다수의 기본 타입들 간에는 서로 공유하는 교집합이 없기 때문에 Intersection 타입은 보통 객체 타입에서 사용됨

// Intersection 객체 타입
type Dog = {
  name: string;
  color: string;
};

type Person = {
  name: string;
  language: string;
};

type Intersection = Dog & Person;

let intersection1: Intersection = {
  name: "",
  color: "",
  language: "",
};

 

✨타입 추론

✔타입추론

타입스크립트에서 타입이 정의되어 있지 않은 변수의 타입을 자동으로 추론하는 것

 

✔타입 추론이 가능한 상황들

1. 변수 선언

: 일반적인 변수 선언의 경우 초기값을 기준으로 타입이 추론된다.(객체 포함)

let age = 30; // number로 추론됨
let name = "Alice"; // string으로 추론됨

let person = {
  name: "Alice",
  age: 30
}; // { name: string; age: number }로 추론됨

2. 구조 분해 할당

let person = {
  name: "Alice",
  age: 30
};

let { name, age } = person; // name은 string, age는 number로 추론됨

const [first, second] = [10, "hello"]; // first는 number, second는 string으로 추론됨

3.함수의 반환값

function getPerson() {
  return {
    name: "Alice",
    age: 30
  };
}

const person = getPerson(); // { name: string; age: number }로 추론됨

4.기본값이 설정된 매개변수

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}

greet(); // name은 string으로 추론됨

 

✔주의해야할 상황들

1. 암시적으로 any 타입으로 추론

암시적으로 추론된 any 타입은 코드의 흐름에 따라 타입이 계속 변화한다. 이를 any의 진화라고 한다.

let d;
// 변수 선언 시 초기값을 생략하면 any로 추론된다.
// 매개변수의 타입이 암시적 any로 추론될 때와 달리 일반 변수의 타입이 any로 추론되는 상황은 오류로 판단하지 않는다.

d = 10; // 암시적 any 타입의 변수에 값을 할당하면
d.toFixed(); // 다음 라인부터 any 타입이 해당 값의 타입으로 변화한다.

d = "hello"; // 여기에 다른 값을 할당하면 또 그 값에 맞는 타입으로 변화한다.
d.toUpperCase();
d.toFixed(); // 오류! string 타입에 number 메서드를 사용하려 함

2. const 상수의 추론

const num = 10;과 const str = "hello";는 각각 number와 string 타입으로 추론되는 것이 아니라, 리터럴 타입인 10과 "hello"로 추론된다. 이 특징은 TypeScript의 리터럴 타입 추론 기능으로, 특정 값만을 가질 수 있는 고정된 타입을 제공해 코드의 타입 안전성을 더욱 강화한다.

const num = 10;
// 10 Number Literal 타입으로 추론

const str = "hello";
// "hello" String Literal 타입으로 추론

 

✔최적의 공통 타입

// 다양한 타입의 요소를 담은 배열을 변수의 초기값으로 설정하면, 최적의 공통 타입으로 추론된다.

let arr = [1, "string"];
// (string | number)[] 타입으로 추론

 

✨ 타입 단언

값 as 타입으로 특정 값을 원하는 타입으로 단언하는 것이다.

용도 → 특정 구조 타입이 설정된 객체 변수에 초기값으로 빈 객체를 넣고 싶을 때, 초과 프로퍼티 검사를 피할 때

1. 특정 구조 타입이 설정된 객체 변수에 초기값으로 빈 객체를 넣고 싶을 때

interface Person {
  name: string;
  age: number;
}

let person = {} as Person;
// 초기값으로 빈 객체를 넣고 싶지만, 타입 단언을 통해 빈 객체가 Person 타입임을 명시함

// 이후에 필요한 속성을 추가
person.name = "Alice";
person.age = 25;

2. 초과 프로퍼티 검사를 피할 때

interface Person {
  name: string;
  age: number;
}

const person = {
  name: "Alice",
  age: 25,
  job: "Engineer"
} as Person;

// 'job' 속성은 Person 타입에 정의되어 있지 않지만, 초과 프로퍼티 검사를 피하기 위해 as를 사용함

 

✔타입 단언의 조건

값 as 타입 형식의 단언식을 A as B로 표현했을 때 아래의 두 조건 중 한 가지를 반드시 만족해야 한다.

• A가 B의 슈퍼타입이다.
• A가 B의 서브타입이다.

let num1 = 10 as never;   // ✅
let num2 = 10 as unknown; // ✅

let num3 = 10 as string;  // ❌

 

✔다중 단언

타입 단언은 다중으로 가능하고, 이를 이용하면 앞의 불가능했던 단언 예제를 가능하게 만들 수 있다.

하지만 이것은 실제로 그 값을 해당 타입의 값으로 바꾸는 것이 아니라 단순 눈속임에 불과하며 오류 발생 확률을 높이기 때문에 꼭 필요한 상황에서만 사용하는 것이 좋다.

let num3 = 10 as unknown as string;

 

 

✔const 단언

특정 값을 const 타입으로 단언하면 마치 변수를 const로 선언한 것과 같이 리터럴 타입으로 변경된다.

let name = "Alice";
// name의 타입은 string으로 추론됨

const nameConst = "Alice";
// nameConst의 타입은 "Alice"라는 리터럴 타입으로 추론됨

let nameAsConst = "Alice" as const;
// nameAsConst의 타입은 "Alice"라는 리터럴 타입으로 추론됨

 

✔Not Null 단언

값 as 타입을 따르지 않는 단언으로, 값 뒤에 느낌표(!)를 붙여주면 이 값이 undefined이거나 null이 아닐 것으로 판단할 수 있다.

type Post = {
  title: string;
  author?: string;
};

let post: Post = {
  title: "게시글1",
};

const len: number = post.author.length; // 오류! post.author가 undefined가 가능하다고 여겨진다.

const len: number = post.author!.length;
// !를 붙여 post.author가 non null 임을 단언해서 오류를 해결한다.

 

✨타입 좁히기

조건문을 이용해 조건문 내부에서 변수가 특정 타입임을 보장하면 해당 조건문 내부에서는 변수의 타입이 보장된 타입으로 좁혀지는 것

if(typeof === …) 처럼 조건문과 함께 사용해 타입을 좁히는 이런 표현들을 “타입 가드”라고 부른다.

 

✔instanceof 타입가드

instanceof는 number나 string과 같은 기본 자료형에는 사용할 수 없다. instanceof 연산자는 객체가 특정 클래스나 생성자의 인스턴스인지 확인하는데 사용되며, 기본 자료형이 아닌 객체 타입에만 적용된다.

// 내장 클래스 타입(아래 예제의 Date)에 사용 가능
function func(value: number | string | Date | null) {
  if (typeof value === "number") {
    console.log(value.toFixed());
  } else if (typeof value === "string") {
    console.log(value.toUpperCase());
  } else if (value instanceof Date) {
    console.log(value.getTime());
  }
}

 

✔in 타입가드

in 타입가드는 TypeScript에서 객체에 특정 프로퍼티가 존재하는지 검사하는 방법이다. 이를 통해 TypeScript는 해당 프로퍼티가 존재할 경우, 해당 프로퍼티 타입을 안전하게 추론할 수 있다. in 연산자는 주로 유니온 타입에서 특정 프로퍼티가 포함된 타입을 구분하는데 사용된다.

interface Dog {
  bark: () => void;
}

interface Cat {
  meow: () => void;
}

function makeSound(animal: Dog | Cat) {
  if ('bark' in animal) {
    animal.bark(); // TypeScript는 animal이 Dog 타입임을 추론
  } else {
    animal.meow(); // TypeScript는 animal이 Cat 타입임을 추론
  }
}

 

✨ 서로소 유니온 타입

“서로소 유니온 타입”이란 교집합이 없는 타입들 즉 서로소 관계에 있는 타입들을 모아 만든 유니온 타입이다.

type Admin = {
  name: string;
  kickCount: number;
};

type Member = {
  name: string;
  point: number;
};

type Guest = {
  name: string;
  visitCount: number;
};

type User = Admin | Member | Guest;

function login(user: User) {
  if ("kickCount" in user) {
		// Admin
    console.log(`${user.name}님 현재까지 ${user.kickCount}명 추방했습니다`);
  } else if ("point" in user) {
		// Member
    console.log(`${user.name}님 현재까지 ${user.point}모았습니다`);
  } else {
		// Guest
    console.log(`${user.name}님 현재까지 ${user.visitCount}번 오셨습니다`);
  }
}

위와 같은 회원 관리 프로그램에서 3개의 타입을 구별하기 위한 조건식을 직관적이지 못하다. 따라서 다음과 같이 각 타입에 태그 프로퍼티를 추가할 수 있다.

type Admin = {
  tag: "ADMIN";
  name: string;
  kickCount: number;
};

type Member = {
  tag: "MEMBER";
  name: string;
  point: number;
};

type Guest = {
  tag: "GUEST";
  name: string;
  visitCount: number;
};

// 태그 프로퍼티를 통해 3개의 서로소 유니온 타입을 더 직관적으로 구별할 수 있게 되었다.
function login(user: User) {
  if (user.tag === "ADMIN") {
    console.log(`${user.name}님 현재까지 ${user.kickCount}명 추방했습니다`);
  } else if (user.tag === "MEMBER") {
    console.log(`${user.name}님 현재까지 ${user.point}모았습니다`);
  } else {
    console.log(`${user.name}님 현재까지 ${user.visitCount}번 오셨습니다`);
  }
}

// switch를 이용한 더 직관적인 조건 분류도 가능하다.
function login(user: User) {
  switch (user.tag) {
    case "ADMIN": {
      console.log(`${user.name}님 현재까지 ${user.kickCount}명 추방했습니다`);
      break;
    }
    case "MEMBER": {
      console.log(`${user.name}님 현재까지 ${user.point}모았습니다`);
      break;
    }
    case "GUEST": {
      console.log(`${user.name}님 현재까지 ${user.visitCount}번 오셨습니다`);
      break;
    }
  }
}