cra-typescript-issues.md

TypeScript issues in Create React Application Project

As a newcomer to TypeScript, this is a list of issues I ran into during the process.

TOC

• No Support for ES export from syntax
• Poor support for NODE_PATH with TypeScript
• document.styleSheets
• Destructuring

1. No Support for ES export from syntax

This is a convienent way to build index files for a bunch of modules.

Example:

export default from "./Module";
export Module from "./ModuleA";

What's the deal?

It's still an ES proposal so the TS team isn't quite ready to add it to TS proper.

Related Issue

microsoft/TypeScript#4813

Stopgap Fix

Just don't use export from. This is bummer. Tried a number of different things like using a js extension for those files and excluding js files in tsconfig, but couldn't get any configuration to get it to work.

2. Sorta/kinda support for NODE_PATH with TypeScript

We want to be able to use absolute import paths

Example

Nah

import { MyComponent } from "../../components";

Yasss

import { MyComponent } from "components";

Related Issues

• facebook/create-react-app#5118
• facebook/create-react-app#5692

What's the deal?

Hard to say for certain. There seems to be ways to accomplish it, but that seem to require a bunch of tom foolery. Should just be able to use an .env file or export NODE_PATH= before the scripts in package.json

Stopgap Fix

A modified version of this facebook/create-react-app#5118 (comment)

1. DID NOT NEED to Create .env
2. Create tsconfig.paths.json with:

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

3. Add "extends": "./tsconfig.paths.json", as the first line of tsconfig.json
4. Add NODE_PATH=src/ before each script; start, build, test. Exammple; "start": "NODE_PATH=src/ react-scripts start"

That allows for absolute imports from any directory within src. For example src/components:

import { MyComponent } from "components";

3. document.styleSheets

It's kinda an iterable, but kinda not? Example;

in stylesheets.ts:

const sheets = [...document.styleSheets];

tsc stylesheets.ts

error TS2461: Type StyleSheetList is not an array type

It's possible to work around that using Array.from instead of the spread operator

microsoft/TypeScript#15319

4. Destructuring

Issues when trying to destructure function arguments. I very frequently use this pattern when making selections from Redux stores

microsoft/TypeScript#7576

Example

const mapStateToProps = ({ storeKey: { keyItem } }) => ({ keyItem });

TS Error:

Binding element 'keyItem' implicitly has an 'any' type.

UPDATE

After a couple more days of use and reading docs, I learned a way to accomplish this. Goes something like this.

const mapStateToProps = ({ storeKey: { keyItem } }: IReduxState) => ({ keyItem });

The new thing there is IReduxState. In the project I'm working we create that interface from all our redux ducks' states. For example;

In ducks/duckName.ts create and export an interface for that duck's state:

export interface IState {
  keyItem: boolean;
}

follow that for every duck in the project.

Then in ducks/index.ts import each IState from each duck and create the IReduxState

import { IState as IDuckName } from "./duckName";

interface IReduxState {
  duckName: IDuckName,
  ...
}

export default IReduxState;

On your #3 there - also see microsoft/TypeScript#23406