IntelliSense: Почему я не могу искать типы DOM / CSS?

Question

Пытаясь написать свой первый проект TypeScript, компилятор был очень разборчив:

let test = <div style={{textAlign:'right'}}>Text</div>; // OK

let right = 'right';
let test2 = <div style={{textAlign:right}}>Text</div>; /***ERROR***
   Type '{ style: { textAlign: string; }; }' is not assignable to 
   type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
    Type '{ style: { textAlign: string; }; }' is not assignable to type 
    'HTMLAttributes<HTMLDivElement>'.
     Types of property 'style' are incompatible.
      Type '{ textAlign: string; }' is not assignable to type 'CSSProperties'.
       Types of property 'textAlign' are incompatible.
        Type 'string' is not assignable to type 'TextAlignProperty'.
*/

Однако я не мог найти такие типы, как TextAlignProperty с помощью Ctrl + Shift + O (в VSCode). Есть ли способ сделать эту работу?

P.S. В конце концов я понял, что типы определены в node_modules \ csstype \ index.d.ts и что я могу написать

import * as CSS from 'csstype';
...
let right = 'right';
let test = <div style={{textAlign:right as CSS.TextAlignProperty}}>Text</div>;

Но есть более простой способ:

let right = 'right';
let test = <div style={{textAlign:right} as any}>Text</div>;

Таким образом, настоящий вопрос здесь в том, как вы что-то ищете без знания названия модуля, который его определяет?

Answer 1

Один подход, запустите Go to definition на textAlign в <div style={{textAlign:'right'}}>Text</div>;. Это откроет файл d.ts, показывающий ожидаемый тип, который вы можете затем детализировать:

Или используйте поиск по символу рабочей области , чтобы сразу перейти к типу по имени: