Зачем разрабочику линейки React компонентов использовать TypeScript?

Конечно же что бы его разработчики конечных приложений делали свои приложения быстрее!

Например, разработчик добавил в свою линейку компонентов новый простой компонент, который рисует текст и вызывает колбек для получения дополнительного текста:

function MyLabel({ text, onGetText } : any) {
    return
        <div>
            text1: { text}, 
            text2: { onGetText({ number: 42 }) }
        </div>;
}

С такой декларацией атрибутов компонента легко прошляпить разнообразные опечатки при его использовании в своем приложении:

• <MyLabel text={11}></MyLabel> - передать число вместо текста
• <MyLabel text={{number: 11}}></MyLabel> - передать объект вместо текста
• <MyLabel onGetText={() => { return 42; }}></MyLabel> - передать функцию с return type Number вместо String
• <MyLabel onGetText={(number1 : String) => { return number1; }}></MyLabel> - ожидать получение String вместо Object
• <MyLabel onGetText={({ number1 : any } : any) => { return number1; }}></MyLabel> - перепутать имя свойства в аргументе

Что бы этого не произошло можно сделать так:

1. Объявить тип аргументов для колбек-функции: объект с свойством 'number' типа 'string'
   
   type MyLabel_onGetTextEventArgs = {
     number: Number
   }
   
   
2. Объявить тип самой колбек-функции: принимает объект "нашего" типа, возвращает 'string'
   
   type MyLabel_onGetTextEvent = (args: MyLabel_onGetTextEventArgs) => string;
   
   
3. Объявить интерфейс для 'props' компонента: два свойства 'string' и "наш" тип
   
   interface MyLabel_Props {
     text?: string,
     onGetText?: MyLabel_onGetTextEvent
   };
   
   
4. Использовать новый тип для 'props' в компоненте:
   
   function MyLabel({ text, onGetText } : MyLabel_Props) {
       return
           <div>
               text1: { text}, 
               text2: { onGetText({ number: 42 }) }
           </div>;
   }
   
   

С новой декларацией intellisense начнет подсказывать свойства сразу при наборе первых букв, а компилятор укажет на такие опечатки:

1. "Type 'number' is not assignable to type 'string'." для
   
   const onGetTextHandler : MyLabel_onGetTextEvent = ({ number } : any ) => { return 20; }; 
   
   
2. "Property 'number1' does not exist on type 'MyLabel_onGetTextEventArgs'." для
   
   const onGetTextHandler = ({ number1 } : MyLabel_onGetTextEventArgs ) => { return "20"; }; 
   
   
3. "Type '{ number: number; }' is not assignable to type 'string'." для
   
   const onGetTextHandler : MyLabel_onGetTextEvent = ({ number } : MyLabel_onGetTextEventArgs ) => { return { number: 11 }; }; 
   
   
4. "Type 'number' is not assignable to type 'string | undefined'" для 
   
   <MyLabel text={11}></MyLabel>
   
   
5. "Type '{ nmb: number; }' is not assignable to type 'string'." для 
   
   <MyLabel text={{ nmb: 42 }}></MyLabel>
   
   
6. "Type '() => number' is not assignable to type 'MyLabel_onGetTextEvent'." для 
   
   <MyLabel onGetText={() => { return '42'; }}
   
   
7. "Type '(args: MyLabel_onGetTextEventArgs) => number' is not assignable to type 'MyLabel_onGetTextEvent'." для
   
   <MyLabel onGetText={(args) => { return 42; }}></MyLabel>
   

Каждая из таких опечаток может уйти конечным пользователям и спровоцировать недовольство.

А такие декларации на TypeScript помогут избежать этого.