Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Epic] TypeScript refactor

See original GitHub issue

Objective

Rewrite Primer React components in TypeScript.

📄 TypeScript ADR 📄 TypeScript notes google doc

Team

Tasks

Phase 1: Setup

Phase 2: Migrate

  • Migrate components¹

In Review or Done

Phase 3: Clean up

Postponed

¹How to migrate a component to TypeScript

The migration process for each component may vary, but it will likely follow these high-level steps:

1. Change the file extension from .js to .tsx

src/Box.js → src/Box.tsx

2. Add type annotations to the component file

Here are type annotations for the Box component:

  // src/Box.tsx
  import styled from 'styled-components'
+ import {COMMON, FLEX, LAYOUT, SystemCommonProps, SystemFlexProps, LayoutProps} from './constants'
+ import sx, {SxProp} from './sx'
+ import {ComponentProps} from './utils/types'


+ const Box = styled.div<CommonProps & FlexProps & LayoutProps & SxProp>`
    ${COMMON}
    ${FLEX}
    ${LAYOUT}
    ${sx}
  `
+ export type BoxProps = ComponentProps<typeof Box>
  export default Box

Most Primer React components will follow a similar pattern. Each component should export a ___Props type in addition to the default export.

3. Change the file extension of tests

src/__tests__/Box.js → src/__tests__/Box.tsx

👉 See the TypeScript notes google doc for more information on TypeScript migration.

Exit criteria

  • All JavaScript files in the src directory of primer/components have been rewritten in TypeScript

/cc @philipbremer

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
colebemiscommented, Apr 1, 2021

4/1 Update

Status 💚

Ships

This week we replaced our hand-written type definitions with type definitions generated by the TypeScript compiler (https://github.com/primer/components/pull/1147). This means consumers get more accurate type definitions and maintainers no longer have to manually keep the type definitions in sync with the code! This is the culmination of a quarter-long effort to rewrite Primer React in TypeScript 🎉 (https://github.com/primer/components/issues/970). These changes will be included in the next release of Primer React.

Up Next

  • Write guidelines for authoring components in TypeScript.
1reaction
colebemiscommented, Mar 12, 2021

Status

💛 Yellow

Blockers

The final step of this TypeScript refactor is to replace our manually maintained type definitions with type definitions generated by TypeScript. However, after testing in Memex, I found that the generated type definitions were causing errors because of the way the as prop is defined.

I figured out a way to correctly define types for the as prop but it will require us to update all our components:

Here's an example of how our components will need to be updated 
import styled from 'styled-components'
import {COMMON, FLEX, LAYOUT, SystemCommonProps, SystemFlexProps, SystemLayoutProps} from './constants'
import sx, {SxProp} from './sx'
- import {ComponentProps} from './utils/types'
+ import {ForwardRefComponent} from './utils/polymorphic'

+ const defaultElement = 'div'

+ export type BoxProps = SystemCommonProps &
+  SystemFlexProps &
+  SystemLayoutProps &
+  SxProp

+ type BoxComponent = ForwardRefComponent<typeof defaultElement, BoxProps>

+ const Box = styled(defaultElement)<BoxProps>`
- const Box = styled.div<BoxProps>`
  ${COMMON}
  ${FLEX}
  ${LAYOUT}
  ${sx};
+ ` as BoxComponent
- `

- export type BoxProps = ComponentProps<typeof Box>
export default Box

I haven’t had time to completely implement this solution because of Primer React theming work. I’ll reach out to @VanAnderson to see if he as the bandwidth to take this on.

Up Next

  • Fix the as prop types so we can replace our manually maintained type definitions with type definitions generated by TypeScript
  • Add TypeScript guidelines to the contribution guidelines
Read more comments on GitHub >

github_iconTop Results From Across the Web

Epic Maintenance task: Refactor and clean up stuff · Issue #2883 ...
I believe it is a time to refactor stuff so we are not lost in the future. Stuff to be considered: reconsidering what...
Read more >
redux-observable epic typescript warning: 'store' is declared ...
It's a linting error from TypeScript noUnusedParameters aka no-unused-variable setting. It means that your function has the store parameter ...
Read more >
Fully Typed Web Apps | Epic Web Dev by Kent C. Dodds
TypeScript is an enormous part of the web industry. ... Without types guiding you through that refactor you're gonna have a hard time....
Read more >
Refactoring TypeScript: Keeping your code healthy
Refactoring TypeScript : Keeping your code healthy [Hickey, James] on Amazon.com. *FREE* shipping on qualifying offers. Refactoring TypeScript: Keeping your ...
Read more >
Refactor Redux Reducers Like a Pro With TypeScript
TypeScript is a perfect match for React reducers because it has an intelligent type system, making refactoring much easier than it is with ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

v27.0.0 breaks TypeScript typings

Next page

Module not found: error when using <Link>