[웹스톰] 리액트 타입스크립트 : ts 파일 생성 및 함수 실행

Ctrl + Alt + S 단축키로 설정으로 갑니다.

 

언어와 프레임워크를 클릭하면 프로젝트를 구성하는 프레임워크와 테크놀로지를 볼 수 있습니다.

 

 

npm i react-router-dom @types/react-router-dom

 

우측하단 업데이트 실행합니다.

다소 시간이 걸립니다(약 5분내외). 다 완성되면 아래와 같은 화면으로 마무리 됩니다.

 

추가 작업을 하지 않았는데 아래와 같은 에러가 발생합니다.

 

tsconfig.json 을 열어서

"target" : "es6" 로 고칩니다

"noImplicitAny": false 을 추가합니다.

"module": "CommonJS" 로 수정합니다.

 

 

이제 입문용 코드를 작성해봅니다. 아래와 같이 구성합니다.

 

1) --require ts-node/register

 

 

Node parameter 설정 출처 -

https://ivvve.github.io/2019/12/17/js/ts/typescript-webstorm-debug/

WebStorm으로 TypeScript debug 모드 사용하기

 

 

2) 자바스크립트 파일 설정

 

터미널에서

 

npm i -D typescript ts-node 엔터

 

우측하단에 update dependency 클릭

 

break point를 걸고 debug를 실행