【TypeScript学习笔记1】WebStorm 2019环境下配置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编译器

1. 打开电脑cmd运行【Win+R】+cmd
   如果NodeJs安装并且环境配置成功：
   任意目录下输入node -v会有版本号
   
2. 安装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

1. File -> Settings
   

2. Language & Frameworks -> TypeScript 【配置TS语言规范】
   如果你也是2019版本，你也找了很多教程，你会发现2019版本的WebStorm的TS设置界面是不一样的（少了很多东西）
   
   还记得刚刚安装TypeScript完成后显示的安装路径吗？这里就要引用安装好的tsc.cmd文件

3. Tools -> File Watchers 【配置TS文件自动编译为JS文件】
   
   这里默认没有TS的，需要自己创建
   TypeScript
   –target “ES5”
   $FileNameWithoutExtension$.js
   $FileDir$

4. 配置完成 OK ->apply ->OK

6、测试使用

编写一行TS格式代码，【ctrl+s】保存你会发现编译器会自动执行转换

然后TS文件下就会自动生成一个JS文件，里面的代码就是从TS中转换而来的

在新生成的JS文件中，右键 -> Run 即可

其他方法编译TypeScript

如果你不喜欢WebStorm,你可以参考菜鸟教程中使用Visual Studio Code来开发Typescript（附安装手把手教程）
【菜鸟网】TypeScript 安装