In the midst of starting my inaugural TypeScript project, I encountered a rather selective compiler:
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'.
*/
Despite this hurdle, my attempts to search for types like TextAlignProperty using Ctrl+Shift+O (in VSCode) proved unfruitful. Is there a workaround for this issue?
P.S. After some exploration, I discovered that the types are actually defined in node_modules\csstype\index.d.ts, and so I implemented the following:
import * as CSS from 'csstype';
...
let right = 'right';
let test = <div style={{textAlign:right as CSS.TextAlignProperty}}>Text</div>;
However, a simpler solution presented itself:
let right = 'right';
let test = <div style={{textAlign:right} as any}>Text</div>;
Hence, the primary question remains: how can one research something without prior knowledge of the module name defining it?