typescript

✅ 사용하려면 만들때부터 넣어줘야 한다.

npx create-react-app test8 --template=typescript

✅ user: tUser
타입 넣어주는 것.

user의 타입은tUser야
== 코틀린이랑 비슷하다.

type tUser = {
  id: string,
  password: string,
  name: string | number. // 타입이 둘중 하나다
}
function App() {
  const [name, setName] = useState<string>("");
  const user: tUser = {id:"hi", password:"1111", name: "gg"};
  user['name'] = 'hi';
  const onChangeHandler = 
  (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value)
  }
  return (
    <div className="App">
      <input onChange={onChangeHandler}></input>
      
    </div>
  );
}

✅ gender?: string
? -> 있어도돼고 없어도 될 때 붙인다. 옵셔널.

✅ type tGensder = "남자" | "여자"
이렇게만 받고싶으면 타입을 만들어주면된다.

✅ gender?: tGensder
젠더의 타입은 tGensder. 이렇게하면 남자와 여자만 성별을 받을 수 있다.

type tGensder = "남자" | "여자"
type tUser = {
  id: string,
  password: string,
  name: string | number
  gender?: tGensder
}
function App() {
  const [name, setName] = useState<string>("");
  const user: tUser = {id:"hi", password:"1111", name: "gg"};
  user['name'] = 'hi';
  user["gender"] = "남자"
  user["gender"] = "여자"
  const onChangeHandler = 
  (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value)
  }

✅ children: tUser[] => 타입은 tUser타입의 리스트다.

a?: any
뭐가 들어올지 모를 떄는 any를 붙이면 된다.
이걸 붙이면 타입을 몰라서 타임스크립트를 쓰지못한다. 그래서 any를 쓸거면 안쓰는게 낫다.

const convertName = (name:string): string
이 함수는 스트링을 내뱉을거야 라는것.