diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index 3a797d99ba5..7525831488b 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -51,3 +51,33 @@ export default const MyApp = () => ( ``` This will apply the same `color`, `font-family`, and `line-height` styles to the `` 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.