[improvement][typings] - proper type resolution completion #170
Description
Steps to Reproduce
Any stylesheet.create() object key click for type completion in vscode
Example
const containerStylesRaw = {
basic: basicContainer,
center: centerContainer,
}
const containerStyles = EStyleSheet.create(containerStylesRaw)
Expected Behavior
Expect to resolve the object and key location in the .ts file.
Actual Behavior
The typings resolve to the node_modules/react-native-extended-stylesheet/types/index.d.ts declaration file
declare namespace EStyleSheet {
type AnyObject = {[key: string]: any};Show the code
Possible temp fix is to have a basic object and then export the EStylesheet and coherce the type as a typeof the raw object.
Example:
const containerStylesRaw = {
basic: basicContainer,
center: centerContainer,
}
const containerStyles = EStyleSheet.create(
containerStylesRaw,
) as typeof containerStylesRawI'm doing this as a workaround and it will resolve to the containerStylesRaw object.
Followup solution
Replace the create and child methods with the NamedStyles type used in Stylesheet.create.
Make only the return use the type join to avoid having type errors when combining View, Text style properties in a single .create()
diff --git a/node_modules/react-native-extended-stylesheet/types/index.d.ts b/node_modules/react-native-extended-stylesheet/types/index.d.ts
index 74d1762..683521f 100644
--- a/node_modules/react-native-extended-stylesheet/types/index.d.ts
+++ b/node_modules/react-native-extended-stylesheet/types/index.d.ts
@@ -10,18 +10,18 @@
* Adding key augmention is tracked here: https://github.com/Microsoft/TypeScript/issues/12754
*/
-import {StyleSheet} from 'react-native';
+import {StyleSheet, ViewStyle, TextStyle, ImageStyle } from 'react-native';
export = EStyleSheet;
declare namespace EStyleSheet {
- type AnyObject = {[key: string]: any};
+ type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };
type Event = 'build';
- export function create(styles: AnyObject): AnyObject;
- export function build(rawGlobalVars?: AnyObject): void;
+ export function create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T | NamedStyles<T>): T;
+ export function build<T>(rawGlobalVars?: NamedStyles<T> | Record<string, any>): void;
export function value(expr: any, prop?: string): any;
- export function child(styles: AnyObject, styleName: string, index: number, count: number): AnyObject;
+ export function child<T>(styles: NamedStyles<T>, styleName: string, index: number, count: number): NamedStyles<T>;
export function subscribe(event: Event, listener: () => any): void;
export function clearCache(): void;