본문 바로가기

부트캠프교육중301

[React] styled components에서 attrs # 모든 input에 적용될 attribute를 가지게 될거다. 그래서 attribute는 한번만 써줘도된다. const Input = styled.input.attrs({ required: true, minLength: 10 })` background-color: red; `; 이렇게 하면 attrs 뒤의 속성이 모든 input에 다 담긴다. 2023. 8. 18.
[TS] 타입 호환 타입호환(Type Compatibility) - 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미한다. interface Developer { name: string; skill: string; } interface Person { name: string; } let developer: Developer; let person: Person; developer = person; //에러 person = developer; //정상 person이 더 작은 구조적 범위이기때문에 에러난다. 오른쪽이 더 큰 범위여야한다.!!! 부분집합모양처럼 !! interface Developer { name: string; skill: string; } class Person { name: string; } l.. 2023. 8. 18.
[TS] 타입 가드 interface Developer { name: string; skill: string; } interface Person { name: string; age: number; } function introduce(): Developer | Person { return { name: 'tony', age: 33, skill: 'Iron Making' } } let tony = introduce(); console.log(tony.skill); // 오류 console.log(tony.age); // 오류 console.log(tony.name); // 정상 return 값에 skill이 있음에도 오류표시나는 이유는 유니언타입으로 해서 공통된 속성만 된다. 그래서 name만 된다. 만약 skill을 이용하.. 2023. 8. 18.
[TS] 타입 단언 타입을 지정해주는거다? 타입 단언은 dom API를 조작할때 가장 많이 사용한다. let div = document.querySelector('div') ; 이렇게 사용하면 div는 null일수도 있고 HTMLDivElement일수도 있다. 그래서 이렇게 if문을 이용해서 표현해야 한다. let div = document.querySelector('div') ; if(div){ div.innerText } 이걸 타입 단언을 사용하게 되면 if문을 사용하지 않아도 된다. let div = document.querySelector('div') as HTMLDivElement; div.innerText; 2023. 8. 18.