본문 바로가기

typescript4

boolean 배열에서 truthy 값이 하나라도 있는지 확인하는 법 (using reduce) forEach, map, filter를 이용할 수도 있지만, reduce를 이용하여 구할 수도 있습니다. // true 값이 존재 const test1 = [ false, false, false, false, false, true, false, false, false ]; // true 값이 존재. {}는 truthy 값 const test2 = [ false, false, false, false, false, {}, false, false, false ]; // true 값이 존재. []는 truthy 값 const test3 = [ false, false, false, false, false, [], false, false, false ]; // ''는 falsy 값. true 값은 없음 const .. 2022. 11. 6.
[Error 해결] No overload matches this call. 회사에서 첫 업무를 받았고, 업무를 하는 도중 No overload matches this call. 이라는 오류를 만나게 되었습니다. 구글링을 해보니 상황에 따라 다양한 해결방법이 있는 것 같았습니다. 일반적으로, type에 오류가 있을 때 많이 발생하는 오류인 것 같았고, 추론되는 type과 같지 않은 type을 가지고 있는 데이터가 매개변수로 전달되거나 리턴값으로 리턴되고 있을 때 많이 발생하는 상황인 것 같습니다. 저는 직접 제작한 함수에서 이 오류를 맞닥뜨렸는데요, 함수의 리턴값의 Type에 문제가 있는 경우였습니다. 혹시나 같은 상황에 처한 분이 계신다면 도움이 되길 바라는 마음에 간단히 정리해보겠습니다. 저의 상황은, 위와 같았습니다. 매개변수는 props와 ref라는 이름의 변수이고, 이 .. 2022. 10. 7.
[Typescript] String vs string / Number vs number의 차이 (Reference type vs Primitive type) 바로 직전 글에 이어서 글을 작성해보겠습니다. 직전의 글에서 props의 자료형을 정의하는 방법에 대해 알아봤는데요, 이 과정에서 약간의 혼란을 겪을 수 있습니다. 바로 string 과 String 중 어떤 것을 사용할지에 대한 혼란인데요! 결론부터 말씀드리자면, string과 String은 서로 다른 자료형입니다. string은 primitive type이고, String은 Reference type입니다. 또한, Reference type은 데이터의 타입으로 사용하는 것을 지양한다고 합니다. 즉, 이 상황에서는 string을 선택하는 것이 더 적절하다고 합니다. 참고 URL : https://velog.io/@pca0046/TIL-47.-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%A.. 2022. 7. 6.
[React] Styled Component에서의 props 자료형 정의 Styled component를 이용하여 React에서 CSS 효과를 줄 때, 항상 .jsx 파일로만 만들었는데, 이번에 처음으로 Typescript를 도입하여 .tsx 파일로 구현을 하던 도중, props의 자료형을 정의하지 않으면 빨간줄이 생기는 상황을 처음 맞닥뜨렸습니다. 앞으로 Typescript를 이용하며 자주 맞닥뜨리게 될 상황인 것 같아서 간단히 기록을 해놓으려고 합니다. 위 코드는 testComponent 라는 이름의 컴포넌트를 만든 .tsx 파일입니다. .jsx 파일이었다면, defaultColor 라는 props로 전달할때, 빨간줄이 그어지지 않겠죠. 하지만 .tsx 파일은 자료형을 엄격하게 정의해줘야 하기 때문에, 빨간줄이 그어지며 밑과 같은 메세지가 보이게 됩니다. 구글링 결과, 이.. 2022. 7. 6.