argTypes는 왜 추론이 안되는 것일까요 실제로는 argsTypes의 키의 밸류 오브젝트에는 추론되는 타입외에도 control 키를 넣을 수 있습니다. 이렇게 control의 값을 적절히 설정하고 control 값에 따라 options를 설정하면? 실제 스토리북에서도 잘 반영되는 것을 볼 수 있습니다. 심지어 꽤 중요한 기능이에요 각 props이 받는 각각의 옵션을 문자열단위로 외우고 다니는 취미가 있지 않는 이상 굉장히 불편할테니까 이런 셀렉트 기능은 스토리북에서 거의 필수적이라고 봐도 무방합니다. storybook ArgTypes https://storybook.js.org/docs/api/arg-types ArgTypes • Storybook docs Storybook is a frontend ..
아 ~ 어디 "1"부터 원하는 숫자를 다 유니온으로 만들어주는 타입 어디없나~? type NumberToString = R['length'] extends N ? never : `${R['length']}` | NumberToString; type ExcludeNumbers = End extends ExcludeFrom ? never : End; export type NumberString = ExcludeNumbers; 이게 되네.. 타..
ts-pattern은? 프로그래밍에서는 패턴 매칭이라는 개념이 존재합니다. 데이터가 특정한 패턴(값, 자료구조, 타입, 함수)에 일치하는지 따지는 것을 통하여 대상을 특정하는 기술을 패턴 매칭이라고 지칭하는데요 ts-pattern은 타입스크립트 생태계에서 이러한 패턴 매칭을 구현한 라이브러리입니다. 프로그래밍 세계에서 분기는 필연적으로 필요한 존재입니다. 우리는 분기가 존재하지 않는 프로그램을 상상할 수 있을까요? 그런데 우리는 복잡한 요구사항에 의해 매우 복잡한 분기를 작성하게 되곤 합니다. 예를 들어 이런 코드를 상상해봅시다. const complexFunction = ( first: string | number | null | undefined | { text: string }, second: { ..
😀 unknown은.. TypeScript 3.0 버전부터 추가된 타입입니다. unkwon은 any와 마찬가지로 모든 타입에 값이 할당될 수 있는 마치 any와 비슷하게 동작하는 타입입니다. 그렇다면 왜 unknown 타입이 필요한 걸까요? 그냥 any로 사용하면 되지 않을까요? typescriptlang.org의 설명에 따르면 any와 unknown의 차이점은 다음과 같습니다. 초록 체크표시는 tsconfig.ts의 strictNullChecks 옵션이 꺼져있을 때만 호환된다는 의미입니다. any와의 눈에띄는 차이점은 unknown 타입은 any 타입 외의 어떤 타입에도 할당할 수 없다는 것입니다. 반면 any는 never를 제외한 모든것에 할당 가능합니다. 이것은 무슨 의미일까요? 예제를 통해 확인해..
😂왜 DOM요소는 as로 타입단언해야하나요? 사실 별 생각없이 당연히 그런거아님? 하고 넘어갔던 문제인데 디스코드에 질문이 올라온걸 보고 다른사람도 납득할 수 있게 근거를 들어 설명하려니 꽤나 어렵다는 생각이 들었습니다. 따라서 제 나름대로 접근하여 결론을 내봤습니다. 물론 100% 뇌피셜은 아니고 나름대로 레퍼런스를 찾아보면서 근거를 확인했어요 그래도 제 생각이 틀릴 수 있으니 만약 그런 경우 댓글 남겨주시면 감사하겠습니다. 😉나의 답변 익명보호를 위해 질문자 분 성함은 그림판으로 가렸습니다. 우선 이 답변이 제 결론이며 이 포스트에서는 제가 결론에 도달하기까지의 과정을 서술하겠습니다. 🤗타입스크립트로 작성한 파일은 어떻게 컴파일될까? 1. 타입스크립트 컴파일러에 의한 타입스크립트 -> 자바스크립트 변..
👻useState의 setState 타입을 어떻게 설정해야할까? 이런 부분들은 이해가 어렵다기보다는 자주 사용하지 않다보면 기억이 안나는 경우가 많은 것 같습니다. 간단하게 예제를 작성 하면서 알아보도록 하겠습니다. import {useState} from 'react' import HiReactItems from '대충 경로' const HiReact = () => { const [state, setState] = useState(false) return ( ) } 이렇게 작성은 해두었는데... 이걸 쉽게 생각을해서 타입을 받는다 치면 interface StateProps { setState: (state:boolean) => void } 이렇게 작성을 할 수 있겠죠? 하지만 좀 더 타입을 멋지게 작성..
🐕 Typescript는 브라우저에서 실행될 수 없다. 처음 웹에 입문하고 절 가장 힘들게 했던 것은 이것이었습니다. 리액트가 중요하다는데..? 타입스크립트가 좋다는데? 쌩으로 CSS 쓰는거보다 SCSS 배워야한다는데? 하면서 여러가지를 설치하고나면 항상 그것을 컴파일 or 트랜스파일해주고 번들링해줄 추가적인 툴들이 필요합니다. 많이 사용되는 것으로는 바벨, 웹팩, 롤업 등이 있을 수 있겠네요. 왜 열심히 만들어둔 우리의 프레임워크, 라이브러리를 그대로 사용할 수 없고 HTML, CSS , JS로 변환하는 과정이 필요한 것일까요? 그것은 브라우저가 인식할 수 있는 파일이 HTML, CSS , JS이기 때문입니다. 즉 리액트로 아무리 JSX를 멋지게 써내려가도 ts로 멋지게 코드를 작성해도 그것이 우리의 ..
타입스크립트로 타입을 정해주면서 가장 헷갈렸던게 않이 이거 함수를 어떻게 정해주지..? 였읍니다. 😲기본적인 형태 interface login { (username:string, password:string) : boolean } let loginUser: login = (username:string, password:string) => { console.log('엄') return true } 기본적인 사용례는 다음과 같이 표현할 수 있습니다. 타입을 통해 표현하는 경우 다음과 같아집니다. type login = { (username:string, password:string) : boolean } let loginUser: login = (username:string, password:string) ..
