declaration file for DefinitelyTyped

[mauricekraus]

Would it be possible to deliver a TypeScript type definitions file, for those people how use react-native with typescript

[vitalets]

Good point! I would appreciate if someone help with it.

[mauricekraus]

alright I will try to come up with something

[vitalets]

@mauricekraus thank you! 👍

[juliusspencer]

Hi,

Just put this together which is working for me:

declare module 'react-native-extended-stylesheet' {
    function value(expr: any, prop?: string): any;
    function create(obj: Object): any;
    function build(rawGlobalVars: any): void;
}

[Risbot]

Hi,

for now you can use this:

const EStyleSheet = require('react-native-extended-stylesheet').default as any;

const styles = EStyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    }
});

[lukephills]

Here is a similar approach to 'react-native-stylesheet' which works well for me.

declare module 'react-native-extended-stylesheet' {
  type NamedStyles<T> = { [P in keyof T]: any };
  function value(expr: any, prop?: string): any;
  function create<T extends NamedStyles<T>>(styles: T):  { [P in keyof T]: RegisteredStyle<T[P]> };
  function build(rawGlobalVars: any): void;
}

type RegisteredStyle<T> = number & { __registeredStyleBrand: T };

import EStyleSheet from 'react-native-extended-stylesheet';
import { ViewStyle, TextStyle } from 'react-native';

interface IStyle {
  container: ViewStyle;
  text: TextStyle;
}

export const css = () => EStyleSheet.create<IStyle>({
  container: {
    height: 40,
    backgroundColor: 'yellow',
  },
  text: {
    fontSize: 16,
  },
});

[stochris]

Due to having a lot of variables and media queries, I added some stuff

declare module "react-native-extended-stylesheet" {
  import { ViewStyle as RNViewStyle, TextStyle as RNTextSTyle } from "react-native";

  type ExtraStyles<T> = {

    '@media android'?: ExtendedStyle<T>;
    '@media ios'?: ExtendedStyle<T>;
  }

  type ElementStyle<T> = ExtendedStyle<T> & ExtraStyles<T>

  export type ExtendedStyle<T> = {
    [Q in keyof T]: any;
  }

  export type ViewStyle = ExtendedStyle<RNViewStyle>;
  export type TextStyle = ExtendStyle<RNTextSTyle>;

  function value(expr: any, prop?: string): any;

  function create<T extends NamedStyles<T>>(
    styles: { [P in keyof T]: ElementStyle<T[P]>  }
  ): { [P in keyof T]: RegisteredStyle<T[P]> };

  function build(rawGlobalVars: any): void;
}

type RegisteredStyle<T> = number & { __registeredStyleBrand: T };

interface IStyles {
  header: StyleSheet.ViewStyle;
}

const styles = StyleSheet.create<IStyles>({
  header: {
    paddingTop: '$statusBarHeight',
    height: '$hScale * 110',
    width: '$wScale * 360',
    backgroundColor: '$primaryColor',
    '@media ios': {
      shadowColor: 'rgba(0,0,0, 0.5)',
      shadowOffset: { width: 5, height: 5 },
      shadowOpacity: 10,
    },
    '@media android': {
      elevation: 10,
    },
  },
}

[lukephills]

Nice idea, but if i wanted to add a style like this: @media (min-width: 350) and (max-width: 500), I'd have to add this string into the type definition.

Unless there's a way of allowing any string key type?

[liamjones]

Unless there's a way of allowing any string key type?

You should be able to do it like so:

type ExtraStyles<T> = {
    [key: string]:? ExtendedStyle<T>
}

[lukephills]

I originally tried that, but it doesn't work. I'm unsure why

[vitalets]

Unless there's a way of allowing any string key type?

Ideally only keys starting with @media should be allowed. Possibility to augment key is discussed in Microsoft/TypeScript#12754.

[vitalets]

Writing full strict declaration file for Extended StyleSheets looks to be a tricky (impossible?) task, because EStyleSheet actively operates with dynamic keys:

• variables (started with "$...")
• media queries (started with "@media...")
• underscored output keys (started with "_...")

Moreover all these keys are optionally merged into a single object.

I've tried to adopt @stochris's idea to make an universal declaration. But with no luck. It seems you anyway need to enumerate all used $variables and @media queries to make tsc happy.

Finally I've added a rather loose declaration file (similar to @juliusspencer's solution).

If you have any idea how to improve the declaration - feel free to comment or send a pr.

[ahmedam55]

Thanks a lot for the help @vitalets