Type fixes

emotion-js · May 30, 2022 · f360473 · f360473
1 parent d133a83
commit f360473
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 26 deletions.
diff --git a/packages/native/types/base.d.ts b/packages/native/types/base.d.ts
@@ -63,10 +63,10 @@ export type Interpolation<
  * Practical sense: you can define and reuse atomic `shouldForwardProp` filters that are strictly bound with some `ForwardedProps` type.
  */
 export interface FilteringStyledOptions<
-  Props = Record<PropertyKey, any>,
+  Props = Record<string, any>,
   ForwardedProps extends keyof Props = keyof Props
 > {
-  shouldForwardProp?: (propName: PropertyKey) => propName is ForwardedProps
+  shouldForwardProp?: (propName: keyof Props) => propName is ForwardedProps
 }
 
 export interface StyledOptions<Props = Record<PropertyKey, any>> {

diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
@@ -2,12 +2,8 @@
 // TypeScript Version: 3.2
 
 import * as React from 'react'
-import {
-  ComponentSelector,
-  Interpolation,
-  InterpolationPrimitive
-} from '@emotion/serialize'
-import { PropsOf, DistributiveOmit, Theme } from '@emotion/react'
+import { ComponentSelector, Interpolation } from '@emotion/serialize'
+import { PropsOf, Theme } from '@emotion/react'
 
 export {
   ArrayInterpolation,
@@ -22,15 +18,15 @@ export { ComponentSelector, Interpolation }
  * Practical sense: you can define and reuse atomic `shouldForwardProp` filters that are strictly bound with some `ForwardedProps` type.
  */
 export interface FilteringStyledOptions<
-  Props = Record<PropertyKey, any>,
+  Props = Record<string, any>,
   ForwardedProps extends keyof Props = keyof Props
 > {
   label?: string
-  shouldForwardProp?: (propName: PropertyKey) => propName is ForwardedProps
+  shouldForwardProp?: (propName: keyof Props) => propName is ForwardedProps
   target?: string
 }
 
-export interface StyledOptions<Props = Record<PropertyKey, any>> {
+export interface StyledOptions<Props = Record<string, any>> {
   label?: string
   shouldForwardProp?: (propName: keyof Props) => boolean
   target?: string

diff --git a/packages/styled/types/tests.tsx b/packages/styled/types/tests.tsx
@@ -221,7 +221,7 @@ const Input5 = styled.input`
 {
   // Props forwarding through StyledOptions and FilteringStyledOptions
 
-  const fc: React.FC<{ foo: string }> = props => <div {...props} />
+  const fc: React.FC<{ foo: string }> = () => null
 
   styled(fc, { shouldForwardProp: (prop: 'foo') => true })({})
 
@@ -230,52 +230,61 @@ const Input5 = styled.input`
   // $ExpectError
   styled(fc, { shouldForwardProp: (prop: 'bar') => true })({})
 
-  const shouldForwardProp1 = (prop: 'foo') => true
-  styled(fc, { shouldForwardProp: shouldForwardProp1 })({})
+  styled(fc, { shouldForwardProp: (prop: 'foo') => true })({})
 
-  const shouldForwardProp2: StyledOptions['shouldForwardProp'] = (
+  // $ExpectError
+  const shouldForwardProp1: StyledOptions['shouldForwardProp'] = (
     prop: 'unknown'
   ) => true
-  styled(fc, { shouldForwardProp: shouldForwardProp2 })({})
+  styled(fc, { shouldForwardProp: shouldForwardProp1 })({})
 
-  const shouldForwardProp3 = (prop: 'unknown') => true
   // $ExpectError
-  styled(fc, { shouldForwardProp: shouldForwardProp3 })({})
+  styled(fc, { shouldForwardProp: (prop: 'unknown') => true })({})
 
   // $ExpectError
-  const shouldForwardProp4: StyledOptions<{
+  const shouldForwardProp2: StyledOptions<{
     foo: string
   }>['shouldForwardProp'] = (prop: 'unknown') => true
 
-  const shouldForwardProp5 = (prop: 'foo'): prop is 'foo' => true
-  styled(fc, { shouldForwardProp: shouldForwardProp5 })({})
+  styled(fc, { shouldForwardProp: (prop: 'foo'): prop is 'foo' => true })({})
+
+  const shouldForwardProp3: FilteringStyledOptions['shouldForwardProp'] = (
+    prop: string
+  ): prop is 'foo' => true
 
-  const shouldForwardProp6: FilteringStyledOptions['shouldForwardProp'] = (
+  // $ExpectError
+  const shouldForwardProp4: FilteringStyledOptions['shouldForwardProp'] = (
     prop: 'foo'
   ): prop is 'foo' => true
 
-  const shouldForwardProp7: FilteringStyledOptions<{
+  const shouldForwardProp5: FilteringStyledOptions<{
     foo: string
   }>['shouldForwardProp'] = (prop: 'foo'): prop is 'foo' => true
 
   // $ExpectError
-  const shouldForwardProp8: FilteringStyledOptions<{
+  const shouldForwardProp6: FilteringStyledOptions<{
     foo: string
   }>['shouldForwardProp'] = (prop: 'unknown'): prop is 'unknown' => true
 
-  const shouldForwardProp9: FilteringStyledOptions<
+  const shouldForwardProp7: FilteringStyledOptions<
     { foo: string; bar: string },
     'foo'
   >['shouldForwardProp'] = (prop: 'foo' | 'bar'): prop is 'foo' => true
 
   // $ExpectError
-  const shouldForwardProp10: FilteringStyledOptions<
+  const shouldForwardProp8: FilteringStyledOptions<
     { foo: string; bar: string },
     'foo'
   >['shouldForwardProp'] = (prop: 'foo' | 'bar'): prop is 'bar' => true
 
+  styled('div', {
+    shouldForwardProp: (prop: keyof JSX.IntrinsicElements['div']) => true
+  })({})
+
+  // $ExpectError
   styled('div', { shouldForwardProp: (prop: 'color') => true })({})
 
+  // $ExpectError
   styled('div', {
     shouldForwardProp: (prop: 'color'): prop is 'color' => true
   })({})