이번에는 타입스크립트와 Express를 함께 세팅하는 방법을 정리하고자 한다. Express 프로젝트 생성 npm install -g express-generator 직접 Express를 구성해도 상관없지만, express-generator를 사용하면 간단하게 환경 구성이 가능하기 때문에 사용한다! 패키지 설치 npm install --save-dev nodemon 코드를 작성하면 바로바로 변경사항을 적용하기 위해서 nodemon을 사용한다. npm install --save-dev @types/node @types/express @types/morgan @types/debug @types/cookie-parser @types/http-errors ts-node typescript @types/node ..

object 자료에 타입을 미리 만들어주고 싶은데, 어떤 속성들이 들어올 수 있는지 모르거나, 타입 지정할 속성이 너무 많은 경우에는 index signatures를 사용하면 편하게 가능하다. index signatures interface stringOnly { [key :string] :string } let obj :stringOnly = { name :'kim', age :'20', location :'seoul' } StringOnly라는 interface를 만들었다. 특이한 점으로 속성으로 [ key :string] : string 이라고 정의가 되어있다. 이렇게 정의하면 " 모든 string으로 들어오는 key값에 할당되는 value는 string이어야 한다. " 라는 타입이 된다. 즉, {..

interface는 object 타입을 지정할 때 사용하는 키워드이다. 하지만 용도가 하나 더 있는데, class 타입을 확인하고 싶은 경우에도 interface 문법을 사용한다. 이때 추가로 필요한 게 implements 키워드이다. interface & implements class Car { model :string; price :number = 10000; constructor(a :string) { this.model = a; } } let myCar = new Car("morning"); class Car를 통해 생성되는 object들은 model과 price 속성을 가지고 있다. 근데, class가 model과 price 속성을 가지고 있는지 타입으로 확인하고 싶은 경우에 interface와..

TypeScript로 프로젝트를 진행하다 보면 d.ts 파일을 보게 된다. d.ts 파일은 타입만 저장할 수 있는 파일 형식이다. 사용하는 이유는 타입 정의만 따로 저장해서 import 하기 위해서 프로젝트에서 사용하는 타입을 쭉 정리하는 레퍼런스용으로 사용 타입만 모아서 정의하는 d.ts 파일명.d.ts라고 작성한 파일은 type 키워드, interface 같은 타입 정의만 넣을 수 있다. 함수의 경우엔 { } 중괄호 붙이는 게 불가능하고 파라미터 & return 타입만 지정 가능하다. export type Age = number; export type multuply = (x :number, y :number) => number export interface Person { name :string }..

프로젝트를 진행하다 보면 외부 자바스크립트 파일을 이용하는 경우가 있다. import 문법으로 가져와 사용하면 되는데, 타입스크립트로 작성된 파일이 아닌, 자바스크립트로 작성된 파일이라면 타입 지정 문제로 에러가 발생할 수 있다. // data.js let a = 10; let b = { name : 'kim' } // index.js console.log(a + 1); 일반적인 경우라면 index.html 역할을 하는 곳에 두 파일을 첨부하면 된다. (index.html) // index.ts를 변환시킨 js 파일 콘솔창으로는 a + 1이 11로 잘 나오지만 타입스크립트 파일 내에서는 a가 정의되어 있지 않다는 에러가 발생한다. 타입스크립트 입장에서는 a라는 변수를 import 한 적이 없기 때문에 에..

Tuple Type? Tuple Type은 array에 붙일 수 있는 타입인데, 자료의 위치까지 정확하게 지정할 수 있는 타입이다. let anything : [string, boolean]; anything = ['test', true]; [] 괄호 안에 타입을 적으면 Tuple Type이 된다. type Num = [number, number?, number?]; let num1 :Num = [10]; let num2 :Num = [10,20]; let num3 :Num = [10,20,30]; Tuple 안에서도 물음표를 사용해서 옵션이라고 표현을 할 수 있다. type Num = [number, number?, number]; 하지만 물음표 옵션은 제일 마지막부터 순차적으로 붙일 수 있으며, 중간..

state와 reducer 만들 때 타입 지정 import { Provider } from 'react-redux'; import { createStore } from 'redux'; const 초기값 = { count: 0 }; function reducer(state = 초기값, action) { if (action.type === '증가') { return { count : state.count + 1 } } else if (action.type === '감소'){ return { count : state.count - 1 } } else { return initialState } } const store = createStore(reducer); ReactDOM.render( , document...

1. React에 TypeScript 추가하기 신규 프로젝트 npx create-react-app 프로젝트명 --template typescript 프로젝트를 만들 때 TypeScript를 자동으로 세팅해주는 명령어이다. 기존 create-react-app에 --template typescript 만 추가된 명령어다. 기존 프로젝트 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 패키지를 다운받고 js 파일을 ts, jsx 파일을 tsx 파일로 변경하고 프로젝트를 진행하면 된다. 하지만 파일을 변경하고 수정하는 작업이 오래걸려서 가능하면 신규 프로젝트를 만드는 방식이 안전하다. 2. React에서 사용하..