WebStorm--配置并运行TypeScript项目

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

原文网址：WebStorm–配置并运行TypeScript项目-CSDN博客

简介

本文介绍WebStorm如何配置并运行TypeScript项目。

为简单起见，以下用TS代表TypeScript。

1.安装node.js

可以直接安装node.js或者使用nvm安装node.js。

2.安装TS编译器（非必须）

场景1：默认情况

WebStorm已经自带了TS编译器，如下图所示：

场景2：Vue里引入了typescript

此时WebStorm自动选择为引入的版本：

场景3：下载自己想要的TS编译器

方法如下

1.安装

npm install typescript -g

2.查看安装结果（查看版本）

tsc -v

如下图所示，则表示安装成功。

安装后，可以在WebStorm里选择它：

3.安装TS-Node

npm install -g ts-node

查看安装结果

ts-node -v

4.安装TS插件

在WebStorm里安装TS插件：

5.新建项目

新建空项目

创建完后，右键项目，新建TS文件 

 创建完后，在demo.ts文件里写TS代码：

var a:string = "Hello World"
console.log(a)

6.运行TS代码 

右键demo.ts文件，点击Run 'demo.ts'或者“Debug 'demo.ts'

结果：