타입스크립트 컴파일 설정 - tsconfig 옵션 총정리를 참조할 것
타입스크립트 에러1
타입스크트 설치과정에서 npm error가 발생했다.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-scripts@5.0.1
npm ERR! Found: typescript@5.0.3
npm ERR! node_modules/typescript
npm ERR! peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.2
npm ERR! node_modules/fork-ts-checker-webpack-plugin
npm ERR! fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm ERR! node_modules/react-dev-utils
npm ERR! react-dev-utils@"^12.0.1" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts@"5.0.1" from the root project
npm ERR! peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0
npm ERR! node_modules/tsutils
npm ERR! tsutils@"^3.21.0" from @typescript-eslint/eslint-plugin@5.41.0
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1
npm ERR! node_modules/eslint-config-react-app
npm ERR! eslint-config-react-app@"^7.0.1" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR! 1 more (eslint-plugin-jest)
npm ERR! tsutils@"^3.21.0" from @typescript-eslint/type-utils@5.41.0
npm ERR! node_modules/@typescript-eslint/type-utils
npm ERR! @typescript-eslint/type-utils@"5.41.0" from @typescript-eslint/eslint-plugin@5.41.0
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR! @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1
npm ERR! node_modules/eslint-config-react-app
npm ERR! 1 more (eslint-plugin-jest)
npm ERR! 1 more (@typescript-eslint/typescript-estree)
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts@"5.0.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts@"5.0.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\rhsok\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\rhsok\AppData\Local\npm-cache\_logs\2023-04-07T03_43_31_559Z-debug-0.log이 오류는 노드 패키지 매니저(npm)가 react-scripts 버전 5.0.1을 설치하려고 할 때, typescript 패키지의 버전이 충돌하여 해결할 수 없다는 것을 나타냅니다.
오류 메시지에 따르면, react-scripts 패키지가 typescript 패키지를 ">= 2.7"으로 요구하지만, 이미 typescript 패키지 버전 5.0.3이 설치되어 있어서 충돌이 발생하고 있습니다.
package.json 파일에서 typescript 패키지의 버전을 수정하여 의존성 충돌을 해결합니다. react-scripts 패키지가 typescript 패키지 버전 4.9.5를 요구하므로, package.json 파일에서 typescript 패키지의 버전을 "^4.9.5"로 수정하여 의존성 충돌을 해결할 수 있습니다.
package.json에서
typesciprt 버전을 4.9.5로 변경
타입스크립트 에러2
tsc : The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program. Che
ck the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ tsc --init
+ ~~~
+ CategoryInfo : ObjectNotFound: (tsc:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
이 오류는 TypeScript 컴파일러가 설치되어 있지 않아서 발생합니다. TypeScript 컴파일러를 설치해야합니다.
npm을 사용하여 TypeScript 컴파일러 설치하기
콘솔 또는 터미널에서 다음 명령을 실행하여 TypeScript 컴파일러를 설치할 수 있습니다.
Copy code
npm install -g typescript타입스크립트 에러3
타입스크립트 에러4
getElementById를 통해 받아오는 객체의 Type을 지정해주면 된다. TypeScript가 데이터 타입을 알아볼 수 있도록 해주는 것. 수정된 코드는 아래와 같고, 핵심은 as HTMLElement 다.
타입스크립트 에러5
import 다음에 {ReportHander} 라고 작성해야 한다.
1. import {ReportHandler} from "web-vitals";
const reportWebVitals = (onPerfEntry?: ReportHandler | undefined): void => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
- .js => .tsx로 변경
형선