Typescript - does not support type declarations

[james-Infotrack]

Describe the bug Syntax errors when defining a type

To Reproduce Steps to reproduce the behavior:

1. Go to 'https://astexplorer.net/#/gist/42359365d6160cfab239ab069f88f7f6/bb924c4a84ff094ed5e4bad191eeb69db6db532f'

Expected behavior I'd love to be able to use it with type definitions inside the file

Screenshots

Browser (please complete the following information):

• OS: win10
• Browser chrome latest
• Version 91.0.4472.77

astexplorer settings:

• Selected parser: typescript/eslint
• Selected transformer (if applicable): jscodeshift
• Contents of the local storage key explorerSettingsV1 (code can be removed if you don't want it to be public)

  {"showTransformPanel":true,"parserSettings":{},"parserPerCategory":{"javascript":"@typescript-eslint/parser"},"workbench":{"parser":"@typescript-eslint/parser","code":"import { Flex, jsx } from 'theme-ui';\nimport * as React from 'react';\nimport { Button, Spinner, Text } from '@infotrack/zenith-ui';\nimport * as styles from './index.style';\nimport { analyticsApplication } from '../../utils/analytics';\nimport { useAnalyticsContext } from '../../context/analytics';\nimport { ReorderDetectionWrapper } from '../reorder-detection/reorderDetectionWrapper';\nimport { NSWTitleSearchCardListItem } from '../../models/NSWTitleSearchCardListItem';\n\ntype OrderSectionProps = {\n  printClicked?: () => void;\n  price?: Number;\n  orderItem(): void;\n  isDisabled: boolean;\n  isLoading: boolean;\n  gaLabel: string;\n  reorderRows?: NSWTitleSearchCardListItem[];\n  numberOfDocuments?: number;\n  onDelete?: (id: string) => void;\n};\n\nconst OrderSection = (\n  props: OrderSectionProps\n) => {\n  const [modalOpenState, setModalOpenState] = React.useState(false);\n\n  const { analytics } = useAnalyticsContext();\n\n  const handleClick = () => {\n    analytics.track('place-order', {\n      category: analyticsApplication,\n      label: props.gaLabel\n    });\n    setModalOpenState(true);\n  };\n\n  return (\n    <React.Fragment>\n      {props.isLoading && <Spinner fullSize />}\n      <div sx={styles.wrapper}>\n        {(props.numberOfDocuments || props.price !== undefined) && (\n          <React.Fragment>\n            <Flex sx={styles.container}>\n              <Flex sx={styles.docus}>\n                <Text>\n                  {!!props.numberOfDocuments &&\n                    `${props.numberOfDocuments} document\n                    ${props.numberOfDocuments === 1 ? '' : 's'} selected`}\n                </Text>\n              </Flex>\n              {props.price !== undefined && (\n                <Flex>\n                  <Text\n                    padding={'0 1rem 0 0'}\n                    variant=\"subtitle\"\n                    color={props.isDisabled ? 'b-300' : 'b-600'}>\n                    Total\n                  </Text>\n                  <Text color={props.isDisabled ? 'b-300' : 'b-600'}>\n                    ${props.price.toFixed(2)}\n                  </Text>\n                </Flex>\n              )}\n            </Flex>\n            <hr sx={styles.hr} />\n          </React.Fragment>\n        )}\n        <Flex>\n          {props.printClicked && (\n            <React.Fragment>\n              <Button\n                icon=\"print\"\n                variant=\"secondary\"\n                size=\"large\"\n                onClick={() => {\n                  if (props.printClicked) props.printClicked();\n                  else window.print();\n                }}>\n                Print\n              </Button>\n            </React.Fragment>\n          )}\n\n          <Flex id=\"here\" sx={styles.placeOrder}>\n            <Button\n              variant=\"primary\"\n              onClick={handleClick}\n              disabled={props.isDisabled}\n              size={'large'}\n              isLoading={props.isLoading}>\n              Place order\n            </Button>\n          </Flex>\n        </Flex>\n      </div>\n\n      <ReorderDetectionWrapper\n        rows={props.reorderRows}\n        modalOpenState={modalOpenState}\n        setModalOpenState={setModalOpenState}\n        orderItem={props.orderItem}\n        onDelete={props.onDelete}\n      />\n    </React.Fragment>\n  );\n};\n\nexport default OrderSection;\n","keyMap":"default","transform":{"code":"// Press ctrl+space for code completion\nexport default function transformer(file, api) {\n  const j = api.jscodeshift;\n\n  return j(file.source)\n    .find(j.Identifier)\n    .forEach((path) => {\n      j(path).replaceWith(\n        j.identifier(path.node.name.split(\"\").reverse().join(\"\"))\n      );\n    })\n    .toSource();\n}\n","transformer":"jscodeshift"}}}

Additional context not sure if this is a PEBCAK error, but this basically kills my progress, so any help would be appreciated cheers

[fkling]

The problem is not with the typescript-eslint parser but with jscodeshift. You have to tell jscodeshift to use the typescript parser by adding

export const parser = 'typescript';

to the transform.

[james-Infotrack]

Thankyou for the update, I've added your comment to the top of my transform window but still get the same error

here is an updated snippet

this one has some react code, I was trying to modify

thanks again

[fkling]

Looks like it should be

export const parser = 'ts';

for Typescript or

export const parser = 'tsx';

if you also need JSX support.