React-TS-From-Scratch

ex-2.js

const users = [
  { id: 7, name: "Mumble" },
  { id: 14, name: "Harambe" },
  { id: 33, name: "Nemo" }
];

function findUserById(id) {
  return users.find(user => user.id === id);
}

const id = "33";

findUserById(id); // undefined

ex-3.ts

const users = [
  { id: 7, name: "Mumble" },
  { id: 14, name: "Harambe" },
  { id: 33, name: "Nemo" }
];

function findUserById(id) {
  // TS7006: Parameter 'id' implicitly has 'any' type.
  return users.find(user => user.id === id);
}

const id = "33";

findUserById(id); // undefined

ex-4.ts

const users = [
  { id: 7, name: "Mumble" },
  { id: 14, name: "Harambe" },
  { id: 33, name: "Nemo" },
];

function findUserById(id: number) {
  return users.find((user) => user.id === id);
}

const id = "33";

findUserById(id);
/* 
  TS 2345:
  Argument of type '"33"' is not assignable 
  to parameter of type 'number'.
*/

ex-5.ts

const users = [
  { id: 7, name: "Mumble" },
  { id: 14, name: "Harambe" },
  { id: 33, name: "Nemo" },
];

function findUserById(id: number) {
  return users.find((user) => user.id === id);
}

const id = "33";

findUserById(parseInt(id));

ex-6.js

function App(props) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{props.message}</p>
      </header>
    </div>
  );
}

ex-7.tsx

function App(props) {
  // Parameter 'props' implicitly has an 'any' type. TS7006
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{props.message}</p>
      </header>
    </div>
  );
}

ex-8.tsx

type AppProps = { message: string };

function App(props: AppProps) {
  // Parameter 'props' implicitly has an 'any' type. TS7006
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{props.message}</p>
      </header>
    </div>
  );
}

ex-9.tsx

type AppProps = { message: string };
type AppState = { count: number };

class App extends Component<AppProps, AppState> {
  state = {
    count: 0,
  };

  updateCounter = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>{props.message}</p>
        </header>
      </div>
    );
  }
}

react-ts-ex-1.js

const users = [
  { id: 7, name: "Mumble" },
  { id: 14, name: "Harambe" },
  { id: 33, name: "Nemo" }
];

function findUserById(id) {
  return users.find(user => user.id === id);
}

const id = 33;

findUserById(id); // {id: 33, name: 'Nemo'}