from React.js to Vue.js+TypeScript: 이민 후 새끼손가락에 부딪힌 포인트 목록

TL;DR

1년 정도의 React 사용자는 Vue입니다.js+TypeScript로 옮겼습니다.

물론 새끼손가락에 부딪혔기 때문에 부딪힌 요점을 공유한다.

이주를 도와주세요.

이 항목의 의미/제재

4월의 새로운 생활, 새로운 프로그래밍 환경에서 잠수하신 졸업생 여러분 수고하셨습니다.나도 잠수하고 있어.저는 학창시절에 React(not TypeScript) 사용자였지만 업무적으로는 Vue였습니다.js+TypeScript 환경에서 인코딩합니다.그곳에서 곤란한 것은 from Python to Ruby 같은 이주 안내서를 찾을 수 없다는 것이다.Vue.js 공식 홈페이지에는 Vue가 있습니다.js vs 다른 라이브러리에 대해 서술되었습니다., 당연히 TypeScript와 조합하여 Vue가 됩니다.js와의 비교는 언급하지 않았습니다.
Vue.저는 js+TypeScript의 공식 지원도 충실하고 인구가 많은 환경이라고 생각하기 때문에 React에서 오신 분들도 많으시죠.이 항목은 이런 사람을 대상으로 독자, React.js에서 Vue까지.js+TypeScript로 이주하는 지침이 되었으면 좋겠습니다. (물론 가장 큰 목적은 제가 복습하는 것입니다. 억지로 외우는 것은 기본이기 때문입니다.)
참고자료가 많아서 다행이다.제재로 아래의 보도I created the exact same app in React and Vue. Here are the differences.이 글의 취지는 두 프레임워크로 같은 ToDo 응용 프로그램을 만들고 이를 비교하는 것이다.이 항목은 Vue입니다.js+TypeScript 환경으로 마이그레이션합니다.이런 차이를 공유함으로써 이주에 대한 요점을 공유할 수 있었으면 좋겠다고 생각합니다.
저장소는 다음 URL에 있습니다.
https://github.com/IKKO-Ohta/vue-ts-todoApp

Vue.js/TypeScript 개요 + 조합해서 사용하면 뭐가 좋아요?

우선 전제부터 확인해.Vue.js와 TypeScript를 가볍게 눌러 조합의 효용을 확인합니다(전부 공식 홈페이지 내용의 발췌문).

Vue.js

Vue.js는 UI를 구축하는 프레임워크로 Evan Yo@youyuxi가 개발한 라이브러리입니다.React, Angular 등과 비교
1. 다시 활성화하는 동작/footnote {즉, React. Component.setState () 처럼 명시되지 않더라도, state 변경 후 렌더링 방법이 실행됩니다. 이것은 제 이해입니다}
2.template-script-style 3층 구조
3. 가상 DOM이 있습니다.
공식 가져오기 페이지 매우 참고 가치가 있다.

TypeScript

TypeScript는 정형화된 초집합 JavaScript입니다.개발자는 MS입니다.TypeScript는 다음과 같은 특징을 가지고 있습니다.
1. 이전 JS Product와 친밀하여 TypeScript의 일부만 교체하거나 모듈을 서로 가져오고 내보낼 수 있습니다.
2.scale의 JavaScript너는 높은 생산성을 가져올 수 있는 도구와 습관을 채택할 수 있다.
3. 최신 JS를 포착했기 때문에 ES2015와 앞으로 나올 ES2018에도 대응할 수 있다.
공식 가져오기 페이지 이외에https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter 등도 참고할 수 있다(Vue,angular 등 기동기 그룹도 있다).

Vue.js+TypeScript의 기쁨

그것은 잠재적인 운행 오류를 방지할 수 있다.또한 유형 정보가 첨부되어 있어 재구성이 수월해지고 각종 도구를 활용할 수 있어 팀 개발에 좋다.Vue 프로젝트가 커짐에 따라 TypeScript 배포는 중요한 요소가 될 것입니다.
Vue는 TypeScript를 공식 지원하며 이 배포 라이브러리를 제공합니다.또한 Vue-CLI는 TypeScript를 초기 설정으로 활용하여 모형을 만들고 공식 루트 라이브러리도 추적하고 있어 활용할 때 좋은 환경이라고 할 수 있다.

새끼손가락에 부딪힌 적분표

이상의 이유로 점점 더 인기를 끌고 있는 Vue.js+TypeScript 환경이지만 React를 터치한 경험치가 있어도 가져오는 데 장애가 있을 수 있습니다.
기본 문법의 설명을 정식 문서의 배치에 양보하고 다음에 이동할 때 만나는 요점을 열거한다.
장르는 다음 기사와 저장소를 포함합니다.

I created the exact same app in React and Vue. Here are the differences. by @sunilsandhu
https://link.medium.com/RsDm2oXDJT
リポジトリ:
https://github.com/sunil-sandhu/vue-todo
https://github.com/sunil-sandhu/react-todo
日本語訳もあります:
ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 https://coliss.com/articles/build-websites/operation/javascript/same-app-in-react-and-vue-here-are-the-differences.html

제가 만든 Vue입니다.js+TypeScript 버전입니다.
https://github.com/IKKO-Ohta/vue-ts-todoApp
특히
https://github.com/IKKO-Ohta/vue-ts-todoApp/blob/master/src/ToDo_ts.vue
에서 설명한 대로 해당 매개변수의 값을 수정합니다.
비교로, 원시 vue로 쓴 원본 자료 라이브러리의 상응하는 프로그램
https://github.com/sunil-sandhu/vue-todo/blob/master/src/ToDo.vue
태그 요소의 표시 속성을 수정합니다.

대상에 대한 형식 설명/인터페이스 정의

근처

  interface ATodo {
    id: number;
    text: string;
  }

원래 프로그램this.list의 원소는object이고,list의 유형 성명은 원소type+[]이기 때문에 어떤 방식으로 원소의 유형을 성명해야 한다.TypeScript에서 object[] 등 쓰기 대신 인터페이스+[]를 사용합니다.인터페이스는 보통 파스카 사례로 표시된다.
또한any로 인터페이스를 대체하여 받아들일 수도 있지만 물론 유형에 대한 정보는 사라지기 때문에 이상적인 작법은 아니다.

apply,map,filter 등 함수를 매개 변수로 하는 함수 사용하기

제48행

 const newId = Math.max.apply(null, this.list.map((t: ATodo) => t.id)) + 1;

인터페이스 부분을 즉시 사용하십시오.TypeScript에서 아로 함수를 사용할 때 위의 방법으로 쓰십시오.인터페이스로서 todoATodo를 정의했기 때문에 가독성이 높아진 줄을 느낄 수 있습니다.

import 범위 설정/@Components

제27행

   @Component({
    components: { ToDoItem }
  })

React의 느낌을 보면 새끼손가락에 부딪히기 쉬운 곳이라고 생각합니다.<template> 다음은import의 구성 요소<ToDoItem/>를 설명하지만, import 문장만 맨 위에 쓰면 템플릿에 정의된 구성 요소를 정확하게 설명할 수 없습니다.@Component 내부에서 디코더를 사용하는 서브어셈블리를 선언합니다.vue 측면에서 볼 때, 이것은component 속성을 디코더로 옮기는 쓰기 방법이다.
이것에 관해서는 유효한 문서가 없지만 실제 실시를 보면 @component에게 맡길 수 있습니다.

/ts-loader 설정을 성공적으로 변환할 수 없습니다.

웹팩은 vue-cli3.0에 포함되어 있습니다.따라서 TypeScript가 없는 상황에서 만든 vue 프로젝트에서 TypeScript를 가져오기 위해서는 웹 페이지 측면에 ts-loader를 설정해야 합니다.
구체적으로 말하면 vue.config.새 js 파일을 통해 대응하십시오.vue-cli 공식 문서에 설명이 있습니다.
실제로 우리는 새로운 프로젝트를 다시 시작할 수 있다

 $vue create hoge

에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.

번외: 확장자는 입니다.bue

설정에 따라 다르지만 TypeScript를 사용하더라도 파일 확장자는 즉시 사용됩니다.ts가 된다는 게 아니야.구성 파일이나 편집기 설정과 일치하게 결정하면 됩니다. 특히 Vue.js+TypeScript 프로젝트에서 전형적인 3층 구조를 가진 구성 요소는 다음과 같습니다.vue일 거예요.
더 자세히 말하면 이러한 3층 구조의 파일은 단일 파일 구성 요소 이라고 불리며, 단일 파일 구성 요소가 TypeScript를 이용하더라도 확장자는 라고 부른다.vue.

번호 외: CSS minification error

원본 파일 124행

calc(auto+1px)

예invalid css입니다. 초기에 설정된 vue-cli-서비스에 구축되면 미니픽션에 이끼가 끼게 됩니다.

ERROR  Error: CSS minification error: Lexical error on line 1: Unrecognized text.

해당되지 않을 뿐만 아니라 지적을 받고 깜짝 놀랐다.

Vue.저는 js로 이주했어요.

이주 첫날 인기 있는 곳입니다.더 많은 것을 계획하기 때문에 매번 적극적으로 사기의 학습 주기를 돌릴 수 있다면 좋겠다고 생각합니다.또한 이상의 이유로 이주를 하게 되었기 때문에 Vue.나는 js+TypeScript 부근에 적극적으로 관심을 기울일 계획이다.만약 무슨 일이 있으면 @samayotta 전에 지도해 주십시오.
그럼, 우리 프로그래밍합시다.나도 프로그래밍하러 간다.