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 |
Tags
- 모두의 파이썬
- props
- intellij
- react오류
- Python
- Spring-Framework
- 계산맞추기 게임
- 웹 게임을 만들며 배우는 리액트
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- 거북이 대포 게임
- googleColaboratory
- node.js 설치
- Concurrently
- Colaboratory 글자 깨짐
- vs code 내 node
- Do it 자바스크립트 + 제이쿼리 입문
- 자바스크립트
- 노드에 리액트 추가하기
- node.js로 로그인하기
- DB Browser
- 리액트
- JS 개념
- spring-boot
- 따라하며 배우는 노드 리액트 기본 강의
- 모던자바스크립트
- react
- 인프런
- 타자 게임 만들기
- intllij 내 Bean을 찾지 못해서 발생하는 오류
Archives
- Today
- Total
프로그래밍 삽질 중
[TS] 에러 처리법(interface, class 차이 비교) 본문
출처 : https://github.com/ZeroCho/ts-all-in-one
GitHub - ZeroCho/ts-all-in-one
Contribute to ZeroCho/ts-all-in-one development by creating an account on GitHub.
github.com
* 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
타입캐스팅 (Type Casting) - The Swift Language Guide (한국어)
library가 갖고 있는 Movie,Song인스턴스의 공통 부모는 MediaItem이기 때문에 library는 타입 추론에 의해 [MediaItem] 배열의 형을 갖게 됩니다. library를 순회(iterate)하면 배열의 아이템은 Movie, Song 타입이
jusung.gitbook.io
'과거 프로그래밍 자료들 > 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 |