리액트의 상태관리 Hooks 함수 useState, useReducer 를 타입스크립트로 작성하고자 한다. useState useState 에서 관리할 상태를 Generics 를 통해서 설정해줄 수 있다. 타입스크립트를 사용하고 있으므로 Generics 를 생략해도 값의 타입을 읽어서 보여준다. function Counter() { const [count, setCount] = useState(0); } Counter.tsx import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const onIncrease = () => setCount(count + 1); const onDec..

프로젝트 생성 --typescript 를 통해 타입스크립트 설정이 적용된 프로젝트가 생성된다. 타입스크립트를 사용하는 리액트 컴포넌트는 *.tsx 확장자를 사용한다. $ npx create-react-app ts-react-tutorial --template typescript 사용법 React.FC 를 사용할 때는 props 의 타입을 Generics 로 넣어서 사용한다. type GreetingsProps = { name: string; } const Greetings: React.FC = ({ name }) => { return Hello, {name}!; } 장점 props 에 기본적으로 children 이 들어가있다. 컴포넌트의 defaultProps, propTypes, contextTypes..

Generics 타입스크립트에서 함수, 클래스, interface, type alias 를 사용하게 될 때 여러 종류의 타입에 대하여 호환을 맞춰야 하는 상황에서 사용하는 문법이다. 함수 Generics 를 사용하면 실제 파라미터에 넣는 타입을 유추할 수 있다. function object(param: T) { return object; } 예를 들어 함수에서 받아오는 파라미터의 타입을 any 로 지정해주었을 때는 타입 유추가 모두 깨지게 된다. 결과가 any 라는 것은 해당 함수 안에 무엇이 있는지 알 수 없기 때문이다. 따라서 generics 를 작성해주면 해당 타입을 유추할 수 있게 된다. function merge(a: T1, b: T2) { return { ...a, ...b }; } const..

Interface 클래스 또는 객체를 위한 타입을 지정할 때 사용되는 문법 interface 객체를 선언한 뒤 interface 객체를 사용할 때 내부에 존재하는 객체가 꼭 있어야 한다. implements 키워드를 사용하여 해당 클래스가 Shape interface 의 조건을 충족하겠다는 것을 명시한다. 객체의 타입을 지정할 때 ? 가 들어간 것은 설정을 해도 되고 안해도 되는 값이라는 것을 의미한다. 타입이 동일하게 중첩되는 경우 중복되는 것을 지워주고 extends 를 이용하여 상속 받을 수 있다. interface 에서 지정하지 않은 값을 작성했을 때에는 할당할 수 없음으로 오류가 뜬다. 사용법 interface 를 선언하고 interface 조건을 충족하는 클래스를 생성할 때 멤버 변수를 선언한..

작업환경 설정 새로운 디렉터리 및 파일 생성 mkdir ts-practice cd ts-practice yarn init -y ---- packge.json 생성 yarn add typescript ts-node ----- typescript, ts-node 설치 yarn run tsc --init ----- typescript 설정 생성 practice.ts 에서 yarn run tsc 를 터미널에 입력하면 practice.js 파일이 생성된다. yarn run tsc 더보기 tsc --init 명령어를 통한 ts 환경설정 tsconfig.json target: 적용할 문법 버전 선택. 컴파일된 코드가 어떤 환경에서 실행될 지 정의한다. module: 컴파일된 코드가 어떤 모듈 시스템을 사용할지 정의한..