TypeScript에서 'as' 키워드 지양하기 feat: satisfies 와 is

interface User {
  id: number;
  name: string;
}
 
const onlyUserId = { id: 1 } as User; // 실제로는 name이 없음
console.log(onlyUserId.name.toUpperCase()); // 런타임 에러: Cannot read property 'toUpperCase' of undefined

interface Order {
  id: number;
  items: { name: string; quantity: number }[];
}
// 실제 데이터는 items가 배열이 아니라 문자열입니다.
const orderData = { id: 1, items: "not an array" } as Order;
 
// orderData.items는 실제로 문자열이기 때문에 인덱스로 접근할 수 없습니다.
console.log(orderData.items[0].name); // 런타임 에러 발생: items는 문자열이므로 배열 인덱싱이 불가능

interface Animal {}
 
class Dog implements Animal {
  bark() {
    console.log("bark");
  }
}
 
class Cat implements Animal {
  meow() {
    console.log("meow");
  }
}
 
function makeSound(animal: Animal) {
  (animal as Dog).bark();
}
 
makeSound(new Dog()); // 'bark'
makeSound(new Cat()); // TypeError: animal.bark is not a function

function makeSound(animal: Animal) {
  if (animal instanceof Dog) {
    animal.bark();
  } else if (animal instanceof Cat) {
    animal.meow();
  }
}

function isUser(obj: any): obj is User {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    'id' in obj &&
    'name' in obj &&
    'email' in obj
  );
}
 
function processUser(input: unknown) {
  if (isUser(input)) {
    // 이 블록 안에서 input은 User 타입으로 처리됩니다
    console.log(input.email); // 안전하게 접근 가능
  } else {
    console.log("입력값이 User 형식이 아닙니다");
  }
}

interface BasicUser {
  id: number;
  name: string;
}
const user1 = { id: 1, name: "John", role: "admin" } as BasicUser & { role: string };

type AdminUser = BasicUser & { role: string };
const user2: AdminUser = { id: 1, name: "John", role: "admin" };

// 두 가지 타입의 메시지 정의
type SuccessMessage = {
  type: 'success';
  content: string;
  duration?: number;
};
 
type ErrorMessage = {
  type: 'error';
  content: string;
  errorCode: string;
};
 
// 메시지 타입 유니온
type Message = SuccessMessage | ErrorMessage;
 
// 타입 가드 함수 정의
function isSuccessMessage(message: Message): message is SuccessMessage {
  return message.type === 'success';
}
 
// React 컴포넌트
function MessageDisplay({ message }: { message: Message }) {
  // 타입 가드를 사용하여  props 접근
  if (isSuccessMessage(message)) {
    // 이 블록 내에서는 message가 SuccessMessage 타입으로 처리됨
    return (
      <div className="success-message">
        <p>{message.content}</p>
        {message.duration && <span>자동으로 {message.duration}초 후 사라집니다</span>}
      </div>
    );
  } else {
    // 이 블록 내에서는 message가 ErrorMessage 타입으로 처리됨
    return (
      <div className="error-message">
        <p>{message.content}</p>
        <span>에러 코드: {message.errorCode}</span>
      </div>
    );
  }
}
 
// 사용 예시
function App() {
  const successMsg: Message = {
    type: 'success',
    content: '저장되었습니다!',
    duration: 3
  };
  
  const errorMsg: Message = {
    type: 'error',
    content: '저장에 실패했습니다.',
    errorCode: 'E404'
  };
  
  return (
    <div>
      <MessageDisplay message={successMsg} />
      <MessageDisplay message={errorMsg} />
    </div>
  );
}

// 색상 테마 객체를 정의하는 예시
type RGB = [number, number, number];
type Color = RGB | string;
 
// as 사용 (지양해야 할 방법)
const theme = {
  primary: "blue",
  secondary: [0, 255, 0],
  tertiary: "#ff0000"
} as const;
 
// 이 경우 theme.primary는 string 타입으로 추론되어 자동완성이 제한됨
// theme.secondary에 접근할 때 튜플 메서드를 사용할 수 없음
 
// satisfies 사용 (권장하는 방법)
const betterTheme = {
  primary: "blue",
  secondary: [0, 255, 0],
  tertiary: "#ff0000"
} satisfies Record<string, Color>;
 
// 이제 타입 검사가 이루어지면서도 원래의 타입 정보가 유지됨
// betterTheme.primary는 "blue" 리터럴 타입으로 추론됨
// betterTheme.secondary는 [number, number, number] 튜플 타입으로 추론됨
betterTheme.secondary[1]; // 255에 안전하게 접근 가능

const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;