使用WebStorm创建和配置TypeScript项目

news2024/9/24 1:26:45

创建

这里我用的是WebStorm 2019.2.2版本

  1. 首先,创建一个空项目
    File -> New -> Project->Empty Project在这里插入图片描述
  2. 生成配置文件
    自动配置:
    打开终端输入tsc --init,即可自动生成tsconfig.json文件
    手动配置
    在项目根目录下新建一个tsconfig.json文件,并配置如下内容
    具体配置可以直接使用下面的配置,详细配置可以去官网查考每一个属性对应的作用
    官网地址:https://www.tslang.cn/docs/handbook/compiler-options.html
{
  "compilerOptions": {
    // 采用的模块系统
    "module": "es6",
    // 编译输出目标 ES 版本
    "target": "es6",
    // 删除所有注释,除了以 /!*开头的版权信息。
    "removeComments": true
  }
}

配置TypeScript

  1. File -> Settings->Language & Frameworks -> TypeScript 配置(ts语言规范配置)
    在这里插入图片描述
    如果没有安装的话,可以参考博文:https://blog.csdn.net/David_house/article/details/134077973?spm=1001.2014.3001.5502进行安装
  2. Tools -> File Watchers 配置(ts文件自动编译为js文件)
    在这里插入图片描述
    配置如下内容到对应位置:
TypeScript
--target "ES6"
$FileNameWithoutExtension$.js
$FileDir$

在这里插入图片描述
3. 项目中新建src目录和 “HelloWorld” TypeScript文件
保存之后自动生成了一个同名的js文件,这是上面配置生效的结果,对ts文件自动编译了
在这里插入图片描述
4. 运行文件,右键找到run命令
在这里插入图片描述
有的人可能找不到run这个命令,这个时候进行如下操作:
①安装直接运行所需依赖包: npm install -g ts-node
②settings->plugins,安装ts-node插件
在这里插入图片描述
然后重启,再右键就可以找到run命令啦

参考博文

  • https://blog.csdn.net/qq_36255237/article/details/98055686
  • https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/132826861

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1141179.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第四章 文件管理 八、文件保护

目录 一、口令保护 1、定义: 2、优点: 3、缺点: 二、加密保护 1、定义: 2、例子: 2、优点: 3、缺点: 三、访问控制 1、定义: 2、精简的访问控制表: (1)定义&a…

海南海口大型钢结构件3D扫描全尺寸三维测量平面度平行度检测-CASAIM中科广电

高精度三维扫描技术已经在大型工件制造领域发挥着重要作用,特别是在质量检测环节,高效、高精度,可以轻松实现全尺寸三维测量。本期,CASAIM要分享的应用是在大型钢结构件的关键部位尺寸及形位公差检测。 钢结构件,是将…

38 深度学习(二):tensorflow基础介绍

文章目录 tensorflow基础介绍基础张量自定义损失函数自定义模型和激活函数图函数(略)自动求导机制自定义fit tensorflow基础介绍 基础张量 import tensorflow as tf import numpy as np import pandas as pd# constant是常量张量 不能进行再次assign改…

【ETL工具】Datax-ETL-SqlServerToHDFS

🦄 个人主页——🎐个人主页 🎐✨🍁 🪁🍁🪁🍁🪁🍁🪁🍁 感谢点赞和关注 ,每天进步一点点!加油!&…

lazada获得lazada商品详情 API 返回值说明

item_get-获得lazada商品详情 lazada.item_get 公共参数 名称类型必须描述keyString是调用key(必须以GET方式拼接在URL中)获取key和secret接入secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_sear…

德思特新闻 | 走进德思特——通过创新帮助客户成功

文章来源:德思特测试测量 阅读原文:德思特新闻 | 走进德思特——通过创新帮助客户成功 走进德思特 2023年上半年,ChatGPT红遍全球,人工智能、B5G/6G、物联网、云计算、软件自动化等新兴技术的快速发展进一步推动科技行业的复苏…

vue核心面试题汇总【查缺补漏】

给大家推荐一个实用面试题库 1、前端面试题库 (面试必备) 推荐:★★★★★ 地址:web前端面试题库 很喜欢‘万变不离其宗’这句话,希望在不断的思考和总结中找到Vue中的宗,来解答面试官抛出的…

gd32部分映射1/2,完全映射,备用功能选择等

一、重映射与部分映射问题 参考相应用户手册; 打开:I/O 重映射功能和调试配置; AFIO 端口配置寄存器 0(AFIO_PCF0); AFIO 端口配置寄存器 1(AFIO_PCF1); 【e.g】以定时器…

Java练习题2021-4

"某游戏公司设计了一个奖励活动,给N个用户(1≤N≤10^7)连续编号为1到N,依据用户的编号S发放奖励。 发放奖励规则为: 公司随机设定三个非零正整数x,y,z。 如果S同时是x、y的倍数,奖励2张卡片&#xff1…

QCI利用量子计算为飞行汽车提供优化飞行路径和改进设计的功能

​(图片来源:网络) 长期以来,飞行汽车和量子计算机一直是“未来技术”的简写,它们将彻底改变交通世界。预计到2032年,量子计算的市场价值将达到1700亿美元,当前有很多实际用例已经证明了它的价…

如何用 Zabbix 监控 Radius 服务?

网管小贾 / sysadm.cc Radius 对于搞系统的小伙伴们来说应该并不陌生,它是提供身份认证的服务程序。 Radius 应用广泛,最简单的场景之一就是无线连接,使用用户名密码或者证书等方式通过它的验证后无线网络连接就可以建立起来。 如此重要的一…

1496. 判断路径是否相交

1496. 判断路径是否相交 java代码&#xff1a; class Solution {public boolean isPathCrossing(String path) {int x 0;int y 0;HashSet<String> hashSet new HashSet<>();hashSet.add("0-0");for (int i 0; i < path.length(); i) {switch (pa…

Vue-cli 搭建 SPA 项目,Vue 项目结构说明,开发示例,以及如何修改端口号,install 命令中的 -g,-S,-D 参数,嵌套路由,package.json 详解

目录 1. vue-cli安装 1.1 安装前提 1.2 什么是vue-cli 1.3 安装vue-cli 2. 使用vue-cli构建项目 2.1 使用脚手架创建项目骨架 2.2 到新建项目目录&#xff0c;安装需要的模块 2.3 如何修改端口号 2.4 添加element-ui模块 2.5 package.json详解 3. install命令中的-g…

FLStudio21完整版编曲软件多少钱?要不要购买

水果&#xff0c;全称Fruity Loop Studio&#xff0c;简称FL Studio。是一款全能的音乐制作软件&#xff0c;经过二十多年的演化更迭&#xff0c;其各项功能非常的先进。其开创性的Pat\song模式&#xff0c;也为初学者的学习提供了便利。那么水果音乐制作软件需要多少钱呢&…

修复VS2015没有代码提示的问题【已解决】

问题描述 在Visual Studio 中编写代码时&#xff0c;发现使用库函数的时候&#xff0c;在类对象后输入点后&#xff0c;并没有出现类对应的成员信息的提示。 解决过程 1&#xff09;方法1&#xff1a; 百度“vs 没有代码提示”&#xff0c;搜索解决方案。 方案1&#xff1…

高级路由配置

目录 路由协议认证 Ripv2的认证配置 OSPF认证 BGP认证 OSPF特殊区域 BGP的选路规则 路由策略&#xff08;route-policy和filter-policy&#xff09; IP-Prefix List:前缀列表 Filter-Policy 路由引入&#xff08;import-route&#xff09; Filter-policy和route-pol…

『 基础算法题解 』之双指针(下)

文章目录 和为S的两个数题目解析算法原理代码 三数之和题目解析算法原理代码 四数之和题目解析算法原理代码 和为S的两个数 题目解析 【题目链接】 该题目的原题为和为s的两个数: 即给定一组升序数据(数组price),并给出一个变量target,要求找出和为target的两个数; 算法原理…

第4关:书籍排序

题目&#xff1a; C&C结构体 (educoder.net) 思路&#xff1a; 1.字符串字典序排序---> 利用string.h里面的strcmp&#xff0c;由其返回值确定两字符串大小。&#xff08;pstrcmp(a,b)&#xff0c;若p>1&#xff0c;则a字典序大于b。&#xff09; 2.当不能定义字…

Java练习题2021-1

"从大于等于N的正整数里找到一个最小的数M&#xff0c;使之满足&#xff1a; M和M的逆序数&#xff08;如1230的逆序数为321&#xff09;的差的绝对值为一个[100000,200000]区间内的值。 输入说明&#xff1a;起始数字N&#xff1b; 输出说明&#xff1a;找到的第一个符合…

Java实现Excel导入和导出,看这一篇就够了(珍藏版2.0)

1. 前言 两年前&#xff0c;我发表了一篇自己基于POI实现的工具类 Java实现Excel导入和导出&#xff0c;看这一篇就够了(珍藏版)&#xff0c;也就是1.0版本&#xff0c;受到了不少粉丝和朋友喜欢&#xff0c;谢谢大家认可。在这两年多的时间里&#xff0c;经过粉丝们的建议&am…