반응형 개발/TypeScript23 async componets를 인식하지 못해서 생기는 에러해결 : ts-ignore와 ts-expect-error next 13 app router를 이용하는 블로그에서 마크다운 code highlighte를 적용시키기 위해 라이브러리를 쓰는데 위와 같은 에러가 났다. 하지만 실행은 잘 되었다. 이 링크에서 해결책을 찾을 수 있었다. 나와 같은 상황이었다. 아래 문구를 추가해주니 에러가 사라졌다. @ts-expect-error Server Component typescript에서 async components를 인식하지 못하기 때문인 것 같다는 의견이 있었다. 어쨌든 빨간줄 위에 @ts-expect-error Server Component 로 에러를 막고 머지를 하는데 vercel preview에서 빌드 에러가 떴다. 공식문서에서 ts-ignore와 ts-expect-error의 차이를 알 수 있었다. ts-expe.. 2023. 10. 11. 구조적 타이핑(structural typing) 구조적 타이핑(structural typing) 자바스크립트는 덕 타이핑 기반이고 타입스크립트는 자바스크립트를 모델링하기 위해 구조적 타이핑을 사용한다. 타입스크립트의 구조적 타이핑을 이야기하려면 먼저 덕 타이핑을 알아야 한다. 덕 타이핑 덕 타이핑을 설명하기 위해 극단적인 예시를 들자면 어떤 새가 오리처럼 울고, 오리처럼 날면 오리라고 생각하는 것이다. 발이 3개더라도 구조적 타이핑 예시 구조적 타이핑은 구조와 정의에 따라 결정되는 타입 시스템인데, 요약하면 덕 타이핑으로 이해해도 된다. 어떤 새가 오리처럼 울고, 오리처럼 날면 오리라고 생각하는 것이다. 발이 3개더라도 위 문장을 생각한채로 아래 코드를 보자. interface NormalBirdType { sound: string; wings: st.. 2023. 9. 5. 잉여타입검사와 덕타이핑 잉여타입검사 타입이 명시된 변수에 객체 리터럴을 할당할 때 타입스크립트는 해당 타입의 속성이 있는지 그 외 속성은 없는지 총 두가지를 검사한다. 이는 덕타이핑에 반하는 내용이라 헷갈린다. 잉여타입검사 예시 다음 코드에서는 당연히 Room타입이 할당된 r에서 타입 에러가 나타난다. Room 타입에 없는 elephant가 나타났기 때문이다. 덕 타이핑을 생각하면 에러가 나타나지 않아야 하지만 일단 넘어가자. interface Room { numDoors: number; ceilingHeightFt: number; } const r: Room = { numDoors: 1, ceilingHeightFt: 10, elephant: "present", // 개체 리터럴은 알려진 속성만 지정할 수 있으며 'Room'.. 2023. 9. 2. 타입 단언할때 unknown이 나타나는 이유 타입 단언할때 unknown이 나타나는 이유 타입 단언 가끔씩은 개발자의 타입판단이 타입스크립트의 타입추론보다 정확할때가 있다. 그럴때는 as를 통해 타입 단언을 하는 것이 낫다. 예를 둘어, DOM 엘리먼트에 대해서는 타입스크립트보다 개발자가 더 정확히 알고 있다. 타입스크립트는 DOM에 접근할 수 없기 때문에 엘리먼트에 대해 정확히 알지 못한다. 타입 단언은 컴파일중에 제거되므로, 타입체커가 되지 않는다. 따라서 개발자의 판단이 틀렸다면 런타임중에 에러가 발생할것이다. 때문에 확신할 수 있을때만 타입단언을 사용해야 한다. 타입 단언이 위험하다고 판단되는 경우 타입단언으로 임의 타입간에 항상 변환이 가능한 것은 아니다. 한쪽이 다른쪽의 서브타입일 경우에 타입 단언이 가능하다. 예를 들어 다음과 같은 경.. 2023. 9. 2. 이전 1 2 3 4 ··· 6 다음 반응형
