New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@types/react-native don't work with typescript 3.1.1 #29265

Open
vovkasm opened this Issue Sep 28, 2018 · 1 comment

Comments

Projects
None yet
1 participant
@vovkasm

vovkasm commented Sep 28, 2018

Current typings produce very strange errors being used with typescript 3.1.1
I submit Microsoft/TypeScript#27421 to typescript repo, but sure that DT also should track this issue. Main problem, that I can't create minimal example for this. And I can't personally understand why ts since 3.1 behave so strangely. It would be good if anyone can help with this.

Next is mostly duplication of info from Microsoft/TypeScript#27421:

import React from 'react'
import { StyleSheet, Text } from 'react-native'

const s = StyleSheet.create({
  didNotWork: {
    fontSize: 16,
    fontWeight: '900', // if we comment this line, errors gone
    marginTop: 5, // if this line commented, errors also gone
  },
  work: {
    fontSize: 18,
//    fontWeight: '900', // when uncommented also work
  },
})

export const sample1 = <Text style={s.work} />
export const sample2 = <Text style={s.didNotWork} />
// ^ this line generate error:
// index.tsx:17:30 - error TS2322: Type 'RegisteredStyle<{ fontSize: number; fontWeight: string; marginTop: number; }>' is not assignable to type 'StyleProp<TextStyle>'.
//   Type 'RegisteredStyle<{ fontSize: number; fontWeight: string; marginTop: number; }>' is not assignable to type 'RecursiveArray<false | TextStyle | RegisteredStyle<TextStyle> | null | undefined>'.
//     Property 'length' is missing in type 'Number & { __registeredStyleBrand: { fontSize: number; fontWeight: string; marginTop: number; }; }'.
// 17 export const sample2 = <Text style={s.didNotWork} />
//                                 ~~~~~
//   node_modules/@types/react-native/index.d.ts:907:5
//     907     style?: StyleProp<TextStyle>;
//             ~~~~~
//     The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Text> & Readonly<{ children?: ReactNode; }> & Readonly<TextProps>'
export const sample3 = <Text style={{fontSize: 16, fontWeight: '900', marginTop: 5}} />

This sample shows the error. There is sandbox repo: https://github.com/vovkasm/rn-ts-3.1.1 (to reproduce, clone and npm install && npm test)

  1. If I comment out fontWeight or marginTop style of didNotWork key, error dissapeared
  2. If I add fontWeight to work key, error dissapeared

Why is this?

@vovkasm

This comment has been minimized.

Show comment
Hide comment
@vovkasm

vovkasm Oct 2, 2018

Update from Microsoft/TypeScript#27421: It seems that typescript team qualified this as a bug and assign it to typescript 3.2 milestone. So I hope this will be fixed in typescript@3.2

vovkasm commented Oct 2, 2018

Update from Microsoft/TypeScript#27421: It seems that typescript team qualified this as a bug and assign it to typescript 3.2 milestone. So I hope this will be fixed in typescript@3.2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment