[ts+react+tailwind CSS] html 태그 컴포넌트 만들기
·
Study/Type Script
TS를 사용해서 React 입력 컴포넌트의 Props 타입을 제한하고, Tailwind CSS 클래스를 호율적으로 병합하기 위한 유틸리티를 포함하는 방법에 대해서 정리하고자 한다. 위한 유틸리티를 포함하는 방법에 대해서 정리하고자 한다.1️⃣ input 컴포넌트로 만들기Input 태그를 커스텀으로 만들기 위해서 안에 어떠한 타입들이 들어가는지 확인해보자타입 강제 : OnlyLiteralsType OnlyLiterals = T extends string ? string extends T ? never : T :never Input에 제대로 된 타입을 주기 위해서 제네릭 T로 구체적인 문자열 리터럴(ex. “text”, “password”)인지 확인한다.삼항연산자에 의해T가 단순히 string 타입 전체..
타입 단언과 타입 가드 (Type Assertion, Type Gaurd)
·
Study/Type Script
타입 단언(Type Assertion) 💡 타입 단언TS의 자동 추론을 사용하지 않고 개발자가 직접 지정하는 방식 (강제)1️⃣ 문법const 변수 = 값 as 타입;const 변수 = 값;2️⃣ 사용 예시1. any를 명확한 타입으로 단언하기const value : any = "Hello World"const len = (value as string).lengthconsole.log(len) // 11TS 컴파일러는 value가 any로 지정되어 있어서 length 속성이 있는지 모름.타입 단언으로 string이라고 지정하기2. 조건부 타입과 함께 🍥type NullOrUndefined = T extends null | undefinded? true : false;function getValue (..