Comment porter une grande base de code de composant React UI vers TypeScript

salut! Je m'appelle Ivan Grekov et je travaille en tant que développeur d'interface utilisateur au sein de l'équipe frontend de Badoo. Les principales tâches de notre équipe sont de créer de nouvelles interfaces utilisateur et de maintenir les interfaces utilisateur existantes pour les sites Web et les applications Badoo et Bumble. 

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