如何将大型React UI组件代码库移植到TypeScript

你好！我叫Ivan Grekov，我是Badoo前端团队的UI开发人员。我们团队的主要任务是为Badoo和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