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'

结果:

相关推荐
触底反弹10 小时前
🔥 React 零基础入门(上):环境搭建 + JSX 深度解析
前端·react.js·typescript
谷哥的小弟13 小时前
TypeScript对象类型
javascript·typescript
大家的林语冰20 小时前
🫡 见证历史,TypeScript 7 重写成功,VS Code 原地起飞,GitHub 第一语言联手 Go 破而后立!
前端·javascript·typescript
濮水大叔3 天前
在 DTO 中使用 Form Layout 配置复杂表单,支持 Tabs/Groups/Sections
vue.js·typescript·node.js
用户0934077735144 天前
HarmonyOS WPS Open SDK 实践:用能力分层重构 OpenFileRequest
typescript·harmonyos
来自内蒙古的田园蒙牛4 天前
WebStorm 接入 Ollama:使用 Qwen2.5-Coder 在本地运行 AI 编程助手
ide·人工智能·webstorm
gis开发之家5 天前
vue3直击架构痛点 依赖倒置与接口隔离——打造坚如磐石的插件与高阶组件(HOC)模式
javascript·架构·typescript·前端框架·vue3
冬枳5 天前
基于OpenSeagragon封装的前端病理切片展示组件
前端·typescript
退休倒计时5 天前
【每日一题】LeetCode 287. 寻找重复数 TypeScript
算法·leetcode·typescript
@@@@@@@@546 天前
JavaScript 的缺点与 TypeScript 的弥补
开发语言·javascript·typescript