My Boundary As Much As I Experienced

보호되어 있는 글입니다.

보호되어 있는 글입니다.

지금 만드는 토큰 환전 페이지에서 공통 컴포넌트인 Input을 사용해야되는 상황이 있었다.input은 사용자 입력이 올바르지 않을 경우 에러 메시지를 표출한다.이때 인풋의 타입이 NUMBER인지 STRING인지에 따라 에러메시지가 달랐다. 처음에는 이를 아래처럼 유니언 타입으로 설계하였다.message: NUMBER_VALUE | STRING_VALUE;setMessage: (value: NUMBER_VALUE | STRING_VALUE) => void;  유니온 타입의 한계 그런데 위처럼 유니언 타입으로 설계하면 타입스크립트가 항상 다른 타입의 가능성을 경고하게된다.예를 들어 NUMBER_VALUE를 쓸 때 타스가 STRING_VALUE의 가능성을 계~속 경고한다... if (message typeof..

constant객체를 효과적으로 관리하는 방법타입스크립트로 상수 객체를 관리하다보면, 이에 대응하는 타입들이 필요할 때가 있다. 특히 대괄호 접근자 'obj[key]' 형식으로 접근할 때 key가 그냥 string타입이면'string은 KEY1 | KEY2 | KEY3 | ...에 할당할 수 없다'라는 식의융통성 없는 에러 때문에 애먹은 적이 다들 있을 것이다. 옛날에 타입스크립트를 처음 쓸 때는 위 에러를 어떻게 고칠지 몰라 아래처럼 key들을 따로 타입화하여 해결하려했다.그러나 아래 코드는 최선이 아니다. 왜냐하면 CONSTOBJ에 다른 속성이 추가되면ConstObjType과 CONSTOBJ_KEY에도 일일이 한 번 씩 더 써줘야한다는 번거로움이 있기 때문이다.// 초보의 타입스크립트 사용법inter..

문제점아래처럼 특정 에러 시 에러 메시지를 표출해주려 했는데타입스크립트가 errorResponse.data의 타입을 추론해내지 못했다. let errorResponse = (error as AxiosError).response; if (errorResponse?.status === 400) { // 'errorResponse.data' is of type 'unknown'.ts(18046) Alert.alert("알림", errorResponse.data.message); dispatch(orderSlice.actions.rejectOrder(item.orderId)); } '뭐 대강 최종 속성인 message는 string이겠지?' 싶어서..

궁금해진 계기어제 백엔드 개발자 분이 주신 데이터를 보고 status, data 부분이 계속 반복된다는걸 깨닫고 ResponseType이란걸 만들어서 재사용하려고 했다.type ResponseType = { status: T, data: ...}  그리고 여느때와 마찬가지로 API함수 안에서 AxiosInstance를 사용해서 호출한 값을 반환하려 했다.그리고 Promise>를 타입지정해주려 했는데res에는 data라는 컬럼이 없다는 에러가 나왔다. export const getAbuserData = async (id: string): Promise> => { if (!id) return false const res = await API.get(`/abuser/${id}`); ..

타입스크립트 is란 무엇인가? API를 짜면서 try-catch문으로 에러처리를 할때 catch(error) { ... } 에서 error의 타입은 보통 unknown이다.이럴 땐 unknown 타입인 error객체에 제대로 된 타입을 찾아줘야한다.그런데 이런 상황에서 isAxiosError라는 함수를 만들어 타입 검사를 하는 예시 하나를 발견했다.import axios, { AxiosError } from 'axios';import { Alert } from 'react-native';// 타입 가드 함수function isAxiosError(error: any): error is AxiosError { return error.isAxiosError === true;}async function fet..

공부하게 된 계기타입스크립트에는 constant 관리에 2가지 선택지가 있다. as const와 enum이다.나는 보통 as const를 쓰는 편이었는데 (그냥.. const가 친숙해서 썼었다. enum은 넘 생소해..)회사에선 enum을 쓰더라. 왜 enum을 쓰는지 궁금해서 사수님께 물어보기 전에채찍피티와 오픈채팅방에 as const vs enum에 대해 물어보고 기록한 내용이다. 대강 정리하자면... 보통 자바스크립트에 친숙한 개발자는 enum보단 as const를 선호하는 경향이 크나, 개발팀 리더가 자바 경력이 긴 사람이면 enum으로 통일하는 경우도 있다고 한다. 그리고 enum은 참조되지 않아도 트리쉐이킹의 대상이 되지 않기도 하며, 컴파일 시 즉시실행함수 IIFE로 변환되어 흔적이 남는다고..

unknown 타입이란?타입스크립트에서 unknown 타입은 any 타입보다 좀 더 안전한 대안이다.어떤 타입의 값이든 받을 수 있지만, 실제 어떤 값인지 명확하게 확인한 다음에야 사용할 수 있다. unknown 타입을 사용하는 상황API응답 / 동적 콘텐츠 처리: 외부에서 입력받은 데이터나 다른 라이브러리로부터 오는 컨텐츠를 처리할 때, 해당 데이터의 타입이 불명확하거나 잘 모르겠을 때 unknown을 사용할 수 있다. 이렇게 하면 코드 내에서 추후 해당 값에 대한 타입 검사를 강제하고, 더 안전하게 데이터를 다룰 수 있다.타입 가드 사용 강제: unknown 타입의 변수는 직접적인 연산이나 메소드 호출이 제한된다. 타입 가드(type guards)를 사용하여 이 변수의 실제 타입을 좁혀 나가며 필요한..

타입스크립트에서 인덱스의 타입을 지정할 때 사용하는 두 개념이다.두 개념이 밀접한 관련이 있는 개념이지만 엄밀히 말하면 다르긴 하다.하지만 자주 인덱스 시그니처를 인덱스 타입이라고 부르는 사람도 발생하는 등 조금은 용어 사용이 엄격하지 못한 채로 사용된다. 일단 인덱스 시그니처 먼저 이번 시간에 다뤄보겠다.인덱스 시그니처는 인덱스 타입 정의의 일부로서, 객체가 어떤 형태의 키와 값을 가질 수 있는지를 정의한다.쉽게 말하자면, 인덱스 시그니처는 '객체 형태의 타입'에서 '속성의 키'를 정의할 때 사용되는 문법이다. 인덱스 시그니처 (Index Signature)인덱스 시그니처는 특정 객체가 다양한 키를 가질 수 있고, 각 키의 값이 어떤 타입을 가져야 하는지 명시한다.기본적으로 인덱스 시그니처는 타입을 좀..