Skip to content

Commit

Permalink
Add typescript support for quoted keys in types (#188)
Browse files Browse the repository at this point in the history
* Add typescript support for quoted keys in types

* docs(changeset): Allow proper conversion of keys in TypeScript types that are quoted.

* Fix test

* Better test, more reflective of use case

* Clearer changeset message

* Add test for type

Co-authored-by: Declan Warn <dwarn@atlassian.com>
  • Loading branch information
declan-warn and declan-warn authored May 25, 2021
1 parent 610f5e2 commit f5866b0
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 6 deletions.
5 changes: 5 additions & 0 deletions .changeset/seven-laws-deliver.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'extract-react-types': patch
---

Adds support for string type keys in TypeScript.
30 changes: 30 additions & 0 deletions packages/extract-react-types/converters-typescript.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -690,3 +690,33 @@ cases(
},
TESTS
);

test('Typescript interface quoted property name is converted properly', () => {
const name = 'quoted';
const code = stripIndent(`
interface Props {
/* Type comment for ${name} */
'${name}': string;
}
class Component extends React.Component<Props> {}`);
const typeSystem = 'typescript';
const result = extractReactTypes(code, typeSystem, __filename);

expect(result).toHaveProperty(['component', 'value', 'members', 0, 'key', 'name'], name);
});

test('Typescript type quoted property name is converted properly', () => {
const name = 'quoted';
const code = stripIndent(`
type Props = {
/* Type comment for ${name} */
'${name}': string;
}
class Component extends React.Component<Props> {}`);
const typeSystem = 'typescript';
const result = extractReactTypes(code, typeSystem, __filename);

expect(result).toHaveProperty(['component', 'value', 'members', 0, 'key', 'name'], name);
});
28 changes: 22 additions & 6 deletions packages/extract-react-types/src/converter.js
Original file line number Diff line number Diff line change
Expand Up @@ -535,12 +535,28 @@ converters.TSTypeLiteral = (path, context): K.Obj => ({
members: path.get('members').map(memberPath => convert(memberPath, context))
});

converters.TSPropertySignature = (path, context): K.Property => ({
kind: 'property',
optional: !!path.node.optional,
key: { kind: 'id', name: path.node.key.name },
value: convert(path.get('typeAnnotation'), context)
});
converters.TSPropertySignature = (path, context): K.Property => {
let key = { kind: 'id' };
switch (path.node.key.type) {
case 'Identifier':
key.name = path.node.key.name;
break;

case 'StringLiteral':
key.name = path.node.key.value;
break;

default:
key.name = undefined;
}

return {
kind: 'property',
optional: !!path.node.optional,
key,
value: convert(path.get('typeAnnotation'), context)
};
};

converters.TSTypeAliasDeclaration = (path, context): K.Obj =>
convert(path.get('typeAnnotation'), context);
Expand Down
2 changes: 2 additions & 0 deletions stories/TypeScriptComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ type TypeScriptComponentProps = {
unknownProp: unknown;
// This prop uses an unknown typescript keyword "keyof" and so will result in a bail-out
unsupportedProp: keyof DummyInterface;
// This prop uses hyphens, so the type uses quotations around the key
'quoted-prop': any;
};

const TypeScriptComponent = (props: TypeScriptComponentProps) => <p>Hello World</p>;
Expand Down

0 comments on commit f5866b0

Please sign in to comment.