글 작성자: 망고좋아
반응형

🎯 타입스크립트 타입 단언 (Type Assertion)

  • 타입스크립트가 추론하지 못하는 타입을 as키워드를 통해 명시해주는 것
  • 사용법 : 변수 as 타입
  • chaining 하는 경우 변수를 괄호로 감싼 뒤 그 안에서 as 키워드를 사용
  • as뒤에 명시하고자 하는 데이터 타입을 작성해주면 된다.
  • 실제 데이터 타입을 변경하지 않고 타입 에러가 나지 않게끔만 해준다.

 

📝 Type Casting과 Type Assertion의 차이점

  • Type casting : 데이터의 타입을 변환 ⇒ 실제 타입이 변하는 것
  • Type assertion : 데이터의 타입을 명시 ⇒ 데이터 타입에 영향을 안 준다.

 

📝 Type Assertion 사용법

// as
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;

// 꺾쇠(Angle bracket), 타입 단언
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length; // unknown 타입이지만 Type Assertion을 통해서 타입 추론을 가능하게 해준다.
  • unknown 타입이지만 Type Assertion을 통해서 타입 추론을 가능하게 해준다.
  • 주의!!!!! react의 JSX에서는 꺽쇠 괄호를 통한 type assertion은 태그와 혼동되기 때문에 잘 사용하지 않는다. ⇒ as 사용

 

📝 타입 선언(Declaration)과 타입 단언(Assertion) 차이점!

type Duck = {
    꽥꽥: () => void;
    헤엄: () => void;
};

const duck = {} as Duck; // 타입 단언

// 타입 선언
const duck: Duck = {
    꽥꽥() {
        console.log("꽥꽥");
    },
    헤엄() {
        console.log("어푸어푸?");
    },
};
  • 타입 단언은 타입스크립트가 개발자의 말만 믿고 Duck 타입으로 인식하여 빈 객체임에도 에러를 발생시키지 않는다.
  • 타입 선언은 객체 프로퍼티를 모두 채우도록 강제하기 때문에 실수를 저지를 위험이 낮다.
반응형