Skip to content

Add documentation about TypeScript support #785

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.

Sign up for GitHub

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

Closed
BinaryMuse wants to merge 7 commits into from
Closed

Add documentation about TypeScript support #785

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
22ea208
Add documentation about TypeScript support
BinaryMuse Apr 28, 2020
ce2872a
:memo: clarify
BinaryMuse Apr 28, 2020
4243c0c
Clarify problem with FormData in TS
BinaryMuse Apr 28, 2020
de1f380
Add info about importing types from TypeScript
BinaryMuse Apr 28, 2020
ffd4110
Clarify typings installation
BinaryMuse Apr 28, 2020
2f9a2a5
:keyboard: typo
BinaryMuse Apr 28, 2020
41e3cb6
diff -> json
BinaryMuse Apr 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions docs/content/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,33 @@ export default const MyApp = () => (
```

This will apply the same `color`, `font-family`, and `line-height` styles to the `<body>` as [Primer CSS's base styles](https://github.com/primer/css/blob/master/src/base/base.scss#L15-L20).

## TypeScript

Primer Components includes TypeScript support and ships with its own typings. You will need to install `@types/styled-components` and `@types/react` if you import either of those packages directly, as normal.

Once installed, you can import components and their prop type interfaces from the `@primer/components` package:

```typescript
import {BorderBox, BorderBoxProps} from '@primer/components'
```

### Fixing "Duplicate identifier 'FormData'"

Ever since `@types/styled-components` version `14.1.19`, it has had a dependency of both `@types/react` and `@types/react-native`. Unfortunately, those declarations clash; for more information, see [issue 33311](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33311) and [issue 33015](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33015) in the DefinitelyTyped repo.

You may run into this conflict even if you're not importing anything from `react-native` or don't have it installed. This is because the TypeScript compiler automatically includes types from the folders in `node_modules/@types` automatically. The TypeScript compiler allows you to opt-out of this behavior [using the `typeRoots` and `types` configuration options](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types).

The best solution for this error — for now — seems to be disabling the automatic inclusion of `node_modules/@types` and instead listing the types you want to be included individually.

In your `tsconfig.json`, set the `types` array under the `compilerOptions` like so:

```json
{
"compilerOptions": {
"types": ["node", "react", "styled-components", "jest"]
}
}
```

Of course, customize the array based on the `@types/` packages you have installed for your project.