Enjoy Programming

타입스크립트의 핵심중 하나인 인터페이스에 대해서 오늘은 써본다. 위 예제 코드는 printLabel함수를 호출 시 argument로 string타입 label을 갖는 labeledObj오브젝트를 갖는다. 객체가 더 많은 프로퍼티를 갖고 있더라도, 컴파일러는 최소한 필요한 프로퍼티가 있는지와 타입이 잘 맞는지만 검사한다. 이 타입작성을 label을 가진 interface로 다시 작성해보면 이러하다~ 위에 { label : string } 대신 interface에 이 타입을 넣어주고 오브젝트는 이런 인터페이스야~! 라고 알려준다. 다행인건 타입 검사에서는 props의 순서를 지킬 필요는 없다. 오직 인터페이스가 요구하는 props가 존재하는지와 props들이 적절한 타입을 가졌는지만 확인한다. - Optio..

이번은 타입스크립트로 react 이벤트 관리에 대해 간단하게 다뤄보겠다~ 기존 코드에 input 관련 코드 작성, 두가지 랜더링할 컴포넌트를 작성해주는데 Input 과 Form이다. 두개 다 interface로 props의 type을 결정해주고 각각의 컴포넌트가 React.FunctionComponent임을 명시해준다. 그리고 작성한 interface를 전달해준다. 음 심도있게 더 공부해야겠지만 받아들이자 ㅎㅎ;; 일단 props에서 전달받은 onChange함수와 onFormSubmit함수의 타입을 void로 선언하는데 역시 event: React.~~~~ 를 작성해서 event타입도 확인해줘야 한다. 이제 부모컴포넌트로 가보면 부모컴포넌트에서 Input과 Form을 import하고 rendering해주..

드디어 다음 포스팅을 한다..;; 이번 포스팅은 저번에 typescript를 사용한 react의 state에 대해 알아봤다면. 이번에는 props를 전달해보자. 이전에 부모컴포넌트에서 바로 카운터state를 prop으로 전달하고 Number 컴포넌트에서 전달받아 이를 출력하는 코드를 짜보면 먼저 오른쪽이 기존 부모컴포넌트이다. 자식 function 컴포넌트를 import해주고 count이름으로 counter props를 전달해준다. 이를 받은 자식 Number컴포넌트는 count를 랜더링 해주는데 이때 역시 interface로 props의 타입을 정해준다. prop-types에서 정해주는것처럼 그리고서 Number: React.FunctionComponent 로 명명해서 이 컴포넌트가 react의 fu..

니코의 리액트 과정에서 번외로 타입스크립트와 react를 함께 하는 것을 알려주는 섹션이 있어서 섹션이 그리 길지않아 한번 해보고 넘어가기로 했다~ 먼저 npx create-react-app {reposit name} --typescript이렇게 해주면 typescript를 사용할 react앱을 만들 수 있다. 아 ... 수정되었다. npx create-react-app {reposit name} --template typescript라고 써주자. 그리고 vscode 를 실행해보면 기존 js파일이 아닌 tsx파일이 떡하니 자리잡고있다. 그리고 타입스크립트를 설정할 수 있는 tsconfig파일도 있다. 여기서 하나 추가해줬는데 noImplicitAny:false 이부분이다. 이부부은 앞서 살펴본 타입스크립..