# type guard

sangbooom

문제 react-query의 useQuery 훅을 사용하여 데이터를 조회하는 상황이다. 아래 첫번째 사진처럼 industryList의 data response 타입을 보장해주기 위해 isError와 isLoading로 삼항연산자를 평가하였다. 이상하게 두번째 사진에선 isError와 isLoading를 변수로 두고 평가하면 useQuery의 data가 undefined로 나온다.. 왜 첫번째 사진은 되고 두번째 사진은 타입에러가 뜨는것일까? 원인 이는 타입가드와 관련이 있었다. 변수로 평가한 경우 변수 `isTr

art11010

타입 가드 타입을 좁혀가기 위한 과정이다. any와 같은 넓은 범위의 타입을 좁히고 그로 인해 타입스크립트를 더욱 안정적으로 사용할 수 있다. typeof javascript에서 이미 존재하는 타입 검사 연산자 기본형(Primitive) 타입을 타입 가드할 때 용이 in javascript에서 이미 존재하는 타입 검사 연산자 객체가 특정 속성을 가지고 있는지 검사 후 boolean 반환 객체에 대한 타입 가드를 만들기 용이 속성 in 객체명 instanceof javascript에서 이미 존재하는 타입 검사 연산자 in 연산자와 같이 객체에 대한 타입 가드를 할 때 주로 사용 생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별 후 boolean 반환 사용자 정의 사용

dev_seongjoo

타입 가드(Type Guard)가 무엇인가요? 타입 가드(Type Guard)는 TypeScript에서 변수의 타입을 좁히는 방법으로, 런타임에서 변수의 타입을 검사하여 타입 추론을 개선하는 메커니즘입니다. 타입 가드를 사용하면 특정 조건이 충족될 때 변수의 타입을 좁혀서 더 구체적인 타입으로 사용할 수 있습니다. 타입 가드는 다음과 같은 방법으로 구현할 수 있습니다: 1. 타입 체크: 특정 조건을 사용하여 변수의 타입을 확인하는 방법입니다. typeof, instanceof, in 등의 연산자를 사용하여 변수의 타입을 체크할 수 있습니다. 2. 사용자 정의 타입 가드: 사용자 정의 함수를 통해 변수의 타입을 체크하는 방법입니다. 함수의 반환 타입에 value is Type 형태를 사용하여 해당 조건이 충족될 때 true를 반환하도록 합니다. 타입 가드를 사용하면 타입 추론이 개선되어 변수의 타입이 더욱 구체화되고, 이에 따라 IDE에

2yunseong

우아한테크코스 레벨2 미션을 하며 ref를 필요로 하는 이벤트 핸들러가 커져 분리를 하고 싶었다. 가장 먼저 눈에 띈 부분은, 타입 가드 부분을 분리하고 싶었다. 생각하기에 타입 가드를 그냥 분리하면 되겠다고 생각하겠지만, 타입 가드를 분리해 메서드로 선언해주면 특수한 작업이 필요하다. 먼저 ref 타입을 살펴보자. 먼저, 미션에서는 상위의 ref를 사용하기 위해 forwardRef를 통해 전달받은 ref의 타입이다. ForwardedRef는 크게 3가지 타입으로 평가 된다. ((instance: T | null) => void) MutableRefObject null 해당 이벤트 핸들러에서 타입을 안전하게 쓰려면 null과 ((instance: T | null) => void)가 되면 안된다. 따라서 다음과 같이 분리해야 한다. 나는 MutableRefObject 를 원하므로 다음과 같이 분리했다. `

ysh616

오로지 정답이 아닌 저의 생각이 많이 담긴 점 참고 부탁드려요. 타입단언(as)를 지양해야하는 이유는 다들 알고계시리라 믿겠습니다. 런타임에서 앱이 죽지 않으려면 타입가드를 잘 사용해야한다고 인지하고 있던 와중에 as로 인해 앱이 죽은 경험을 바로 하게되자 부들부들했습니다. 곧바로 타입가드를 붙히기 시작했고 덩달아 최대한 타입단언as을 걷어보기로 하였습니다. 아래 예시는 하는 설명을 위한 샘플코드입니다. 실수하기 쉬운 예시를 보여드리겠습니다. 타입에러를 벗어나고자 as Drink와 같은 실수를 범하곤 합니다. 그러면 발생되는 문제는, drinkName이 Drink타입이 아니라면 앱은 죽게됩니다.(promise, undefined는 크게 다루지 않겠습니다.) 또 다른 실수는 이 문제를 발견하고 해결하는 방식을 이렇게 하거나 ?. 옵셔널을 사용하거나 삼항연산자를 사용하는 등등등... **

ash3767

type Guard is a feature of TypeScript that automatically narrows down the scope of types. A good use of typeguard is to avoid type assertion code. ✅ assertion as typescript doesn't think of a number, but the developer injects the number into typeScript. so i recommand to use type guard ✅ Type guard ✅ other Type guard

zeros0623

🙌안녕하세요🙌 요즘 타입스크립트 스터디를 진행하고있습니다. 일단 공식 도큐멘트를 한번 훑기로 했는데요, 제가 고급타입 부분을 맡게되어서 발표 준비 겸, 기록으로 남기기위해 포스팅합니다! 그럼 시작합니다!🚗💨 교차 타입(Intersection Types) 첫번째는 교차타입입니다! 다양한 타입을 하나로 결합해서 모든 기능을 갖춘 단일 타입을 얻는 방식입니다. 예를 들어, Person & Serializable & Loggable은 Person,Serializable,Loggable의 모든 멤버를 가집니다. 믹스인(다른 포스팅에서 자세히 다룰 예정입니다)에 사용되는 교차타입, 그리고 우리가 알고 있던 객체지향의 방식과 다른 경우를 볼 수 있을 것입니다. 아래는 믹스인을 만드는 간단한 예제입니다.(짧게 설명하자면, 믹스인은 서로 다른 두 객체를 섞어서 두 객체의

noyo0123

고급 타입 레퍼런스 유니온 타입 문제상황: 리턴하는 타입이 string일 수도 Error일 수도 있는데.. 어찌해야합니까? any를 쓸거면 왜 typescript를 쓰겠어요? type을 제한해서 컴파일시 에러를 발생시키자는게 typescript를 쓰는 이유중 하나일 것 같아요. 전통적인 객체 지향 코드에서는 타입의 계층을 만들어 두 가지 타입을 추상화 할 수 있습니다. 이것이 훨씬 더 명백하기는 하지만 또 약간 지나치기도 합니다. 즉 두 가지 타입을 묶어서 쓸 수 있지만, 굳이 그래야 하나입니다. 그때 사용하는 것이 바로 유니온 타입입니다. 유니온 타입은 여러 타입 중 하나일 수 있는 값을 설명합니다. 각 타입을 구분하기 위해 수직 막대(|)를 사용하므로 number | string | boolean은 number, string 또는 boolean 될