2025 / 02 / 27
오늘 수업 시간에는 타입 캐스팅과 유니온 타입에 대해 배웠습니다.
어제 수업에서 잠깐 보고 지나간 부분을 자세하게 알아보는 시간을 가졌습니다.
타입 캐스팅의 이점과 한계점 / 유니온 타입에 대해 간략하게 포스팅 하도록 하겠습니다.
💌 타입 캐스팅
- 타입 캐스팅은 한 타입의 값을 다른 타입으로 변환하는 것을 의미합니다.
- 타입 캐스팅을 하려고 하면, 자바스크립트에서는 실제로 값이 변하지 않습니다.
- 컴파일러가 해당 값이 특정 타입으로 취급되도록 알려주는 역할을 합니다.
const idol = "보이넥스트도어"; console.log(idol.split("")) // 문자열을 하나하나 나눔 -> ['보', '이', '넥', '스트', '도', '어']
- idol.split("")은 문자열을 배열로 변환하는 코드입니다.
- 문자열은 기본적으로 split 메서드를 사용할 수 있습니다.
- 해당 메서드의 사용으로 idol 변수의 타입이 string임을 알 수 있습니다.
💌 any 타입
- any 타입은 "어떤 타입이든 될 수 있다"라는 의미를 가지고 있습니다.
- 자바스크립트에서의 변수를 선언하는 것처럼, 타입을 강제하지 않습니다.
- 타입 검사를 하지 않기 때문에 어떤 메서드를 사용할지 타입스크립트가 추론할 수 없습니다.
let testNumber: any = 5;
- any 타입은 너무 많이 사용하면 TypeScript의 장점인 타입 안전성을 잃게 될 수 있습니다.
- any 타입을 사용하는 것은 필요할 때만 사용해야 합니다.
💌 타입 단언
- 타입스크립트에게 "내가 지정한 타입이 맞다"라고 강제로 알려주는 방식입니다.
- 값 자체가 바뀌는 것이 아니라, 타입스크립트가 이 값을 다른 타입처럼 다루게 만듭니다.
console.log(typeof (testNumber as String)); // number
- testNumber as String을 사용하여 testNumber가 String 타입처럼 다뤄지도록 단언했습니다.
- 실제로 testNumber 값은 숫자 5이고, 타입도 number로 유지됩니다.
- typeof (testNumber as String)의 결과는 여전히 number입니다.
1. 활용
- 타입 단언을 통해 타입을 강제로 바꾸거나 다른 타입처럼 다루는 경우가 많습니다.
- 예시로는 any 타입으로 선언된 변수에서 특정 메서드를 사용하려 할 때, 타입 단언을 사용하여 string 타입으로 취급하게 할 수 있습니다.
// any 타입인 testNumber를 String 타입처럼 다룰 수 있도록 단언합니다. console.log((testNumber as String).toUpperCase()); // toUpperCase() 메서드 사용 가능
- testNumber는 숫자 5이지만, as String을 통해 toUpperCase( ) 메서드를 사용할 수 있습니다.
- 숫자에는 toUpperCase( ) 메서드가 없기 때문에 오류가 발생합니다.
2. 사용 이유
- as 연산자를 사용하여 컴파일러에게 강제로 타입을 알려주는 방식을 사용합니다.
let data: any = "5"; (data as String).trim(); // trim() 메서드 사용 가능
- data 변수는 실제로 "5"라는 문자열이지만, TypeScript에게 String 타입이라고 단언하여 trim( ) 메서드를 사용할 수 있습니다.
3. 주의점
- 타입 단언은 실제 값의 타입을 변경하는 것이 아니라, 타입스크립트에게 "이 값은 내가 말하는 타입" 이라고 알려주는 것입니다.
- 단언한 값에 대해 잘못된 메서드를 사용하거나 예상치 못한 동작을 할 수 있습니다.
- 잘못된 타입 단언을 사용하면 타입스크립트가 컴파일 단계에서 오류를 잡지 못할 수 있기 때문에, 타입 단언을 사용할 때는 항상 확실한 타입을 알고 있어야 합니다.
💌 Union
- 유니온 타입은 두 가지 이상의 타입 중 하나가 될 수 있음을 의미합니다.
- 한 변수나 매개변수가 여러 타입 중 하나로 값을 가질 수 있도록 해주는 타입스크립트의 기능입니다.
|기호를 사용하여 여러 타입을 연결할 수 있습니다.- string | number는 문자열 또는 숫자를 가질 수 있다는 뜻입니다.
1. 기본 사용
- 유니온 타입은
|기호로 여러 타입을 연결하여 선언합니다.- 변수나 매개변수가 여러 타입 중 하나의 값을 가질 수 있습니다.
type SringOrBooleanType = string | boolean; let stirngOrBoolean: SringOrBooleanType = "보이넥스트도어"; // 문자열 타입 stirngOrBoolean = true; // 논리형 타입
- SringOrBooleanType 타입이 string과 boolean을 유니온 타입으로 정의하고, 이를 사용한 변수는 문자열 또는 불리언 값을 가질 수 있습니다.
- state 변수는 "DONE", "LOADING", "ERROR" 중 하나의 값만 가질 수 있게 정의되었습니다.
- 이 외의 값을 넣으면 컴파일 오류가 발생합니다.
type StateTypes = "DONE" | "LOADING" | "ERROR";
let state: StateTypes = "DONE";
state = "LOADING"; // 정상
// 오류: "INITINAL"은 유니온 타입에 정의된 값이 아니므로 오류 발생
// state = "INITINAL"; 2. 리스트의 유니온
- 배열의 각 항목은 정의된 유니온 타입 중 하나여야 합니다.
type StringListOrBooleanList = (string | boolean)[]; let stringOrBooleanList: StringListOrBooleanList = ["이한", "리우"]; stringOrBooleanList = [true, false, "1"]; // 가능
- StringListOrBooleanList 타입이 string 또는 boolean이 될 수 있는 값들을 가지는 배열입니다.
- 배열의 각 요소가 string이거나 boolean이어야 합니다.
- string, number, undefined, null 값들을 가지는 배열을 정의하고 사용한 예입니다.
type StrOrNumberList = (string | number | undefined | null)[]; let strOrNumberList: StrOrNumberList = [1, 2, 3, "4", "5", undefined, null];
3. Interface와 유니온
- 여러 인터페이스를 하나의 타입으로 결합하면, 해당 변수는 그 중 하나의 인터페이스 형태를 가질 수 있게 됩니다.
interface Animal {
name: string;
age: number;
}
interface Human {
name: string;
age: number;
address: string;
}
type AnimalOrHumanType = Animal | Human;
let animalOrHuman: AnimalOrHumanType = {
name: "몽실이",
age: 4,
address: "대한민국", // Human 타입에만 존재하는 속성
};
- animalOrHuman 변수는 Animal 타입 또는 Human 타입을 가질 수 있습니다.
- Human 타입에만 존재하는 address 속성에 접근할 수 있지만, Animal 타입에는 address가 없기 때문에 접근이 불가능합니다.
// 정상: Human 타입에만 존재하는 address 속성에 접근
console.log(animalOrHuman.address);
// 오류: Animal 타입에는 address 속성이 없기 때문에 오류 발생
// console.log(animalOrHuman.address); // 오류
- as 키워드를 사용하여 타입 단언을 통해 접근할 수도 있습니다.
console.log((animalOrHuman as Human).address);
// Animal 타입이 아닌 Human 타입으로 간주4. 복잡한 유니온 사용
- 유니온 타입을 이용하여, 여러 속성을 가진 복잡한 타입을 만들 수도 있습니다.
- Person과 Cat이라는 두 타입을 유니온으로 결합하는 경우, Person과 Cat에 각각 다른 속성이 있으므로, 값을 할당할 때 두 타입 중 하나만 사용해야 합니다.
type Person = {
name: string;
age: number;
};
type Cat = {
breed: string;
country: string;
};
type PersonOrCat = Person | Cat;
const personOrCat: PersonOrCat = {
name: "jinha",
age: 23,
// breed: "야옹", // Person 타입에는 breed 속성이 없음
country: "대한민국",
};- personOrCat은 Person 타입이나 Cat 타입을 가질 수 있습니다.
- Person 타입에는 breed나 country 속성이 없기 때문에 Person 타입의 값에는 breed 속성을 넣을 수 없습니다.
37일차 후기
- 타입 캐스팅과 유니온에 대해 다시 정리할 수 있는 시간이었습니다.
- 타입 단언이라는 부분이 처음에는 어려웠는데 두 번 보니까 조금 괜찮아졌습니다.
- 프로젝트에 아직 사용을 안해봐서 그런지는 모르겠지만! 아직은 안어려운거 같습니다.
- 객체 형태를 사용하는게 아직은 어려운거 같아서 더 공부해야겠습니다. (• ˙ ˘ ˙ •)↝
૮꒰ ྀི〃´꒳`〃꒱ა