大規模なReactUIコンポーネントコードベースをTypeScriptに移植する方法

こんにちは！私の名前はIvanGrekovで、BadooのフロントエンドチームでUI開発者として働いています。私たちのチームの主なタスクは、BadooおよびBumbleのWebサイトとアプリケーションの新しいユーザーインターフェイスを作成し、既存のユーザーインターフェイスを維持することです。 

2019 , . 630 React UI- TypeScript. , TypeScript UI-, .

- UI-: . -, JS- TypeScript, (type safety). 

UI- , .

• UI-. - , , . React prop-types. , prop-types . - API , .

• TypeScript. : .

.

. - . React.js. 

- UI- , . :

• , - JavaScript;

• UI-, stateless . 

UI-, -, .

UI- , . , , , JavaScript React.js. TypeScript, . : TypeScript .

. : . , .

: , . , , — PDCA (Plan-Do-heck-Act). : , , . : , , .

, . .

, , . cloc:

554 JSX-, 227 — 227 — VRT-. TypeScript 62 62 .

— : , , . , , — , . . 

, . , .

— . , . — ? 

. , . , , . , 2000 .

, . , . , . 

.

, . . .

, . , , . madge, . , madge webpack-. , .

, TypeScript , : .

, , . 

TypeScript. . , .

, . , . , TypeScript ?

. :

• TS basic — , ;

• TS component — , ;

• TS view — .

TypeScript . , . , . .

, . ? ? (Enum) (Union)? ?

, , . . , . , : .

, .

0 —

. , , . , TypeScript, . , TypeScript,   — . , TypeScript, , . 

. , . -, , , . -, ( ) , . 

:

• CSS-, ;

• , ;

• Enums Enums;

• .

- . JS-: ESLint Prettier. , . TypeScript. , .

1 —

. ( ) , . TypeScript-, basic.

, , . , TypeScript, VRT- . VRT , , .

: ,

, , . , , . , . 

.

, .

, , . , , , . :

• — TypeScript;

• UI- — ;

• — .

, . . , - , . , . .

, , . — , .

, .

madge cloc, . , , . , . : ? ? ? .

. TypeScript .

. .

, JavaScript TypeScript . , .

TypeScript . TypeScript.

. , . , .

, QA , . Prettier ESLint , .

:

. : , . , VSCode Lyft TypeScript React-. React 16.3.14 16.4.0, , . , .

codemod’ TypeScript, GitHub npm. , .

.

React TypeScript

, React UI- TypeScript. , ( ). , TypeScript.

JavaScript TypeScript:

1. Choosing Between TypeScript vs JavaScript: Technology, Popularity

2. How TypeScript is making programming better

3. The TypeScript Tax

, TypeScript:

1. How does TypeScript work? The bird’s eye view

2. Creating web apps via TypeScript and webpack

3. Set Up a Typescript React Redux Project

4. React TypeScript: Basics and Best Practices

5. Setting TypeScript For Modern React Projects Using Webpack

6. Setting up efficient workflows with ESLint, Prettier and TypeScript

7. The Practical Guide to Start React Testing Library with TypeScript.

TypeScript React:

1. How to move your project to TypeScript — at your own pace

2. How to Easily Migrate From JavaScript to TypeScript

3. Gradually using TypeScript in Your React Project

4. Porting to TypeScript Solved Our API Woes

5. How to Migrate a React App to TypeScript

6. Convert Your Javascript React App to TypeScript, the Easy Guide

7. TypeScript and React

8. Using TypeScript with React

9. The Great CoffeeScript to Typescript Migration of 2017

10. 12 TypeScript React-

, TypeScript React:

1. Build a Tic Tac Toe App with TypeScript, React and Mocha

2. A Practical Guide to TypeScript — How to Build a Pokedex App Using HTML, CSS, and TypeScript

3. Create a React component library with TypeScript and Storybook

4. How To Build a Customer List Management App with React and TypeScript

5. Using TypeScript in Grommet Applications

TypeScript:

1. TypeScript Best Practices — Useless Interfaces, Classes, and Promises

2. React with TypeScript: Best Practices

3. Great import schism: Typescript confusion around imports explained

4. TypeScript