From 22ea20865cb8bc10548adbdcdbca1b3876067e6f Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 28 Apr 2020 11:02:11 -0700 Subject: [PATCH 1/7] Add documentation about TypeScript support --- docs/content/getting-started.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index 3a797d99ba5..5889f5d148b 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -51,3 +51,27 @@ 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 with no additional `@types` package necessary. You will need to install `@types/styled-components` and `@types/react`, as `styled-components` and `react` are [both peer dependencies](#installing-peer-dependencies). + +### Fixing "Duplicate identifier 'FormData'" + +Since version 14.1.9, `@types/styled-components` has 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: + +```diff +{ + "compilerOptions": { + "types": ["node", "react", "styled-components", "jest"] + } +} +``` + +Of course, customize the array based on the `@types/` packages you have installed for your project. From ce2872a6547161d747e5fa39d66b885f2a4f7606 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 28 Apr 2020 11:07:49 -0700 Subject: [PATCH 2/7] :memo: clarify --- docs/content/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index 5889f5d148b..d1df73de053 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -54,7 +54,7 @@ This will apply the same `color`, `font-family`, and `line-height` styles to the ## TypeScript -Primer Components includes TypeScript support with no additional `@types` package necessary. You will need to install `@types/styled-components` and `@types/react`, as `styled-components` and `react` are [both peer dependencies](#installing-peer-dependencies). +Primer Components includes TypeScript support with no additional `@types` package necessary. You will need to install `@types/styled-components` and `@types/react` if you import either of those packages. ### Fixing "Duplicate identifier 'FormData'" From 4243c0cf55d11210cece67aa58b35799b14f477b Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 28 Apr 2020 11:28:12 -0700 Subject: [PATCH 3/7] Clarify problem with FormData in TS --- docs/content/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index d1df73de053..d3c6f4a7770 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -58,7 +58,7 @@ Primer Components includes TypeScript support with no additional `@types` packag ### Fixing "Duplicate identifier 'FormData'" -Since version 14.1.9, `@types/styled-components` has 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. +Ever since `@types/styled-components` version `14.1.19`, it has 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). From de1f3806781bba8086a5650451376d01d8949f71 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 28 Apr 2020 11:30:08 -0700 Subject: [PATCH 4/7] Add info about importing types from TypeScript --- docs/content/getting-started.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index d3c6f4a7770..87681a3a934 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -56,6 +56,12 @@ This will apply the same `color`, `font-family`, and `line-height` styles to the Primer Components includes TypeScript support with no additional `@types` package necessary. You will need to install `@types/styled-components` and `@types/react` if you import either of those packages. +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 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. From ffd41101c76acf84bd19e451a549ddeb19f0986c Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 28 Apr 2020 11:34:24 -0700 Subject: [PATCH 5/7] Clarify typings installation --- docs/content/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index 87681a3a934..fdeb1f89a8c 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -54,7 +54,7 @@ This will apply the same `color`, `font-family`, and `line-height` styles to the ## TypeScript -Primer Components includes TypeScript support with no additional `@types` package necessary. You will need to install `@types/styled-components` and `@types/react` if you import either of those packages. +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: From 2f9a2a5ae9cc8d536ae35341b44ecdf4ca61bda2 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 28 Apr 2020 11:35:50 -0700 Subject: [PATCH 6/7] :keyboard: typo --- docs/content/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index fdeb1f89a8c..61cd944f559 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -64,7 +64,7 @@ import {BorderBox, BorderBoxProps} from '@primer/components' ### Fixing "Duplicate identifier 'FormData'" -Ever since `@types/styled-components` version `14.1.19`, it has 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. +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). From 41e3cb6ca89828cd3bff121ed2eb3939d3d40874 Mon Sep 17 00:00:00 2001 From: Michelle Tilley Date: Tue, 28 Apr 2020 11:37:16 -0700 Subject: [PATCH 7/7] diff -> json --- docs/content/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md index 61cd944f559..7525831488b 100644 --- a/docs/content/getting-started.md +++ b/docs/content/getting-started.md @@ -72,7 +72,7 @@ The best solution for this error — for now — seems to be disabling the auto In your `tsconfig.json`, set the `types` array under the `compilerOptions` like so: -```diff +```json { "compilerOptions": { "types": ["node", "react", "styled-components", "jest"]