개발자_승딱 개발자_승딱

interface 로 객체 , 함수 , 클래스의 타입을 지정해 줄수 있다. interface 는 extends 로 확장할수 있다. interface Toy{ name : string } interface Car{ color : string; wheels : number; starts() : void; } interface ToyCar extends Toy,Car{ price : number } const examToyCar : ToyCar = { name : "wow", color : "red", wheel : 100, starts(){ console.log("start") }, price : 50000000 } type Score = "a" | "b" | "c" interface User { name ..

공부좀 + filepath babel , tsconfig.json

axios 요청시 1. 기본 url 설정 2. 헤더기본설정 3. 에러가 났을때 공통으로 처리하고 싶을때 interceptor : 1. 요청하기 직전 , 2. 응답을 받고 try catch 문으로 처리직전에 가로챌수 있다. axios.defaults.baseURL = process.env.BASE_URL; axios.defaults.headers.token = token; axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlenc..

typeof 랑 instanceof 연산자를 사용해 조건문 내에서 타입의 범위를 더줄여서 사용할수 있게된다. interception type : Person & Serializable & Loggable은 Person과 Serializable이며 Loggable입니다. 즉, 이 타입의 객체는 세 가지 타입의 모든 멤버를 갖게됩니다. >>> 여러타입을 하나로 결합한 타입 is 랑 as 사용해서 타입가드 구성해보기

const handleChange = (e: React.FormEvent)=>{ setInput({ ...input, [e.target.name]:e.target.value }) } 이벤트에 타입을 걸어주는데 검색해서 붙여넣었더니 에러가 발생했다. Property 'value' does not exist on type 'EventTarget' 그래서 다시 검색해보니까 onChange = (e: React.FormEvent) => { const newValue = e.currentTarget.value; } onChange = (e: React.ChangeEvent)=> { const newValue = e.target.value; } 이벤트의 타겟에 대상을 가져오는데 두가지 경우가 있다라는 걸 다시한번 ..

interface Istate { people:{ age:number, name:string, note?:string, }[] } function App() { const [people, setPeople] = useState([]) prop으로 들어가는것도 타입지정해줘야함다. interface IProps { people:{ age:number, name:string }[] } function List({people}:IProps) { return ( I am List ) } === const List : React.FC = () => { return ( I am List ) } 두가지가 같은표현이다. const renderList = () : JSX.Element[]

enum 이라는게 있는데 어떤 개념인지 그리고 어떨때 사용하는지 알아보고 간단히 정리해봄 enum : 연관된 아이템들을 묶어서 표현할수 있는 수단 !! 사용법은 enum 키워드 넣고 그냥 쓰면 된다. 안에는 이제 연관된 아이템들을 넣어놓으면은 묶여저서 객체에서 프러퍼티에 접근하듯이 . 을 통해서 사용할수 있게된다. 일단 컴파일 된 내용을 한번 보자 보면은 Exenum 이 선언이 되고 즉시실행함수 안에서 값이 할당이 되는 것을 볼수가 있는데 값이 양쪽에 다 매핑이 되는것을 확인할수있다. 이렇게 하면 키로 값을 찾을수도 있고 값을 통해서 키를 찾을수도 있다. 이거를 리버스 매핑 이라고 한다고 한다. 뭐 콘솔로 ExEnum 을 보면 { '0': 'sleep', '1': 'up', '2': 'down', sle..

타입을 마치 함수의 파라미터처럼 사용하는 것을 제네릭 이라고 한다. 예시를 살펴보자 function exgeneric(text : T): T{ return text } exgeneric ("wow"); exgeneric (100); 둘다가능 꺽쇠 자리의 T 라는 문자가 타입자리에 반복 된것을 볼수 있다. 이 의미는 T 가 쓰이는 자리(파라미터, 리턴)에 타입을 일괄적으로 정해줄수 있다는 의미이다. 이것의 이점은 하나의 함수를 여러 데이터 타입으로 사용할수 있게된다. 물론 타입을 any 로 설정하게 되면 이러한 이점을 누릴 수도 있지만 이경우 동적으로 타입이 정해져 타입스크립트의 이점을 누릴수 없게 되니까 참고해서 상황에 맞게 사용하자 좀더 응용된 예시 살펴보고 끝내자 function exgeneric (..