Function example is broken

[mvasin]

I bootstraped a fresh CRA app with npx create-react-app create-react-app my-app --scripts-version=react-scripts-ts, and pasted this code from readme to App.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('!');
}

It blows up with

(7,20): Type '{}' is not assignable to type 'Props'.
  Property 'name' is missing in type '{}'.

It can be fixed with name? in interface, but I'm not sure it's the right kind of a fix, and let's patch it in the readme to avoid frustration.

Here's my package.json:

{
  "name": "db-react-ts",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts-ts": "3.1.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^23.3.5",
    "@types/node": "^10.12.0",
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "typescript": "^3.1.3"
  }
}

[somecatdad]

Did you really type npx create-react-app create-react-app my-app --scripts-version=react-scripts-ts or was that just a typo here in the issue? If not just a typo, you typed create-react-app twice.

[mvasin]

I misspelled it here on GitHub, it should read npx create-react-app my-app --scripts-version=react-scripts-ts, but that's not connected to the issue.

[gasparsigma]

Hi, the problem is not the component itself that requires 'name', because by specification, 'name' is mandatory. You have to fix your usage of the component Hello instead, and add 'name' property to it. For example: <Hello name='Typescript' /> valid <Hello name='Typescript' enthusiasmLevel={5} /> valid <Hello /> error