Add typescript support for quoted keys in types (#188)

* 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 <[email protected]>

Author: declan-warn

.changeset/seven-laws-deliver.md

@@ -0,0 +1,5 @@
+---
+'extract-react-types': patch
+---
+
+Adds support for string type keys in TypeScript.

packages/extract-react-types/converters-typescript.test.js

@@ -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);
+});

packages/extract-react-types/src/converter.js

@@ -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);

stories/TypeScriptComponent.tsx

@@ -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>;