[원티드 프리온보딩] 2022.05.10

bisari31·2022년 5월 10일
0

TypeScript 적응기


튜플 Tuples

튜플은 길이와 타입이 고정된 배열

let b: [string, number];

b = ['2',1]

b[0].toLowerCase()
b[1].toLowerCase()

2번째 인덱스에선 넘버 타입이므로 toLowerCase() 불가능하다.

b = [1,'2']

이렇게 적용해도 에러가 발생한다.

제네릭 Generics

interface Mobile<T> {
    name: string;
    price: number;
    option: T;
}

const m1:Mobile<{color: string, coupon: boolean}> = {
    name: 's21',
    price: 1000,
    option: {
        color: 'red',
        coupon: false
    },
}
const m2:Mobile<string> = {
    name: 's21',
    price: 1000,
    option: 'good',
}

option에 어떠한 값이 올질 모를 때 T를 적용해서 할 수 있다.
option: object | string 이런 식으로도 가능하지만, 타입이 계속 늘어나면 코드가 길어진다.
이때 제네릭을 쓰면 된다.

이벤트 타입

const handleChange = (e: React.ChangeEvent<HTMLInputElement>)=> setContents(e.currentTarget.value)

 <input type="text" value={contents} onChange={handleChange}/>

onchange 이벤트니깐 React.ChangeEvent걸어주고 HTMLInputElement 제네릭 걸어주기
React.이벤트 타입목록<클릭할 요소 타입>

children

interface IPropsChildren {
  children: React.ReactNode
}

const TodoWrapper = ({children}:IPropsChildren) => {

any 타입 절대 금지

0개의 댓글