typescript - 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 中）。有没有办法使这项工作？

PS最终我发现类型是在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>;

所以这里真正的问题是，你如何在不知道定义它的模块名称的情况下查找某些东西？

标签： typescriptintellisense

Answer 1

一种方法，Go to definition在textAlign. <div style={{textAlign:'right'}}>Text</div>;这将打开显示预期类型的​​ d.ts 文件，然后您可以进一步深入了解：

或者使用工作区符号搜索直接按名称跳转到类型：