TypeScript8

• 

  [JavaScript] 클린 코드 요약 1️⃣ 변수(Variables) - 의미있고 발음하기 쉬운 변수 이름을 사용 - 동일한 유형의 변수에 동일한 어휘를 사용 - 검색가능한 이름을 사용 - 의도를 나타내는 변수들을 사용 2️⃣ 함수(Functions) - 함수 인자는 2개 이하가 이상적 (대부분 1개면 충분) - 1개의 함수, 1개의 행동 ⭐️ - 함수명은 함수가 무엇을 하는지 알 수 있어야 함 - 함수는 단일 행동을 추상화 - 중복된 코드를 작성하지 말 것 - Object.assign을 사용해 기본 객체를 만들 것 - 매개변수로 플래그를 사용하지 말 것 - 사이드 이펙트를 피할 것 (변수, 함수 역할 분리) - 전역함수 말 것 (prototype 연결 -> class 상속) - 명령형 -> 함수형 프로그래밍 - 조건문은 캡슐화 - 부정조.. Javascript/Basic 2023. 12. 2.

• 

  [TypeScript] GENERIC Basic (그래서, T야?) 배경 생각해보면, 예전에 교수님 수업시간에 C언어 설명하실 때도, GENERIC으로 표현된 C언어 함수를 보여주셨던 것 같다. 그 때는, 거의 코딩을 모르는 상태라서 아예 못알아봤던 것 같고 늘 모르고 살던 것을 알았을 때의 "개안" 상태가 된 것 같다. 늘.. T가 뭐지? 하면서 라이브러리나 github 소스코드를 보곤 했었으니까.. 문제 function checkNotNull(arg: number | null): number { if (arg == null) { throw new Error("not valid number!"); } return arg; } const result = checkNotNull(23); console.log(result); checkNotNull(null); 위와 같이 작.. React & TypeScript/TypeScript 2023. 8. 22.

• 비공개 - [TypeScript] 활용법 Basic (이 건 뭐고, 저 건 또 뭐야? 싶을 때 보는) 보호되어 있는 글 입니다. 2023. 7. 10.

• 

  [TypeScript] as 사용에 대한 이해 (feat. Type Assertions) 찾게된 이유 & 해결 ... // 에러 상황 data: data?.map(price => Number(price.close)), ... // 발생된 에러 TS2769: No overload matches this call. Overload 1 of 2, '(props: Props | Readonly): ReactApexChart', gave the following error. Type '{ name: string; data: number[] | undefined; }' is not assignable to type 'number'. Overload 2 of 2, '(props: Props, context: any): ReactApexChart', gave the following error. Type .. React & TypeScript/TypeScript 2022. 12. 27.

• 

  [TypeScript] Tip - 자동으로 Type 추출 API 에서 받아오는 Data같은 경우 Type을 직접 interface로 작성해주려면 귀찮다. 아래 사이트에서 json copy & paste 하면 interface 자동으로 추출해줌. https://app.quicktype.io/?l=ts Instantly parse JSON in any language | quicktype app.quicktype.io React & TypeScript/TypeScript 2022. 12. 19.

• 

  [React / TypeScript] interface로 타입 정의 중 발생한 이슈 (useParams, Params) - TS2344 1. 이슈 import React from "react"; import { useParams } from "react-router-dom"; interface RouteParams { coinID: string; } const Coin = () => { const { coinID } = useParams(); return Coin; }; export default Coin; 위와 같이 작성했을 때, 아래와 같이 에러가 나왔다. ERROR in src/routes/Coin.tsx:9:32 TS2344: Type 'RouteParams' does not satisfy the constraint 'string | Record'. Type 'RouteParams' is not assignable to type .. React & TypeScript/TypeScript 2022. 12. 9.

• 

  [React / Router] React Router V6 Guide (Basic) - 부제 : v6 변경점 *참고로 아래 목록은 모두 Function이다. { } 로 불러오는 것 보면 알 수 있다. 0. Router는 props로 꽤 많은 기능을 포함하고 있는 것을 알 수 있다. Router 컴포넌트는 기본적으로 리액트의 context provider 기능을 포함시키고 있다. 그래서 routing 정보를 대부분의 자식 요소와 공유하게 된다. declare function Router( props: RouterProps ): React.ReactElement | null; interface RouterProps { basename?: string; children?: React.ReactNode; location: Partial | string; navigationType?: NavigationType; nav.. React & Library/Router 2022. 12. 5.

• 

  [React / TypeScript] styled-components와 함께 사용하는 TypeScript에 대한 고찰 (feat.react) 0. 설치간 오류 JS로 만들어진 패키지, TS type이 정의된 패키지를 모두 설치해야 TS에서 인식할 수 있다. 어찌보면.. 당연. 패키지의 타입을 정의해서 가져다 줘야 해석을 하던가 말던가 하지.. 보통 이런 것들은 @types/~패키지명 으로 정의되어 있음. @types/~* 라고 정의되어 있는 경우, 모두 type 정의한 옵션 패키지 구나 정도로 생각하면 된다. 만약 @types/~패키지명을 설치 안하면 다음과 같이 display된다. Module not found: Error: Can't resolve 'styled-components' 패키지명은 예시 tip. 만약 본인이 패키지를 설치했는데 type이 없는 패키지일 경우, @types/설치한 패키지명 으로 install을 해보면 꽤 유명한 .. React & TypeScript/React 2022. 11. 28.