Closed hyeyoonS closed 2 months ago
typeof 연산자
let value = "Hello, World!";
if (typeof value === "string") {
console.log("value는 문자열입니다.");
}
instanceof 연산
class Person {}
let person = new Person();
if (person instanceof Person) {
console.log("person은 Person 클래스의 인스턴스입니다.");
}
in 연산자
let animal = { dog: "mung", cat: "yaong" };
if ("dog" in animal) {
console.log("animal 객체에 dog 프로퍼티가 존재합니다.");
}
/** typeof
* 원시 타입을 좁히는 데 사용한다.
*/
type PrimitiveTypes = number | string;
const test = (param: PrimitiveTypes): string => {
if (typeof param === "number") {
return 'isNumber'
}
return 'isNaN'
}
/** instanceof
* 인스턴스화된 객체가 특정 클래스의 인스턴스인지 확인할 때 사용
*/
const onKeyDown = (e: React.KeyboardEvent) => {
if (e.target instanceof HTMLInputElement && e.key === "Enter") {
e.target.blur();
}
}
/** in
* 객체에 특정 속성이 있는지 확인할 때 사용
*/
interface Circle {
radius: number;
}
interface Rectangle {
width: number;
height: number;
}
type Shape = Circle | Rectangle
function area(shape: Shape): number {
if ('width' in shape) return shape.width * shape.height;
return 3.14 * shape.radius ** 2
}
/** 사용자 정의 타입 가드 함수
* is 연산자를 사용하여 함수의 반환 타입을 특정 조건에 만족할 때 타입 좁히기를 사용한다.
*/
const isDestinationCode = (x: string): x is DestinationCode => destinationCodeList.includes(x);
const getAvailableDestinationNameList = async (): Promise<DestinationName[]> => {
const data = await AxiosRequest<string[]>("get", ".../destinations");
const destinationNames: DestinationName[] = [];
data?.forEach(str => {
if (isDestinationCode(str)) {
destinationNames.push(destinationNameSet[str]);
}
})
}
typeof 연산자로 검사할 수 있는 타입 목록
const replaceHyphen: (date: string | Date) => string | Date = (date) => {
if (typeof date === "string") {
//이 분기에서는 date의 타입이 string으로 추론된다
return date.replace(/-/g, "/");
}
return date;
};
내장 클래스
, 직접 만든 클래스
에만 사용이 가능한 연산 (직접 만든 타입에는 X)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());
}
}
A in B
: A 라는 속성이 B 객체에 존재 하는지를 검사직접 만든 타입
에 사용 가능type Person = {
name: string;
age: number;
};
function func(value: number | string | Date | null | Person) {
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());
} else if (value && "age" in value) {
console.log(`${value.name}은 ${value.age}살 입니다`)
}
}
type Dog = {
name: string;
isBark: boolean;
};
type Cat = {
name: string;
isScratch: boolean;
};
type Animal = Dog | Cat;
function warning(animal: Animal) {
if ("isBark" in animal) {
console.log(animal.isBark ? "짖습니다" : "안짖어요");
} else if ("isScratch" in animal) {
console.log(animal.isScratch ? "할큅니다" : "안할퀴어요");
}
}
Boolean
값을 반환하는 함수를 이용해 타입 가드를 만들 수 있도록 도와주는 타입스크립트의 문법A is B
// Dog 타입인지 확인하는 타입 가드
function isDog(animal: Animal): animal is Dog {
return (animal as Dog).isBark !== undefined;
}
// Cat 타입인지 확인하는 타입가드
function isCat(animal: Animal): animal is Cat {
return (animal as Cat).isScratch !== undefined;
}
function warning(animal: Animal) {
if (isDog(animal)) {
console.log(animal.isBark ? "짖습니다" : "안짖어요");
} else {
console.log(animal.isScratch ? "할큅니다" : "안할퀴어요");
}
}
❓문제
(1) 자바스크립트 연산자를 이용한 3가지의 대표적인 타입가드 연산자( typeof/instanceof/in)와 사용자 정의 타입가드를 사용하는 연산자를 말해주세요! (2) 각각의 연산자 어떤 상황에서 사용이 되는지 간단하게 설명해주세요.
🎯답변
[자바스크립트 연산자를 사용한 타입 가드]
1. typeof 연산자
예제
2. instanceof 연산자
3. in 연산자
예제
[사용자 정의 타입 가드]
예제