그놈의 타입스크립트, 나의 발목을 잡길래 드디어 공부 시작한다. 늦어도 너무 늦었다. 그동안 내가 회사에서 init한 프로젝트가 몇개인데, 그럴 여유 따윈 없다는 핑계로 ts공부를 하지 않고 있었다. 좋아! 다음 프로젝트는 타스로 만들어보겠다.
공부 방식 : 벨로퍼트님 강의듣고 실습, 정리
공부 흔적:
https://github.com/dodody/ts_practice/tree/master/src
# 0. ts 테스트할 수 있는 환경 만들기
yarn add typescript ts-node
yarn initts_config.json 맹드는 법 :
yarn tsc --init디렉토리 루트에서 위의 명령어를 작성하면 tsconfig.json 파일이 생성된다. 그 안에 많은 정보들이 주석되어 있다. outDir 값의 주석 풀고 './' 에서 './dist' 로 수정하고 yarn run tsc라고 하면 dist 안에 ts 코드가 컴파일 되어 js 코드로 추출 되어있다.
yarn run tsc컴파일 코드를 실행해보고 싶으면 아래 명령어를 작성하면 된다.
node ./dist/generics.js
# 1. interface, type alias에 대해 알아보기
interface, type alias : class나 object의 타입을 지정해주는 역할을 한다.
alias는 별칭이라는 뜻, 타입에다가 별칭을 지어준다는 말이다.
언제 interface, type alias를 써야 하는가? 라이브러리의 타입을 설정할 때는 interface 사용을 지향한다고 한다. 하지만, 협업이나 가독성 좋은 코드를 위해 일관성있게 사용하는 것이 중요하다.
# 2. generics에 대해 알아보기
type을 any로 지정하는 경우를 대체해서 Generics를 사용할 수 있다. 타입을 유추하는데 상당히 도움이 된다. 강의에서는 멋진 예시들을 많이 보여주셨는데, 구경하고 싶으면 위에 올려놓은 깃헙 주소를 참고하도록!
# 3. ts로 react 컴포넌트 만들기!
npx create-react-app ts_react_practice --template typescript벨로버트 님은 React.FC 를 선호하지 않는다! 함수형 컴포넌트에서 const, function 으로 컴포넌트를 만들 때 type을 지정하는 방법을 배웠고, const 의경우 React.FC를 사용해야되는데, 그때의 장점과 단점이 각각 존재한다. 장점은 childlren을 따로 받아오지 않아도 props에 담겨있다는 것, 그리고 생성하는 컴포넌트의 자동완성이 잘 된다는 점.. 이정도 단점은 defaultProps가 완벽하게 적용되지 않는 다는 점. 부모 컴포넌트에서 잘 인식을 못하고 있는 듯. 아주 아쉬운 버그수준의 단점.
그리고 children을 default로 항상 전달해주는 것도 그렇게 장점이 아닌것으로 보인다. 명확하게 children을 전달해야줘야하는 상황이 모호하게 느껴질수도 있다는 것이다. 이런 사항으로 React.FC를 선호하지 않는 개발자들이 많다고 한다.
나도 충분히 동감. function 함수형을 사용해야겠다!
import React from "react";
type DodyProps = {
age: 28;
onClick: (name: string) => void;
}
function Dody({age, onClick}: DodyProps){
return <div onClick={() => onClick(name)}>{age}</div>
}
느낀점
ts 뿐아니라 바닐라 스크립트에 대해서도 깊이가 부족하다고 느낀다. js class, new, getter함수, queue 등에 대해서 공부를 해야겠다.