【TypeScript学习笔记1】WebStorm 2019环境下配置TypeScript项目【非原创】

关注

转载最新推荐文章于 2026-04-18 00:01:27 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

TypeScript（一）TS介绍，环境安装与运行 TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript通过类型注解提供编译时的静态类型检查。其源于JavaScript（JS的拓展），终于JavaScript（编译成JS） TypeScript 起源于使用JavaScript开发的大型项目。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。阅读详情

引言

大概对JavaScript脚本语言了解以后，开始向JS的超集也就是TypeScript领域进军，此篇笔记是参考Cr博主的TypeScript - (二) 在WebStorm中创建和配置TypeScript项目
本人编写本博文的用意：2019版本下的WebStorm配置TypeScript资源少，并且作为本人学习笔记，不作其他用意。

运行原理

运行原理都一样，安装好node,TypeScript后，你可以使用Windows的控制台cmd，对刚刚编写的ts文件使用tsc xxx.ts 转换成js再执行，可是这样的动作太繁琐，因此就诞生了一系列的插件。
【编写ts文件->编译器自动转换成js->运行js文件】

安装步骤

1、安装WebStorm

WebStorm官网下载

本人使用的WebStorm版本是：2019.3.1，本篇博文也是针对2019版本

2、安装NodeJs

NodeJs官网下载
由于本文并不是以安装WebStorm,NodeJs为主，并且这些步骤也不难，就不详细写了，而且安装软件是程序猿最重要的技能之一。

3、运行NodeJs并安装TypeScript编译器

打开电脑cmd运行【Win+R】+cmd
如果NodeJs安装并且环境配置成功：
任意目录下输入node -v会有版本号
安装TypeScript
使用npm命令安装TypeScript编译器
输入npm install typescript -g

我电脑已经安装过了，但是如果你们安装成功也应该跟我的类似。
唯一要注意的是：TypeScript的路径，等下配置WebStorm要使用！

4、运行WebStorm并创建一个普通项目

在这里插入图片描述
tsconfig.json的具体配置可以使用默认的，详细配置可以在官网查询：
【TypeScript中文网】编译选项
我的配置是这样的：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

5、WebStorm配置TypeScript

File -> Settings
Language & Frameworks -> TypeScript 【配置TS语言规范】
如果你也是2019版本，你也找了很多教程，你会发现2019版本的WebStorm的TS设置界面是不一样的（少了很多东西）

还记得刚刚安装TypeScript完成后显示的安装路径吗？这里就要引用安装好的tsc.cmd文件
Tools -> File Watchers 【配置TS文件自动编译为JS文件】

这里默认没有TS的，需要自己创建
TypeScript
–target “ES5”
$F i l e N a m e W i t h o u t E x t e n s i o n$ .js
$F i l e D i r$