본문 바로가기

Type Script

 (17)
[TypeScript] useParams 값을 props내려줄 때 type오류(string,undefind) 한 페이지 파일에서 useParams를 사용해 얻은 id값을 다른 컴포넌트로 props내려주려하니 오류가 났다. props로 보내서 다른 컴포넌트에서 그에 맞는 id값에 따라 api를 호출하고 싶었으나,, { id: string | undefined; }' is not assignable to type 'string'. { id: string; }' 형식은 'string' 형식에 할당할 수 없습니다 .. 등의 type 오류들이 계속 발생했다. useParams사용한 파일 코드 const { id } = useParams(); return ( Gender ... props받는 파일 코드 export default function EmotionDoughnutChart(id ) { ... 해결 props받는 ..
[TypeScript] 'Window & typeof globalThis' 형식에 'Kakao' 속성이 없습니다. 'Window & typeof globalThis' 형식에 'Kakao' 속성이 없습니다. TypeScript로 카카오 공유를 구현시 다음과 같은 오류가 발생하였다. 기존 window에 없는 객체 값에 접근 할 경우, Typescript로 인해 window에 Kakao를 받을 속성 type이 정의되어 있지 않아 발생하는 에러이다. 해결 방법 Kakao Type을 설정해준다. src> react-app-env.d.ts 파일 생성 interface Window { Kakao: any } 오류 해결😀 [ React ] React, Typescript를 통해 카카오톡 메시지 플랫폼 API 이용해보기 카카오톡 메시지 플랫폼 API 이용해보기 💬 들어가며 사이드 프로젝트를 진행하면서 사용자 초대 링크를 카카오톡 공..
[TypeScript] 이미지 절대 경로 import 오류 TypeScript 에서 import naver from '@assets/images/naver.png';이렇게 했더니 찾을 수 없다는 에러가 났다. 이미 tsconfig.json에서 paths 로 절대경로 설정은 해둔 상황이다. JSX 에서는 되었는데 TSX로 바꾸니 오류가 났다. .png 확장자 허용이 되지 않아 타입스크립트에서 적용되지 않은 것이다. 해결방법 1. @types/global/index.d.ts 파일 생성 최상위 위치에서 @tpyes 폴더 생성 후 안에 global 폴더를 생성하고 그 안에 index.d.ts파일을 생성한다. 2. index.d.ts 파일 내용 작성 declare module '*.png'; declare module '*.gif'; 필요한 확장자를 모두 추가한다. 3...
[TS] Form Regex 정규식 표현의 Type은? RegExp Regex "정규식"과 "정규표현식"은 같은 말입니다. "정규표현식"을 줄여서 "정규식"이라고 합니다. 영어로는 "Regular Expression (레귤러 익스프레션)"이라고 하는데, 이것이 너무 길기에, Regexp 또는 더 줄여서 Regex 라고 간편히 기술합니다. "정규표현식"이든 "Regular Expression"이든, 단어만 보고서는 무슨 뜻인지 알 수 없게 되어 있는데, 정규식이라는 것은 쉽게 말해서, "문자열을 다루는 공식"입니다. 수학에 숫자를 다루는 공식이 있듯이, 프로그래밍에서 "ABC" "가나다라" 등의 문자열을 처리할 때 사용하는 것입니다: 참고사이트 Type 적용 Form Regex 를 통해 유효성 검사를 하는 중 이것에 대한 Type을 작성해야했다. const email = ..
[TS] 이니셜라이저가 없고 생성자에 할당되어 있지 않습니다. 에러 해결 TypeSctipt 를 공부하던 중 , 다음과 같은 오류가 발생하였다. 속성 'x'은(는) 이니셜라이저가 없고 생성자에 할당되어 있지 않습니다. 강의의 코드를 똑같이 따라해도 내 파일에서만 오류가 떴다. TypeScript 에서 설정의 문제였다. 해결: tsconfig.json 에서 다음과 같이 "strictPropertyInitialization": false 를 추가해주었더니 해결되었다. http://daplus.net/javascript-%EC%86%8D%EC%84%B1-%EC%97%90%EB%8A%94-%EC%9D%B4%EB%8B%88%EC%85%9C-%EB%9D%BC%EC%9D%B4%EC%A0%80%EA%B0%80-%EC%97%86%EC%9C%BC%EB%A9%B0-%EC%83%9D%EC%84%B..
[TS] tsconfig.json + tsconfig.path.json 파일 합치기 기존은 tsconfig.json 파일과 tsconfig.path.json 파일이 구분되어 있었다. 변경전 tsconfig.json { "extends": "./tsconfig.path.json", "compilerOptions": { "target": "ESNext", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module":..
[TS] react 기본 설정 type(JSX.Element-컴포넌트,props/state) https://velog.io/@nemo/jsx.element 위 블로그내용) 1. JSX.Element JSX.Element 타입은 리액트에서 사용하는 JSX 자료형을 명시한다. 리액트에서는 HTML처럼 생긴 JSX를 사용하는데, 이 타입을 지정하고 싶으면 JSX.Element를 사용하면 된다. JSX를 변수에 담을 때 const container: JSX.Element = 📌 JSX.IntrinsicElements 태그까지 지정하고 싶다면 JSX.IntrinsicElements를 사용해보자. const container: JSX.IntrinsicElements['div'] = 컴포넌트 타입 지정 시 1) 컴포넌트를 담은 함수 컴포넌트는 항상 JSX를 return하기 때문에 JSX.Element로 타입..
[TS] useState type 기존 useState를 작성한 React 파일을 TypeScript 파일로 변환하는 작업을 진행했다. 아래 코드처럼 선언 후 이용한 출력되는 article. 에서 다 오류가 났다. const [article, setArticle] = useState({}); ... return( ... [ 사용자 ID : {article.id} ] ... ) 이를 TypeScript를 적용하여 아래 코드로 작성하자 해결되었다. 초기 state값이 {}로 줬더니 아래 코드에서 err가 나서 null로 변경해준 후, 밑에 출력되는 코드에서 article?.id와 같이 ?를 붙여 옵셔널체이닝을 시켜줬더니 적용되었다. interface articleInterface { id: number; ... } const [article..

티스토리툴바