WebStorm--配置并运行TypeScript项目

原文网址: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代码:

TypeScript 复制代码
var a:string = "Hello World"
console.log(a)

6.运行TS代码

右键demo.ts文件,点击Run 'demo.ts'或者"Debug 'demo.ts'

结果:

相关推荐
IllegalCreed12 小时前
用 TypeScript 从零重写《仙剑奇侠传》:能通关的浏览器版,和一个给它做内容的可视化编辑器
typescript
_zxd13 小时前
TypeScript 类型树
前端·typescript
Flynt20 小时前
SvelteKit 3 升级实录:sv migrate 改完 6 个源文件,还给我留了张任务清单
typescript·前端框架·svelte
光影少年2 天前
Taro 是如何解析入口配置 app.config.ts 和页面配置的?
微信小程序·小程序·typescript·reactjs·百度小程序·taro
AI情绪识别开源3 天前
HFpEF 心房-心室耦联效率无创监测方向(AVCEI)
typescript·laravel·perl
凤城老人3 天前
从 PyQt6 到 Electron:给 Edge TTS 做一个“多角色配音机“的踩坑手记
javascript·typescript·electron
zhousenshan5 天前
TypeScript 入门到精通
typescript
花旗蜕变5 天前
前端转 NestJS 全栈实践:从表单页面到微信业务系统
前端·typescript·nestjs
艺杯羹5 天前
Anthropic突袭发布Claude Code Mods!用TypeScript编写智能体中间件:告别AI误删与失控
人工智能·typescript·系统架构
FYKJ_20107 天前
SSM校园失物招领系统41452-计算机课程设计、毕业设计
java·vue.js·spring boot·python·mysql·typescript·spark