Skip to content

Commit e73c210

Browse files
committed
chore: update docs/typescript.md
1 parent 8a66b7e commit e73c210

File tree

1 file changed

+0
-84
lines changed

1 file changed

+0
-84
lines changed

docs/typescript.md

Lines changed: 0 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -27,93 +27,9 @@ Do declare a type for an unassigned variable when a type can not be inferred.
2727
const someVar: string
2828
```
2929

30-
## Migration guide & contribution opportunity 🎉
31-
32-
We'd love your help in migrating our codebase!
33-
34-
1. Visit the [Typescript Migration Issue](https://github.com/ethereum/ethereum-org-website/issues/6392) and make a comment to get assigned to a file from the complete list of pending files to be migrated.
35-
2. Run `yarn start` to generate the `src/gatsby-types.d.ts` file. More on this in the "GraphQL Typegen" section.
36-
3. Convert the js file into a `.ts` or `.tsx` file in case the file includes some jsx in it.
37-
4. Try to follow one already migrated file similar to the one you are migrating.
38-
39-
- For `pages`,
40-
41-
- Run again `yarn start` in order to update the `src/gatsby-types.d.ts` file with the page's query type.
42-
- Use the Gatsby type `PageProps`, passing the generated GraphQL query type + the context type args.
43-
44-
```tsx
45-
import { graphql, PageProps } from "gatsby"
46-
import type { Context } from "src/types"
47-
48-
const HomePage = ({}: PageProps<Queries.HomePageQuery, Context>) => {
49-
...
50-
}
51-
export const query = graphql`
52-
query HomePage {
53-
...
54-
}
55-
`
56-
```
57-
58-
- Always name your queries.
59-
60-
```tsx
61-
// BAD
62-
query {
63-
...
64-
}
65-
66-
// GOOD
67-
query MyQuery {
68-
...
69-
}
70-
```
71-
72-
- For `components`,
73-
74-
- Use `React.FC` prop on function components.
75-
- As a convention, define the component's props types as an interface with the name `IProps`.
76-
- As a convention, export `IProps`.
77-
78-
```tsx
79-
import React from "react"
80-
81-
export interface IProps {
82-
coolProp: string
83-
}
84-
85-
const Component: React.FC<IProps> = ({ coolProp }) => {
86-
...
87-
}
88-
```
89-
90-
- In case you need to extend your component with some other component's interface, import the latter with the following naming convention `I{NameOfTheComponent}Props`.
91-
92-
```tsx
93-
import Link, { IProps as ILinkProps } from "./Link"
94-
95-
export interface IProps extends ILinkProps {
96-
newCoolProp: string
97-
}
98-
```
99-
100-
5. Try to avoid as much as possible the usage of `any` :)
101-
6. Run `yarn type-check` to check if everything looks good and nothing else broke.
102-
103-
## GraphQL Typegen
104-
105-
With the release of Gatsby v4.15.0, [the config option `graphqlTypegen` has been added](https://www.gatsbyjs.com/docs/reference/release-notes/v4.15/#graphql-typegen).
106-
107-
- This will generate automatically a `src/gatsby-types.d.ts` file which will contain all the GraphQL query types on the codebase.
108-
- This will happen in build time. In other words, when you call `yarn start` or `yarn build`.
109-
- Once you have that file created, a global `Queries` variable will be available which will contain all the query types.
110-
- More information about how this works https://www.gatsbyjs.com/docs/how-to/local-development/graphql-typegen/
111-
11230
## Learning resources
11331

114-
- [Official Gatsby Typescript guide](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
11532
- [Official Typescript website](https://www.typescriptlang.org/)
116-
- [GraphQL Typegen](https://www.gatsbyjs.com/docs/how-to/local-development/graphql-typegen/)
11733
- [Typescript Challenges](https://github.com/type-challenges/type-challenges)
11834
- [React TS Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)
11935
- [Typescript Deep Dive](https://basarat.gitbook.io/typescript/)

0 commit comments

Comments
 (0)