Cómo portar una gran base de código de componentes de React UI a TypeScript

¡Hola! Mi nombre es Ivan Grekov y trabajo como desarrollador de UI para el equipo de frontend de Badoo. Las principales tareas de nuestro equipo son crear nuevas interfaces de usuario y mantener las existentes para los sitios web y aplicaciones de Badoo y 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