React 앱을 TypeScript로 마이그레이션하는 방법

기존 React 프로젝트를 TypeScript로 마이그레이션 : 단계별 안내서 첫 번째 Learning TypeScript 일 때 종종 제안을 듣습니다. "기존 프로젝트를 전환하십시오! 이것은 얼마 지나지 않아 트위터의 친구 가이 작업을 도와주었습니다. React 앱을 TypeScript로 마이그레이션하십시오.

이 기사는 친구가되어 프로젝트를 TypeScript로 마이그레이션하도록 도와줍니다. 예를 들어, 나는 마이그레이션 과정에서 나 자신을 마이그레이션 한 개인 프로젝트의 일부 조각을 사용합니다.

키 포인트

는 프로젝트에 TypeScript를 추가하고 TSCONFIG.JSON을 추가하고 단순성, 모든 파일 변환, 엄격 성 증가, 청소 및 성공적인 마이그레이션을 축하하여 TypeScript를 추가하여 TypeScript로 반응 응용 프로그램을 마이그레이션하기 시작합니다.

간단한 구성 요소부터 시작하여 TypeScript를 채택하여 단계적으로 단계하십시오. 파일 확장자를 .tsx로 변경하고 유형 주석을 추가하십시오. 프로젝트의 모든 파일을 단계별로 변환하십시오.

더 엄격한 규칙을 활성화하여 tsconfig.json의 엄격함을 향상시킵니다. 이것은 단계별로 수행 할 수 있으며 오류가 발생하면 고정 할 수 있습니다. 목표는 빠르게 앞으로 나아가서 나중에 돌아와서 문제를 해결하는 것입니다.

@ts-indore 및 fixMelater와 같은 바로 가기를 사용하여 마이그레이션 프로세스 중에 부담을 완화하십시오. 시간이 지남에 따라 이러한 바로 가기를 올바른 유형 안전으로 교체하십시오.

• 계획 이 과정을 덜 어려워지기 위해, 우리는 그것을 단계로 나누어서 덩어리에서 마이그레이션을 수행 할 수 있습니다. 나는 항상 큰 작업을 다룰 때 이것이 도움이된다고 생각합니다. 프로젝트를 마이그레이션하기 위해 취할 모든 단계는 다음과 같습니다.
• aftionscript를 추가하십시오 add tsconfig.json 를 추가하십시오 단순성으로 시작하십시오 모든 파일을 변환 엄격함을 향상시킵니다
청소
• 축하

참고 : 전체 과정에서 가장 중요한 단계는 7 단계입니다. 우리는이 단계를 완료하기 위해서만 완료 할 수 있지만.

> 1. 프로젝트에 Typescript를 추가하십시오 먼저 프로젝트에 TypeScript를 추가해야합니다. React 프로젝트가 Create-React-App으로 부팅되었다고 가정하면 문서에 따라 실행할 수 있습니다.

또는 원사를 사용하는 경우 :

우리는 아직 TypeScript로 변경하지 않았습니다. 우리가 프로젝트를 로컬로 시작하기 위해 명령을 실행하면 (내 경우에는 원사 시작) 아무것도 변경되지 않습니다. 이것이 사실이라면, 그것은 좋을 것입니다! 우리는 다음 단계로 이동할 준비가되었습니다.

add> 2. add tsconfig.json TypeScript를 활용하기 전에 tsconfig.json을 통해 구성해야합니다. 우리가 시작하는 간단한 방법은 다음 명령을 사용하여 하나를 구축하는 것입니다 :

이것은 우리에게 몇 가지 기본 지식을 제공합니다.

우리는 아직 TypeScript와 상호 작용하지 않았습니다. 우리는 방금 준비하는 데 필요한 조치를 취했습니다. 다음 단계는 파일을 TypeScript로 마이그레이션하는 것입니다. 이를 통해 우리는이 단계를 완료하고 다음 단계로 넘어갈 수 있습니다.

> 3 TypeScript의 아름다움은 단계별로 채택 할 수 있다는 것입니다. 간단한 구성 요소에서 마이그레이션의 첫 부분을 시작할 수 있습니다. 내 프로젝트의 경우 다음과 같이 보이는 버튼 구성 요소로 시작하겠습니다.

를 올바르게 변환하려면 두 가지 작업을 수행해야합니다.

파일 확장자를 .tsx 로 변경하십시오 유형 주석을 추가하십시오 이 구성 요소는 두 가지 소품을 사용하므로 무언가를 변경해야합니다.

<code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest</code>

우리가 아무 것도 깨지지 않도록 프로젝트를 실행하여 모든 것이 제대로 작동하는지 다시 확인해 봅시다. 여기서 React-Scripts는 새로운 변경 사항을 자동으로 감지하고 TSConfig.json을 수정합니다. 바라보다! 이것은 얼마나 아름답습니까?

모든 것이 잘 진행되면 프로젝트는 계속 작동합니다. 등을 두드려! 첫 번째 파일을 TypeScript로 성공적으로 마이그레이션했습니다. 우리가 여기서 멈추고 싶다면 우리는 할 수 있지만 앞으로 나아갈 수 있습니다.

> 4 다음 단계는 프로젝트의 모든 파일에서 3 단계를 수행하는 것입니다. 마이그레이션중인 프로젝트가 상당히 크면이 여러 반복을하는 것이 좋습니다. 그렇지 않으면 자신을 소진 할 수 있습니다.

이 단계에서 사용중인 타사 라이브러리에 따라 추가 패키지를 추가해야 할 수도 있습니다. 예를 들어, 모멘트를 사용하고 있으므로 유형을 DevDependency로 추가하려면 yarn add -d @type/moment를 실행해야합니다.
1. 이 작업을 수행 할 때는 다음과 같은 점을 기억해야합니다.
2. 오류 전에 줄에 // @ts-ignore를 추가하여 TypeScript 오류를 억제 파일이 JSX를 사용하는 경우 (즉,
). 모든 것이 작동하는지 확인하기 위해 프로젝트를 현지에서 실행하십시오 (그들은 있어야합니다)

이 단계를 완료 한 후 어려운 작업이 완료됩니다! 우리의 프로젝트는 TypeScript를 사용하지만 장점을 활용하려면 엄격함을 높여야합니다.

> 5. Tsconfig.json의 엄격함을 향상시킵니다 이제 tsconfig.json에서 엄격한 규칙을 활성화하여 엄격 성을 향상시킬 수 있습니다. 고맙게도, 반응 스크립트는 프로젝트를 로컬에서 실행할 때 모든 유형의 오류를 알려줍니다. 우리는 아래 단계를 따를 것입니다 :

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

규칙 활성화 지역 스타트 업 프로젝트 오류를 수정하십시오

우리는 다음 규칙에 대해이 과정을 반복 할 것입니다 :

"noimplicitany": true "strictnullChecks": true "noimplicitThis": true

"AlwaysStrict": true

나는 속임수를 공유하고 싶습니다. 암시 적으로 유형이있는 것을 발견 하고이 시점에서 그것을 고치는 방법을 잘 모르면 고치지 마십시오. 이것을 만들고 그것을 사용하여 오류를 제거하십시오 :

우리의 목표는 빠르게 앞으로 나아가서 나중에이 문제를 해결하기 위해 돌아 오는 것입니다.

이것은 프로젝트에 더 큰 유형의 안전을 가져올 것입니다. 컴파일러 옵션에 대한 자세한 내용을 보려면 TypeScript 설명서에서 관련 컨텐츠를 읽을 수 있습니다.

이 작업이 완료된 후에는 다음을 대체 할 수 있습니다

"noimplicitany": true "strictnullChecks": true "noimplicitThis": true

"AlwaysStrict": true

이것을 사용하십시오 :

"엄격한": true
• 이것은 또한 이러한 엄격한 옵션을 가능하게합니다 :
strictBindCallApply strictnullChecks strictfunctionTypes
• strictpropertyinitialization
• 이 시점에서 우리는 프로젝트의 표준 엄격함 수준에 도달했습니다. 추가 수표를 추가하려면 다음 규칙을 추가 할 수 있습니다.
• "NounusedLocals": true "NounusedParameters": true "noimplicitreturns": true "nofallthroughcasesinswitch": true
우리가 만족하는 엄격함 수준에 도달하면 다음 단계로 넘어갈 수 있습니다.

> 6. 바로 가기를 청소하십시오 @ts-indore를 추가하거나 FixMelater 유형을 사용한 경우 이제 돌아가서 수정해야합니다. 우리는이 모든 것을 한 번에 수행 할 필요는 없거나 결코 수행 할 필요는 없지만 프로젝트의 최대 유형 안전을 보장하는 마지막 단계입니다.

때때로 이것을 고치려는 노력은 시간의 가치가 없지만 때로는 그만한 가치가 있습니다. 팀과 논의하고 의미가있는 것을 결정해야합니다.

> 7 우리는 그것을했다! 우리는 공식적으로 프로젝트를 TypeScript로 옮겼습니다. 일을 축하하기 위해 시간을 내십시오. 이것은 확실히 사소한 문제가 아닙니다. 특히 대형 코드 기반에서 작업하는 경우.

기억해야 할 것들
• 우리의 작업을 검토 할 때, 반응 프로젝트를 TypeScript로 마이그레이션 할 때 기억해야 할 사항은 다음과 같습니다.
작은 것들에서 시작하십시오

TypeScript를 점차적으로 채택하는 기능을 사용하십시오. 한 번에 하나의 문서를 자신의 속도로 수행하십시오. 당신과 당신의 팀에게 의미가있는 일을하십시오. 한 번에 모든 문제를 해결하려고 시도하지 마십시오.

시간이 지남에 따라 엄격함을 전진시킵니다 처음부터 최대 엄격 할 필요가 없습니다. 이것은 여행입니다. 시간이 지남에 따라 레벨을 높이십시오. 결국, 당신은 편안한 수준에 도달 할 것입니다. 100% 엄격함이 없다면 슬퍼하지 마십시오. 일부 유형 안전은 유형 안전이없는 것보다 낫습니다.

바로 가기 에 의존합니다 이것은 반응 프로젝트를 TypeScript로 마이그레이션하는 유일한 방법은 아닙니다. 그러나 이것은 저에게 효과적입니다. 나는 그것이 당신을 도와주는만큼 도움이되기를 바랍니다.

추가 읽기

typescript와 반응 : 모범 사례 타입 기술을 향상시키는 실용적인 방법 typeScript가 당신을 더 나은 JavaScript 개발자로 만드는 방법 javaScript : 초보자에서 닌자까지, 두 번째 판 원시 반응 및 반응 - 초 에디션

특별한 감사는 Karl Horky에게 감사합니다. Karl Horky에게 감사드립니다. 그는

유형이 혜택이 거의없고 단점이 있기 때문에 권장되지 않는다고 설명했습니다. 자세한 내용은이 Github 토론을 참조하십시오.

FAQ는 TypeScript로 반응 애플리케이션을 마이그레이션하는 것입니다 TypeScript 란 무엇이며 반응 응용 프로그램을 마이그레이션하는 것을 고려해야하는 이유는 무엇입니까? TypeScript는 정적으로 입력 한 JavaScript의 슈퍼 세트로 향상된 유형 확인, 코드 품질 및 공구 지원을 제공합니다. TypeScript로 마이그레이션하면 컴파일 시간에 오류를 포착하고 코드 유지 보수성을 향상 시키며 React 응용 프로그램을 처리 할 때 개발자 경험을 향상시키는 데 도움이됩니다.

반응 응용 프로그램을 TypeScript로 마이그레이션하는 방법은 무엇입니까? 시작하려면 TypeScript 템플릿이있는 React App 만들기와 같은 도구를 사용하여 프로젝트에 TypeScript를 추가하거나 TypeScript를 지원하도록 프로젝트를 수동으로 구성 할 수 있습니다. 또한 .js 및 .jsx 파일의 이름을 각각 .ts 및 .tsx로 바꿔야합니다.

JavaScript 코드를 TypeScript로 변환하는 프로세스는 무엇입니까? 이 과정에는 일반적으로 다음이 포함됩니다. a. javaScript 파일을 .ts 및 .tsx 확장자가있는 TypeScript 파일로 이름을 바꿉니다. b. 변수, 함수 및 소품에 유형 주석을 추가하십시오. c. 유형 오류를 해결하고 TypeScript 컴파일러 식별의 문제를 해결하십시오. d. 인터페이스 및 열거와 같은 TypeScript 함수를 사용하여 데이터 구조 및 상수를 정의하십시오.

반응 응용 프로그램을 단계별로 TypeScript로 이동할 수 있습니까? 예, 응용 프로그램을 단계별로 마이그레이션 할 수 있습니다. 기존 JavaScript 코드 기반을 유지하면서 구성 요소 또는 모듈을 한 번에 하나씩 변환 할 수 있습니다. 이렇게하면 개발 워크 플로를 방해하지 않고 TypeScript로 단계별로 전환 할 수 있습니다.

TypeScript와 React를 사용하면 어떤 이점이 있습니까? 일부 이점으로는 더 나은 코드 품질, 개발자 생산성 향상, 향상된 코드 자동 완성,보다 강력한 리팩토링 도구 및 일반적인 오류 감지가 포함됩니다. 또한 유형 주석을 통해 더 명확하고보다 자체 문서 코드를 제공합니다.

TypeScript로 마이그레이션 할 때 타사 라이브러리 및 종속성을 처리하는 방법은 무엇입니까? 많은 인기있는 라이브러리 (일반적으로 .d.ts 확장자 포함)에 대한 TypeScript 유형 정의 파일을 찾거나 @Types와 같은 도구를 사용할 수 있습니다. 유형 정의를 사용할 수없는 경우 고유 한 유형 정의를 만들거나 Unttyped Libraries를 처리하기 위해 모든 유형의 모든 유형을 사용할 수 있습니다. React Application에서 TypeScript를 사용하도록 개발 도구 및 IDE를 구성하는 방법은 무엇입니까? Visual Studio Code와 같은 가장 인기있는 코드 편집기 및 IDE는 TypeScript를 잘 지원합니다. Editor가 강화 된 TypeScript 통합, 자동 완성 및 오류 점검을 통해 이익을 얻을 수 있도록 Editor를 위해 TypeScript 플러그인 및 확장자를 설치할 수 있습니다.

TypeScript로 마이그레이션 할 때 어떤 일반적인 도전이 있습니까? 일반적인 과제로는 유형 오류 해결, 유형 정의가없는 타사 라이브러리 처리, TypeScript 유형 시스템 이해, TypeScript가 시행하는 엄격한 유형 확인에 적응하는 것이 포함됩니다.

위 내용은 React 앱을 TypeScript로 마이그레이션하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!