내가 보려고 만든 개발 공부 일지

TS는 타입이 예상 가능할땐 굳이 타입선언을 안해도 된다. 컴파일러가 타입추론을 하기 때문이다. 그치만 일반적으로 타입을 항상 선언해 준다. 그리고 그 타입에 따라 해당 변수의 속성값을 쓰려고할때 컴파일러 에러가 발생할 수도 있다. document.body.onclick = (e: MouseEvent): void=>{ e.currentTarget!.nodeName; } 위와같은 코드가 있다고 할 때, 컴파일러는 currentTarget 이 nodeName 을 가지고 있지 않는다는 에러를 낸다. 나는 currentTarget에 어떤 엘리먼트가 올지 이미 알고 있지만, TS 컴파일러는 저 값이 정확히 뭔지 몰라서 타입추론을 못하기 때문이다. 이럴때 확실하게 컴파일러에게 타입을 알려주는 방법이있다. const..

const el:HTMLDivElement | null = document.querySelector('div.toast'); 위와 같은 코드가 있다고 할때, 여기서 그냥 el.firstChild 이렇게 쓰면 el 값이 null 일 수 도 있다고 에러를 준다… 그래서 if(el) ~~ 이런식으로 falsy 값 체크를 해주야 되는데 매번 코드를 짤때마다 이 짓을 하기엔 너무 번거롭다. 로직 흐름상 절대로 null 이나 undefined 같은 값이 절대 오지 않는 경우에는 el!.firstChild --> 이처럼 변수 뒤쪽에 느낌표 (assertion operator) 를 써주면 되고 이건 컴파일러에게 "이값은 절대 null , undefined 이 될 수 없으니 그냥 넘어가" 라는 뜻이다. 참고 https:..

Interface, Type 둘다 타입을 커스텀하게 정의할 필요가 있을때 사용된다. 서로 비슷하지만 각각 소소한 차이점이 있는데 그건 구글링을 하면 상세히 나오니 참고하고, 이것만 기억하자. --> 가급적 객체 타입 정의는 interface를, 리터럴 타입정의는 type을 사용하라 type myType = "Basic" | "Premium" | "Admin" | null; interface userInfoProps { name: string; age: number; addr: string; onEdit: ()=>void; } (참고로 type 은 = 으로 타입정의, interface 는 = 없이 바로 정의)