Skip to content
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.

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

docs(Typescript): Update doc to declare @elastic/eui typings in global typings file #26160

Merged
merged 4 commits into from
Nov 28, 2018
Merged
Changes from 2 commits
Commits
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
15 changes: 12 additions & 3 deletions TYPESCRIPT.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,20 @@ The first thing that will probably happen when you convert a `.js` file in our s
#### EUI component is missing types

1. Check https://github.com/elastic/eui/issues/256 to see if they know it’s missing, if it’s not on there, add it.
2. Temporarily get around the issue by using a declared module and exporting the missing types with the most basic types available. Bonus points if you write a PR yourself to the EUI repo to add the types, but having them available back in Kibana will take some time, as a new EUI release will need to be generated, then that new release pointed to in Kibana. Best, to make forward progress, to do a temporary workaround.
2. Temporarily get around the issue by adding the missing type in the `typings/@elastic/eui/index.d.ts` file. Bonus points if you write a PR yourself to the EUI repo to add the types, but having them available back in Kibana will take some time, as a new EUI release will need to be generated, then that new release pointed to in Kibana. Best, to make forward progress, to do a temporary workaround.

```ts
// typings/@elastic/eui/index.d.ts

declare module '@elastic/eui' {
export const EuiPopoverTitle: React.SFC<any>;
// Add your types here
export const EuiPopoverTitle: React.SFC<EuiPopoverTitleProps>;
...
}
```

```ts
// you can now import it in <your-plugin-file.ts>

import { EuiPopoverTitle } from '@elastic/eui';
```
Expand All @@ -36,7 +44,8 @@ A `.d.ts` file is treated as a module if it contains any top-level `import` or `
Since `@elastic/eui` already ships with a module declaration, any local additions must be performed using module augmentation, e.g.

```typescript
// file `my_plugin/types/eui.d.ts`
// file `typings/@elastic/eui/index.d.ts`

import { CommonProps } from '@elastic/eui';
import { SFC } from 'react';

Expand Down