Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- Colaboratory 글자 깨짐
- react
- vs code 내 node
- react오류
- Concurrently
- 웹 게임을 만들며 배우는 리액트
- googleColaboratory
- spring-boot
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- JS 개념
- DB Browser
- 모두의 파이썬
- 모던자바스크립트
- 리액트
- intellij
- 인프런
- 노드에 리액트 추가하기
- node.js 설치
- node.js로 로그인하기
- Python
- 따라하며 배우는 노드 리액트 기본 강의
- Spring-Framework
- 자바스크립트
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- 계산맞추기 게임
- 타자 게임 만들기
- props
- Do it 자바스크립트 + 제이쿼리 입문
- 거북이 대포 게임
Archives
- Today
- Total
프로그래밍 삽질 중
[TS] 에러 처리법(interface, class 차이 비교) 본문
출처 : https://github.com/ZeroCho/ts-all-in-one
* interface와 class를 각각 언제 써야 하나?
▶ interface
- 자바스크립트로 변환 시 사라짐
- instanceof 키워드 못 씀
- interface 자체를 타입가드에서 사용 불가
▶ class
- 자바스크립트로 변환 시 유지됨
- instanceof 키워드 사용 가능
- interface 자체를 타입가드에서 사용 가능
(문제 있는 코드) [예시]
interface Axios {
get(): void;
}
interface CustomError extends Error {
response?: {
data: any;
}
}
declare const axios: Axios;
(async () => {
try {
await axios.get();
} catch(err: unknown) {
console.error((err as CustomError).response?.data);
//문제
//위에서 에러를 정해줬으나 아래에 넣을 경우 까먹음 = 일회성
//err 관련해서 err as CustomError 넣어줘야 함
(err as CustomError).response?.data
}
})();
(문제 있는 코드) [예시 - 변경했으나 여전히 오류 있음, err가 반드시 CustomError라는 보장 없음]
interface Axios {
get(): void;
}
interface CustomError extends Error {
response?: {
data: any;
}
}
declare const axios: Axios;
(async () => {
try {
await axios.get();
} catch(err: unknown) {
const customError = err as CustomError
console.error(customError.response?.data);
customError.response?.data
}
})();
//as는 unknown일 때 사용
(최종) [예시]
▶ interface → class 변경
▶ err가 CustomError가 되도록 타입가드 사용
interface Axios {
get(): void;
}
class CustomError extends Error {
response?: {
data: any;
}
}
declare const axios: Axios;
(async () => {
try {
await axios.get();
} catch(err) {
//err instanceof CustomError(타입가드) 있기 전 err는 unknown이었으나 있으면 커스텀 에러로 좁혀짐
//타입가드로 범위 좁혀놨으면 as 사용하지 않아도 됨
if(err instanceof CustomError) {
//as를 붙이는 건 사람이 함 = 실수 있을 수 있음
// const customError = err as CustomError
console.error(err.response?.data);
err.response?.data
}
}
})();
* unknown과 any 차이
- unknown : 타입 캐스팅을 하든 타입가드를 하든 안전하게 쓰라는 의미
- any : 타입검사 포기(모든 게 다 가능)
* 참고 : https://jusung.gitbook.io/the-swift-language-guide/language-guide/18-type-casting
'과거 프로그래밍 자료들 > Javascript&typescript' 카테고리의 다른 글
[TS] (utility types)Required, Record, NonNullable 타입 분석 (0) | 2022.09.18 |
---|---|
[TS] (utility types)Partial, Pick & Omit, Exclude, Extract 타입 분석 (0) | 2022.09.18 |
[TS] 공변성, 반공변성, 오버로딩 (0) | 2022.09.18 |
[TS] forEach, map, filter 제네릭 분석 (0) | 2022.09.16 |
TypeScript 개념 - 3 (0) | 2022.09.16 |