겸이네~

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

오늘부터 타입스크립트 공식문서를 하나씩 정리해본다. 공홈은 뭔가 ui가 나랑 맞지않아서 gitbook으로 읽는다~ https://typescript-kr.github.io/pages/basic-types.html TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 자 오늘 정리할 내용은 기본타입에 대해서 알아보자. 자바스크립트와 거의 유사하다. 먼저 - Boolean - let isDone: boolean = false; 뭐 설명할게 없다. - Number - 마찬가지다. 일단 자바스크립트 처럼 모두 부동 소수 값이다. typescropt는 16진수, 10진수 리터럴에 더불어 ECMAScript2015에서 나온 2진수, 8진수 리터럴도 지원한..

이번은 타입스크립트로 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 이부분이다. 이부부은 앞서 살펴본 타입스크립..

타입스크립트란?\ 타입스크립트는 자바스크립트에 타입을 부여한 언어이자 자바스크립트를 확장한 언어이다. MS에 의해 개발 관리되는 오픈소스 프로그래밍 언어. ES5의 Superset이므로 기존의 자바스크립트ES5 문법을 그대로 사용할 수 있다. ES6의 새로운 기능들을 사용하기위해 babel같은 별도의 트랜스파일러를 사용하지 않아도 새로운 기능을 기존의 자바스크립트 엔진에서 실행할 수 있다. 자 어떤점이 더 나은 것일까? 디버깅이 쉽다라는 것을 찾을 수 있는데 예를 들어 이런 함수가 있다고 생각해보자. 개발자가아닌 다른사람이 보더라도 이 함수는 덧셈을 나타내는 함수임을 알 수있다. 그런데 인자에 숫자가 아닌 다른 string이라던지 다른 타입이 들어간다면 원하는 결과가 아닌 값을 얻게 된다. c언어라면 i..