본문 바로가기

Front-End: Web/TypeScript

 (23)
[TypeScript] Partial & Required / Record / Exclude & Extract Partial 제네릭 타입 T에 대해 기존의 타입은 유지하되, 모든 프로퍼티들을 Optional하게 변경함 type Partial = { [P in keyof T]?: T[P]; } 예제 필수 타입과 Optional 타입을 구분해서 사용해야 하는 경우에 응용하면 좋을 것 같다. type UserInformation = RequiredUserInformation & Partial; interface RequiredUserInformation { id: string; uid: string; name: string; } interface OptionalUserInformation { age: number; profile: string; phone: string; } Required Partial과 반대되는 개..
[TypeScript] type이 없는 모듈을 사용할 때 발생하는 에러 해결하기 에러 원인: @rumess/react-flip-countdown은 type을 제공하지 않기 때문 해결 방법 방법-1 tsconfig.json에 noImplicitAny 를 추가하면 해결. "noImplicitAny": false noImlicitAny 암묵적으로 any 타입을 가지는 것을 허락하지 않음. false로 설정하는 경우? 기존 자바스크립트 프로젝트를 타입스크립트로 마이그레이션 하는 경우. 이를 제외하면 true로 설정하는 것이 좋다. 위의 이유에 따라서 noImlicitAny는 사용하지 않는 것이 좋다고 판단. 방법-2 node_modules/@rumess/react-flip-countdown/dist에 index.d.ts 파일을 생성하고, declare module '@rumess/react..
TypeError: relativeURL.replace is not a function url을 넣어줘야하는 부분에 객체를 넣어줘서 생긴 문제였다. 객체에서 url을 꺼내서 다시 넣어주니 에러가 해결되었다.
Uncaught TypeError: Cannot add property current, object is not extensible (feat. forwardRef) 문제점 이전의 PR들을 모두 merge하고, /@me 에 접속하였더니 에러가 뜬다. 오류의 원인을 찾아보니 useGetFriendList.tsx 부분이 문제였다. import { useQuery } from "@tanstack/react-query"; import friendApi from "@api/friend"; const useGetFriendList = (options: any = {}) => { const { data, isSuccess } = useQuery( ["friendList"], friendApi.getAll, options ); return { data: data?.data.data, isSuccess }; }; export default useGetFriendList; 여기서 re..
[코딩애플] ts part 2-7. Generic 함수 타입을 파라미터로 입력하는 Generic 함수에 타입도 파라미터로 입력 가능 array 입력하면 첫 자료 return 해주는 함수 function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]); console.log(a); // 4 근데 a 타입은 unknown이다. 왜냐하면 우리가 그렇게 지정해놓았으니까. 함수에 x라는 변수를 만들 때 타입을 unknown이 가득한 array로 지정했으니까. 그 자료의 첫 번째 자료를 뽑아도 unknown이다. 타입스크립트에게 자동으로 타입변환을 기대하면 안된다. 숫자나오면 숫자로 타입변환 그런거 안해준다. unknown이면 평생 unknown이다. a가 unknown 타입이라서 가끔 이런 문제가 발생한다. console...
[코딩애플] ts part 2-6. import export & namespace 타입도 import export 해서 씁니다 그리고 namespace import & export import & export 란? a.ts 와 index.ts 파일을 생성하고 a.ts 파일을 index.ts 파일에 갖다 쓰고 싶다면? a.ts 파일 내에서 export 해주고, index.ts에서 import한다. 🕹️a.ts export var 이름 = 'kim'; 🕹️index.ts import {이름} from './a'; 여러개 export 한다면? 🕹️a.ts export var 이름 = 'kim'; export var 나이 = 20; 🕹️index.ts import {이름, 나이} from './a'; 타입도 import export 가능 🕹️a.ts export type Name = stri..
[코딩애플] ts part 2-5. protected & static class에서 사용가능한 protected, static 키워드 복습) class를 복사해서 갖다쓰고 싶을 때 -> 'extends' class User { x = 10; } class NewUser extends User { } let 사람 = new NewUser(); conosle.log(사람); // NewUser {x: 10} 복습) private 붙이면 class {} 안에서만 사용가능 class User { private x = 10; } protected 키워드 private, protected 붙이면 class {}안에서만 사용 가능 protected가 private의 연장선 protected 붙이면 현재 class {} 안에서 + extends 된 class {} 안에서 사용 가능 pr..
[코딩애플] ts part 2-4. public & private public, private 쓰는거 보니까 타입스크립트 귀여운편 타입스크립트의 장점 typescript의 장점은 자바스크립트에서 쓸 수 없는 문법도 제공한다는 거다. 예로 들면 객체지향언어에서 사용하는 public, private, protected, static 네 개 키워드를 사용할 수 있다는 거다. class 많이 만들어서 개발하려면 public, private, protected, static 키워드 유용 이걸 쓰면 장점이 뭐냐면, 객체지향으로 코드를 짤 때, 일명 class를 만들어서 코드 짤 일이 많다 할 때 코드를 더 예쁘게 만들 수 있다. 자바스크립트에서도 일부 키워드는 쓸 수 있긴 하지만, 전부는 다 못쓰니까.. 타입스크립트가 좋다! 많이 하는 질문 class를 만들어보자. class U..
반응형

티스토리툴바