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'

结果:

相关推荐
螺丝钉tina25 分钟前
[Playwright][01] 从 Puppeteer 到 Playwright:为什么选择 Playwright + TypeScript?
前端·javascript·typescript
miofly15 小时前
GitHub 今日推荐|rea:用 MCP 把反编译器和 AI agent 接到一起的逆向工具
typescript·开源·github
ZoeLandia1 天前
React11:数据请求与 TanStack Query
前端·react.js·typescript·react
康小旺2 天前
AI 写 Vue 总写成同一个味道:给它装 Skills,装的不是知识是边界
vue.js·typescript
ZoeLandia2 天前
React08:自定义 Hook
开发语言·前端·react.js·typescript
aloha_7893 天前
HTML、JavaScript 与 TypeScript 基础速查
javascript·typescript·html
离歌漠4 天前
《我用 Tauri 做了一个本地开发工具箱》
rust·typescript·vue
enjoy编程4 天前
playwright学习-I
typescript·vue·nodejs·1024程序员节·playwright
iDao技术魔方4 天前
Bun v1.4.4 实战:用 bun fmt 替掉 prettier 的 5 个步骤
typescript·1024程序员节
梅雅达编程笔记4 天前
Day 17 | uni-app 小程序:前端从零搭建
微信小程序·typescript·uni-app·vue3·pinia·前端开发·全栈