Create-React-App TypeScript 템플릿을 사용할 때 문제가 발생하면 출력이 TSX 파일 대신 JS 파일입니다.

Question

Create-React-App 템플릿과 TypeScript를 사용하여 새로운 React 애플리케이션을 만들려고 시도하는 동안 문제가 발생했습니다. 공식 문서(https://create-react-app.dev/docs/adding-typescript/)의 지침을 따르고 다음 명령을 사용했습니다.

<code>npx create-react-app my-app --template typescript

<p>명령의 결과는 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;">소프트웨어 패키지 설치 중. 몇 분 걸릴 것이다.

사용 중인 반응 스크립트 버전이 --template 옵션과 호환되지 않습니다.

반응, 반응 돔 및 반응 스크립트 설치 중...


32초 만에 995개의 패키지 추가

자금을 찾고 있는 패키지가 34개 있습니다.
  자세한 내용을 보려면 `npm Fund`를 실행하세요.

성공! My-app-test는 /home/ristirianto/belajar-react/my-app-test 아래에 생성되었습니다.
이 디렉터리 내에서 여러 명령을 실행할 수 있습니다.

  npm 시작
    개발 서버를 시작합니다.

  npm 실행 빌드
    애플리케이션을 프로덕션용 정적 파일로 패키징합니다.

  npm 테스트
    테스트 실행기를 시작합니다.

  npm 실행 꺼내기
    도구를 제거하고 빌드 종속성, 구성 파일 및 스크립트를 애플리케이션 디렉터리에 복사합니다. 이렇게 하면 돌아올 수 없습니다!

다음을 입력하여 시작하는 것이 좋습니다.

  CD 내 앱 테스트
  npm 시작

즐거운 프로그래밍 되세요!

참고: 이 프로젝트는 지원되지 않는 도구의 이전 버전을 사용하여 부트스트랩됩니다.
새 프로젝트에서 지원되는 도구를 얻으려면 Node >=14 및 npm >=6으로 업데이트하세요. 

내 노드 버전: v18.17.1 내 NPM 버전: 9.6.7

그러나 설치 과정을 마친 후 my-app 폴더에 있는 파일을 확인해보니 파일 확장자가 .js인 것을 발견했습니다. TypeScript 파일은 .tsx 대신에 있어야 합니다. 이는 TypeScript가 올바르게 구성되지 않았음을 나타내는 것 같습니다.

제가 놓친 단계가 있는지 아니면 설정에 문제가 있는 것인지 잘 모르겠습니다. --template typescript 옵션을 사용할 때 TypeScript가 올바르게 구성되었는지 확인하기 위해 수행해야 하는 단계가 있습니까?

이 문제를 해결하는 방법에 대한 지침이나 조언을 주시면 감사하겠습니다. 도움을 주셔서 미리 감사드립니다!

Answer 1

질문

사용 중인 create-react-app 版本不支持 --template 选项。因此，--template typescript 没有任何效果，您的项目中没有生成 .tsx 파일입니다.

왜 npx create-react-app 不使用支持 --template 的版本，我怀疑您在本地全局安装了旧版本的 create-react-app. 나는 이것이 다음과 같은 이유 때문이라고 생각합니다:

1. npx 로컬에 설치된 패키지를 실행할 수 있습니다(원격 패키지에 국한되지 않음):

   – npx 문서

2. npx 원격 패키지 설치 여부를 묻는 메시지가 표시되지만 출력에는 이 메시지가 표시되지 않습니다. 팁은 다음과 같습니다:

   으아악

전역적으로 설치된 패키지를 확인하면 위의 내용을 확인할 수 있습니다.

• npm: npm list -g
• 실: yarn global list

솔루션

전역적으로 설치했는지 확인한 후 create-react-app 제거할 수 있습니다.

• npm: npm uninstall -g create-react-app
• 실: yarn global remove create-react-app

create-react-app 또한 전 세계적으로 버전을 설치하지 않는 것이 좋습니다.

– 시작 가이드: 빠르게 시작하고 React 앱 만들기