Adding Typescript to AWS Amplify React

Here are a few small changes that you need for enabling support for typescript in AWS Amplify React

 

in tsconfig.json change target to:

"target": "es6",

 

Then install necessary packages (here are the basic ones):

 
npm install typescript --save
npm i @types/node --save
npm i @types/react --save
npm i @types/react-dom --save

 

To make sure that it work try a simple example from: https://github.com/Microsoft/TypeScript-React-Starter

// src/components/Hello.tsx

import * as React from 'react';

export interface Props {
    name: string;
    enthusiasmLevel?: number;
}

function Hello({ name, enthusiasmLevel = 1 }: Props) {
    if (enthusiasmLevel <= 0) {
        throw new Error('You could be a little more enthusiastic. :D');
    }

    return (
        <div className="hello">
        <div className="greeting">
            Hello {name + getExclamationMarks(enthusiasmLevel)}
    </div>
    </div>
);
}

export default Hello;

// helpers

function getExclamationMarks(numChars: number) {
    return Array(numChars + 1).join('!');
}

 

and then modify your App.js with:

<div className="App">
    <div>
        <Hello name="TypeScript" enthusiasmLevel={10} />
    </div>
..........

 

To make sure all is good run:

npm run build
npm run start

 

just in case how my config files look like

package.json

{
  "name": "startup_details_viewer",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/node": "^10.12.3",
    "@types/react": "^16.7.1",
    "@types/react-dom": "^16.0.9",
    "aws-amplify": "^1.1.9",
    "aws-amplify-react": "^2.1.3",
    "react": "^16.6.1",
    "react-dom": "^16.6.1",
    "react-scripts": "2.1.1",
    "typescript": "^3.1.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

 

 

 

Keywords

Try changing the `lib` compiler option to es2015 or later. TS2585 aws amplify
typescript aws amplify

 

 

About Neil Rubens

see http://ActiveIntelligence.org
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*