#9 타입 단언보다는 타입 선언을 사용하기

2022. 12. 28.·🎨 프론트엔드 공부/JS & TS

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리

📍타입을 부여하는 2가지 방법

1️⃣ 타입 선언 (Declaration) : 일반적인 방법 (: type)

2️⃣ 타입 단언 (Assertion) : as 키워드를 사용하여 타입을 강제로 지정하고, 타입 체커에게 오류를 무시하게 함

- 예시

interface Person {
    name: string
}

const alice: Person = { name: "Alice" }; // 타입 선언
const bob = { name: "Bob" } as Person; // 타입 단언

 

⭐ 타입 선언을 사용하는 것이 좋다!

- 이유 : 타입 단언은 타입 체크를 무력화한다

interface Person {
    name: string
}

const steve: Person = {}; // 에러 -> name 프로퍼티가 Person에 있어야 하지만 없음
const michael = {} as Person; // 정상 -> 타입 체크 없이 타입 단언

const john: Person = {
    name: "John",
    occupation: "developer" // 에러 -> Person 타입에 occupation 프로퍼티 없음
}

const ryan = {
    name: "Ryan",
    occupation: "manager"
} as Person // 에러 없음

 

📍타입 단언의 2가지 방법

1️⃣as 키워드 ✅

2️⃣<> : 리액트의 tsx 에서 컴포넌트 태그로 인식되어 잘 안 씀

 

📍 화살표 함수 내부에서 타입 선언하기

- 괄호를 신경쓰지 않으면 뜻밖의 에러를 맞을 수 있다

- 예시

// 아래 코드에서 people 에 Person[] 타입을 부여하려면?
const people = ["alice", "bob", "jan"]
const test = people.map(name => {name}); // 현재는 void[] 타입

// 1st try : 타입 단언
const test1 = people.map(
    name => ({name} as Person)
); // Person[] 타입
// 하지만, 엄밀하게 맞는 방법이 아님 -> {name} 대신 {}를 써도 에러 x

// 2nd try : 타입 선언
const test2 = people.map(name => {
    const person: Person = {name};
    return person
}); // Person[] 타입
// 코드를 더 간결하게 줄일 수 없을까??

// 3rd try : 타입 선언
const test3 = people.map(
    // name에 괄호가 없으면 에러
    // name: Person => {name} // 에러 -> name이 Person 타입이고 반환 타입이 없음
    // (name: Person) => ({name}) // 에러 -> name이 Person 타입이고 반환 타입이 없음
    (name): Person => ({name}) // 반환 값이 Person 타입
);

 

- name: Person 은 콜백함수의 인수인 name에 Person을 부여하려고 하기 때문에 에러가 발생한다

대신, 콜백 함수의 반환값에 Person을 부여해야 한다

 

📍타입 단언이 꼭 필요할 때

- DOM element에 접근할 때는 타입 단언이 필요하다

- 타입스크립트가 DOM에 접근할 수 없기 때문에 DOM element가 없을 수도 있다고 여겨버린다

- 예시

// #mybutton이 null 일 수 있어서 에러 발생하기 때문에 !를 붙여 null 타입이 아님을 단언
// !을 접미사로 쓰면, null의 부정
document.querySelector("#mybutton")!.addEventListener("click", e => {
    e.currentTarget; // EventTarget 타입
    const button = e.currentTarget as HTMLButtonElement;
    button; // HTMLButtonElement 타입
})

 

- 따라서 DOM에 접근할 때는, ! 또는 as를 통해 엘리먼트가 null 타입이 아님을 단언해야 한다

'🎨 프론트엔드 공부/JS & TS' 카테고리의 다른 글
  • #11 잉여 속성 체크의 한계 인지하기
  • #10 객체 래퍼 타입 피하기
  • #8 타입 공간과 값 공간의 심벌 구분하기
  • #7 타입이 값들의 집합이라고 생각하기
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (516) N
      • 🎨 프론트엔드 공부 (253) N
        • JS & TS (92) N
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
#9 타입 단언보다는 타입 선언을 사용하기
상단으로

티스토리툴바