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:

// 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)}

export default Hello;

// helpers

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


and then modify your App.js with:

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


To make sure all is good run:

npm run build
npm run start


just in case how my config files look like


  "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": [
    "not dead",
    "not ie <= 11",
    "not op_mini all"


  "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": [





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



About Neil Rubens

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

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