TypeScript 또는 JavaScript로 반응: 어느 것이 더 낫습니까?

TypeScript란 무엇입니까?

오픈 소스 TypeScript는 TypeScript 코드를 JavaScript 코드로 변환하는 컴파일러를 제공합니다. 해당 언어는 오픈 소스 및 크로스 브라우저입니다. js 언어에 논리적 결함이 거의 없다고 가정합니다. 이 경우 .js 스크립트의 이름을 .ts 파일로 변경하고 적절한 TypeScript 코드 수신을 시작하여 TypeScript를 사용할 수 있습니다.

JavaScript 언어는 TypeScript의 특수 버전입니다. Microsoft의 기술 펠로우인 Anders Hejlsberg가 2012년에 도입하여 만들었습니다. JavaScript가 대중화되면서 JS 코드가 더 커지고 이해하기 어려워졌기 때문에 Typescript가 개발되었습니다. 프로그래머가 서버 측 기술을 위해 JavaScript를 사용하기 시작했을 때 이것은 더 명확해졌습니다.

자바스크립트란?

사용자 페이지가 더 나은 콘텐츠, 시각화, 만화 2D/3D 그래픽, 비디오 레코드 플레이어 탐색 등을 보여주고 볼 수 있도록 정적 데이터를 표시하는 것 이상의 작업을 수행할 때마다 JavaScript는 다음과 같습니다. 아마도 관련되어 있습니다. JavaScript는 웹 페이지에 고급 구조를 통합할 수 있는 스크립팅 또는 코딩 언어입니다. 표준 웹 기술로 구성된 케이크의 세 번째 계층, 첫 번째 두 가지(HTML 및 CSS)입니다.

React는 JavaScript 또는 TypeScript와 함께 더 나은가요?

처음 검사에서 표준 React TypeScript의 코드와 JavaScript 사이에 차이가 없는 것으로 보입니다. TypeScript가 코드 세트이고 JavaScript의 조상이라는 점을 감안할 때 이는 전적으로 예상된 일입니다. JavaScript와 TypeScript의 구분은 지난 몇 년 동안 크게 변경되지 않았습니다. 당신이 그들을 알고 있다면 당신은 갈 준비가되어 있습니다.

미래의 기술 발전은 소프트웨어 생산을 가속화하여 프로그래머에 대한 수요를 증가시킬 수 있습니다. 아무 언어나 사용하세요. 소규모 및 주요 프로젝트 모두에서 개발이 예상됩니다. 국제 팀이 있는 대규모 프로젝트의 경우 TypeScript를 선택하고 훌륭한 팀과의 간단한 작업을 위한 JavaScript를 선택합니다.

자바스크립트가 널리 사용됩니다. 그들은 그것을 분석하고 언어가 불안정하고 예측할 수 없다는 것을 발견합니다. 필요한 경우 JS 프레임워크를 TypeScript로 변환할 수 있습니다. 인기있는 JS 시스템을 TS로 변환하려면 노동이 필요합니다.

.d.ts 파일은 문서화되어야 하며 각 이식된 라이브러리에 대해 반환된 모든 방법론을 포함해야 합니다. jQuery의 이식에는 더 많은 노력이 필요했습니다. 아마도 이것은 그리 어렵지 않을 것입니다. TypeScript는 IDEA, WebStorm, Expressive, Particle 등에서 지원됩니다.

TypeScript와 JavaScript의 React 코드 및 파일 유형

처음 검사에서 표준 React TypeScript의 코드와 JavaScript 사이에 차이가 없는 것으로 보입니다.

TypeScript가 코드 세트이고 JavaScript의 조상이라는 점을 감안할 때 이는 전적으로 예상된 일입니다. 이것은 모든 JavaScript 기반 프로그래밍이 TypeScript 파일도 실행할 수 있음을 의미합니다. 마찬가지로 모든 SASS 언어가 합법적인 CSS 코드가 될 수 있는 것은 아닙니다. 이 아이디어는 모든 CSS가 SASS 코드에서 허용됨을 나타냅니다.

그러나 컴퓨터는 TypeScript 언어를 실행할 수 없으므로 대부분의 TypeScript 응용 프로그램에 tsconfig.json이 있습니다. 이 구성 파일은 TypeScript 컴파일러가 작동하는 방식을 변경하고 TypeScript 코드를 JavaScript로 변환합니다. 그러면 브라우저가 이를 이해하고 사용할 수 있습니다.

TypeScript와 JavaScript React 애플리케이션의 주요 차이점은 전자의 파일 이름입니다. 예를 들어 TSX는 TSX이고 후자는 .js입니다.

Typescript에서 React 프로젝트를 만드는 방법은 무엇입니까?

환경에서 create-react-app 라이브러리를 사용하고 다음 명령을 사용하여 새 TypeScript React 프로젝트를 만들 수 있습니다.

 npx create-react-app my-app --template typescript

또는,

 yarn create react-app my-app --template Typescript

TypeScript로 변환하려는 기존 JavaScript React 프로젝트가 있는 경우 이 명령을 실행할 수 있습니다.

 npm install — save typescript @types/node @types/react @types/react-dom @types/jest

또는,

 yarn add typescript @types/node @types/react @types/react-dom @types/jest

명령을 실행한 후 모든 .js 파일의 이름을 .tsx로 바꾸고 서버를 다시 시작한 다음 시작할 수 있습니다.

1. 버그 캐처

TypeScript가 수정할 수 있는 나머지 결함의 비율은 감지할 수 없는 버그가 다른 수단으로 더 많이 설정될 때 증가하지만, 이는 TypeScript가 여전히 개선할 수 있는 전체 문제 수도 감소합니다. 따라서 비율은 증가할 수 있지만 발견된 문제의 수는 약간 변경될 수 있습니다.

2. IDE의 IntelliSense 도우미

List Components, Parameter Info, Rapid Info 및 Entire Word는 코드 완성 도구인 IntelliSense에서 제공하는 일부 기능입니다. 몇 번의 키 입력으로 속성 및 메서드에 대한 호출을 추가하고, 입력 중인 인수를 기록하고, 이러한 기능 덕분에 사용 중인 소프트웨어에 대해 조금 알 수 있습니다.

3. 유형 시스템

React TypeScript 프로젝트의 코드에서 Bug Catcher 및 IntelliSense를 활성화할 수 있도록 변수 또는 개체를 엄격하게 입력하는 방법이 궁금할 수 있습니다. Reactive TypeScript 프로젝트에서 TypeScript 유형 프로세스를 제공하기 위해 염두에 두어야 할 세 가지 사항이 있습니다.

1. 객체/배열에 대한 상호 작용 및 기본 유형 변수에 대한 하위 유형을 선언합니다.

객체의 필드를 선택 사항으로 만들려면 연산자를 사용할 수 있습니다. TypeScript가 코드를 확인할 때 귀찮게 하는 것을 방지합니다.

2. 필요할 때마다 기능 구성 요소 유형을 선언합니다.

3. 무료로 사용할 수 있습니다. 값으로 속성을 초기화하면 TypeScript가 즉시 품질을 선택할 수 있습니다.

React에서 TypeScript를 사용해야 하는 5가지 이유

TypeScript는 지난 몇 년 동안 프론트 엔드 프로그래머들 사이에서 수요가 많았습니다. 개선된 재사용성, 코드 균일성 및 향후 플랫폼 지원이 성공에 기여한 몇 가지 요소입니다. 또한 반응은 공정성을 유지하여 프로그래머에게 TypeScript 또는 JavaScript를 사용할 수 있는 옵션을 제공했습니다. 대조적으로, 다른 많은 플랫폼과 라이브러리는 기본적으로 TypeScript를 채택했습니다.

이 게시물에서는 React 앱에 TypeScript를 사용하는 데 찬성하는 5가지 설득력 있는 주장을 살펴보겠습니다.

1. 구성 요소는 읽고 이해하기 쉽습니다.

Prop 유형은 TypeScript를 사용하여 간단하게 정의할 수 있으므로 코드가 훨씬 더 정확하고 이해하기 쉽습니다. 또한 IntelliSense 및 정적 유형 검사에 대한 지원이 포함됩니다.

함께 이러한 요소는 개발 프로세스를 개선하고 결함 가능성을 줄입니다. 또한 Prop 유형에 메모를 추가하면 구성 요소 정의를 더 쉽게 이해할 수 있습니다.

2. 더 나은 JSX 지원

TypeScript + React의 또 다른 이점은 JSX용 IntelliSense 및 코드 합성을 개선했습니다. Bit를 사용하면 프로젝트 전반에 걸쳐 독립적인 구성 요소를 간단하게 배포, 설명 및 재사용할 수 있습니다. 이를 활용하여 확장 가능한 애플리케이션을 만들고 일관된 디자인을 유지하며 코드 재사용을 촉진하고 다른 사람과 협력하고 전달을 앞당길 수 있습니다.

3. 공유 라이브러리에서 기본적으로 TypeScript 지원

몇 년 전에 TypeScript를 사용하고 있다고 가정합니다. 이 경우 타사 라이브러리에 대해 등장한 개념을 찾는 것이 얼마나 실망스러웠는지 기억할 것입니다. 그러나 이제 TypeScript가 빠르게 인기를 얻고 있습니다. 가장 널리 사용되는 라이브러리는 유형 정의를 지원합니다. 또한 유형 정의는 React 라이브러리 아키텍처에서 지원되므로 더 이상 이에 대해 걱정할 필요가 없습니다.

4. 현재 진행 중인 프로젝트에 대한 점진적인 시행

TypeScript를 선택하는 것은 단순한 온/오프 결정이 아닙니다. 대신 당시의 프로그램 상태에 따라 점진적으로 변경됩니다. 예를 들어 현재 React 프로젝트에 TypeScript를 사용하기로 선택했다고 가정해 보겠습니다. 그런 상황에서 TypeScript의 사용을 점진적으로 확장하면서 TypeScript와 JavaScript를 동시에 운용하는 방법을 고려해야 합니다. 또한 TypeScript 컴파일러 매개변수를 설정하여 점진적으로 마이그레이션할 수 있습니다.

5. 일반적으로 IntelliSense 및 정적 형식 유효성 검사의 장점

ㅏ. 정적 유형 테스트

정적 유형 검사로 인해 오류를 더 빨리 발견할 수 있습니다. 앞서 언급한 예는 get details 메소드에 대한 입력으로 숫자가 아닌 문자열이 필요하다는 것을 적절하게 인식합니다.

비. 더 나은 IntelliSense

TypeScript 정적 데이터 유효성 검사와 IntelliSense가 결합된 경우 IntelliSense가 100% 정확한 상태를 유지한다고 믿을 수 있습니다.

씨. 리팩토링 향상

우리는 정확한 언어와 변경 사항을 알고 있기 때문에 TypeScript를 사용하면 리팩토링이 훨씬 더 간단합니다. 또한 문제가 빨리 발견되면 손상을 입을 위험이 없습니다.

디. 정의되지 않은 실수 감소

TypeScript 인터프리터는 추가로 트랜스파일 시 Undefined 오류를 식별하므로 실행 시 발생할 가능성이 줄어듭니다.

이자형. 향상된 가독성 및 유지 관리

코드베이스는 유형 정의를 사용하여 훨씬 더 이해하기 쉽고 유지 관리됩니다. 객체 지향 개발 원칙을 고수하고 인터페이스와 같은 구조를 활용하여 결합을 최소화하는 방식으로 코드를 구성할 수 있습니다.

에프. TypeScript 사용 문제가 해결되었습니다.

이전에 TypeScript의 장점에 대해 이야기한 것을 감안할 때 채택을 위해 더 나은 장비를 갖추기 위한 단점에 대해 자세히 알아보겠습니다.

g. 학습을 위한 곡선

TypeScript 사용을 시작하는 것은 가파른 학습 곡선으로 인해 어려울 수 있습니다. 특히 직원이 기본 JavaScript만 사용한 경험이 있는 경우에는 더욱 그렇습니다. 이 상황에서 가장 좋은 조치는 위에서 설명한 점진적 적응을 채택하는 것입니다.

그러나 그룹이 이미 Java 또는 C#Understanding Typescript와 같은 동적으로 유형이 지정된 언어를 사용한 경험이 있다면 그렇게 까다롭지 않습니다.

시간. 타사 라이브러리에 유형 정의가 없습니다.

TypeScript의 인기가 높아짐에 따라 이는 이례적인 상황입니다. 그러나 TypeScript의 공식 문서는 정의가 누락된 라이브러리를 실행하는 경우 유용한 조언을 제공합니다. 이것을 인용하십시오.

나. 계산 기간

당연히 소스 코드를 구성하는 데 몇 밀리초가 더 소요됩니다. 소스 코드는 추가 생성 계층을 통과해야 하기 때문입니다. 그러나 대부분의 경우 이것은 명백하지 않을 것입니다. 개발 전문성 측면에서 장점과 문제 발생 가능성이 적다는 점은 오랜 노력이 필요하다는 단점을 능가할 것입니다.

마무리

그것은 단기적인 고통과 장기적인 보상 사이의 연결입니다. TypeScript 프로젝트를 시작할 때 모든 저작 도구를 설정하는 것이 매우 어렵고 시간이 많이 소요될 수 있습니다. 그러나 앱이 성장함에 따라 이러한 상용구가 엄청난 도움이 되며 속도를 높이고 오류 가능성을 줄인다는 것을 알게 될 것입니다. 이 기사가 당신을 놀랍게 포착하고 React 프로젝트에서 TypeScript 활용의 가치를 인식하는 데 도움이 되었기를 바랍니다.