<div id="readability-page-1" class="page"><article>
<p data-ke-size="size16">WebStorm에서 기본적으로는 TypeScript 파일만 단독으로 실행할 수는 없다.</p>
<img src="https://blog.kakaocdn.net/dn/bubqW4/btrAp4Vy9ov/ppEYlA6YLqvccL06rqMkPk/img.png" alt="no-run">
<p data-ke-size="size16">단독으로 실행이 필요할 경우 JS 파일로 컴파일 후, 실행해야만 한다.</p>
<ul data-ke-list-type="disc">
<li><a href="https://www.jetbrains.com/help/webstorm/running-and-debugging-typescript.html#d38b8993">Run server-side TypeScript with Node.js</a></li>
</ul>
<p data-ke-size="size16">이 과정이 개발의 흐름을 많이 끊기 때문에 일반적인 JavaScript 파일을 실행하듯이 TypeScript 실행 환경이 필요하다.</p>
<h2 id="개선" data-ke-size="size26">개선</h2>
<p data-ke-size="size16">TypeScript 파일만 단독으로 수행하기 개별 플러그인만 설치하면 가능하다.</p>
<ul data-ke-list-type="disc">
<li><a href="https://plugins.jetbrains.com/plugin/10841-run-configuration-for-typescript/">Run Configuration for TypeScript</a></li>
</ul>
<p data-ke-size="size16">해당 플러그인 설치후, 프로젝트에 <code>ts-node</code> 를 설치한다.</p>
<pre><code>yarn add --dev ts-node</code></pre>
<p data-ke-size="size16">그리고 TS 파일을 다시 한번 우클릭 해보면? <br>다음과 같이 <code>Run/Debug</code> 실행 버튼이 생성된 것을 확인할 수 있다.</p>
<img src="https://blog.kakaocdn.net/dn/buvVcJ/btrAssgOy8t/YC0TGH1441WRiiD0vWnGCk/img.png" alt="run">
<p data-ke-size="size16">해당 버튼을 클릭해 실제로 수행해본다. <br>그럼 다음과 같이 정상적으로 TS 파일이 컴파일 되어 실행되는 것을 확인할 수 있다.</p>
<img src="https://blog.kakaocdn.net/dn/es1l7m/btrAuMexPcA/xksakLChxEQfkAKdBmXXz1/img.png" alt="result"></article></div>

기억보단 기록을

이동욱 (향로)

WebStorm에서 기본적으로는 TypeScript 파일만 단독으로 실행할 수는 없다.
단독으로 실행이 필요할 경우 JS 파일로 컴파일 후, 실행해야만 한다.
Run server-side TypeScript with Node.js
이 과정이 개발의 흐름을 많이 끊기 때문에 일반적인 JavaScript 파일을 실행하듯이 TypeScript 실행 환경이 필요하다.
개선
TypeScript 파일만 단독으로 수행하기 개별 플러그인만 설치하면 가능하다.
Run Configuration for TypeScript
해당 플러그인 설치후, 프로젝트에 ts-node 를 설치한다.
yarn add --dev ts-node
그리고 TS 파일을 다시 한번 우클릭 해보면? 
다음과 같이 Run/Debug 실행 버튼이 생성된 것을 확인할 수 있다.
해당 버튼을 클릭해 실제로 수행해본다. 
그럼 다음과 같이 정상적으로 TS 파일이 컴파일 되어 실행되는 것을 확인할 수 있다.

WebStorm에서 TypeScript 파일 단독으로 실행하기

댓글