JaysonChiang

        function thousandComma(number) {
            var num = number.toString();
            var pattern = /(-?\d+)(\d{3})/;

            while (pattern.test(num)) {
                num = num.replace(pattern, "$1,$2");
            }
            return num;
        }

JaysonChiang

// public method
function Bike() {}

Bike.prototype.ride = function () {
  return "I ride " + this.brand;
};

// static method
function BikeMaker() {}
BikeMaker.factory = function (brandname) {

JaysonChiang

abstract class Bike {
  abstract brandname: string;
  ride() {
    return `I ride ${this.brandname}`;
  }
}

class Giant extends Bike {
  brandname = 'Giant';
}

JaysonChiang

interface ChildProps {
  name: string;
  onClick: () => void;
}

const Child = ({ name, onClick }: ChildProps) => {
  return (
    <div>
      {name}
      <button onClick={onClick}>Click</button>

JaysonChiang

interface ChildProps {
  name: string;
  onClick: () => void;
}

const Child: React.FC<ChildProps> = ({ name, onClick }) => {
  return (
    <div>
      {name}
      <button onClick={onClick}>Click</button>

JaysonChiang

import { useState } from 'react';

const TodoList = () => {
  const [todo, setTodo] = useState('');
  const [todos, setTodos] = useState([]);

  const onClick = () => {
    setTodo('');
    setTodos([...todos, todo]);
  };

JaysonChiang

import { useState } from 'react';

const TodoList: React.FC = () => {
  const [todo, setTodo] = useState('');
  const [todos, setTodos] = useState<string[]>([]);

  const onClick = () => {
    setTodo('');
    setTodos([...todos, todo]);
  };

JaysonChiang

const EventComponent = () => {
  const onChange = (event) => {
    console.log(event);
  };

  return (
    <div>
      <input onChange={onChange} />
    </div>
  );

JaysonChiang

const EventComponent: React.FC = () => {
  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
  };

  const onDragStart = (event: React.DragEvent<HTMLDivElement>) => {
    console.log(event);
  };

  return (

JaysonChiang

import { useState, useRef, useEffect } from 'react';

const Search = () => {
  const inputRef = useRef(null);
  const [name, setName] = useState('');

  useEffect(() => {
    inputRef.current.focus();
  }, []);