使用WebStorm创建和配置TypeScript项目

创建

这里我用的是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.mfbz.cn/a/107096.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构与算法之矩阵: Leetcode 48. 旋转矩阵 (Typescript版)

旋转图像 https://leetcode.cn/problems/rotate-image/ 描述 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。你必须在 原地 旋转图像,这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1 输入&…

【Docker】Linux网桥连接多个命名空间

veth实现了点对点的虚拟连接,可以通过veth连接两个namespace,如果我们需要将3个或者多个namespace接入同一个二层网络时,就不能只使用veth了。 在物理网络中,如果需要连接多个主机,我们会使用bridge(网桥&…

增强常见问题解答搜索引擎:在 Elasticsearch 中利用 KNN 的力量

在快速准确的信息检索至关重要的时代,开发强大的搜索引擎至关重要。 随着大型语言模型和信息检索架构(如 RAG)的出现,在现代软件系统中利用文本表示(向量/嵌入)和向量数据库已变得越来越流行。 在本文中&am…

javaweb+mysql的电子书查阅和下载系统

图书分类查看、热门下载、最新上传、站内数据统计。 登陆注册、图书查询、图书详情、图书下载。 身份分为管理员和用户。 源码下载地址 支持:远程部署/安装/调试、讲解、二次开发/修改/定制

串口占用检测工具

串口占用检测工具 平时需要检测哪个程序占用了串口,下面介绍一款非常方便的工具,它的工具箱里包含一个串口占用检测工具,可以非常方便的检测出来哪个程序占用了串口,并给出程序名和PID。 官网下载地址:http://www.red…

安装 tensorflow==1.15.2 遇见的问题

一、直接安装 命令:pip install tensorflow1.15.2 二、换 阿里云 镜像源 命令:pip install -i http://mirrors.aliyun.com/pypi/simple tensorflow1.15.2 三、换 豆瓣 镜像源 命令:pip install http://pypi.douban.com/simple tensorflow1…

UWB室内定位系统全套源码 高精度人员定位系统源码

UWB室内定位系统全套源码 高精度人员定位系统源码 UWB室内定位系统是一种高精度的室内定位技术,它可以实现对室内人员和物品的实时精确定位,具有重要的应用意义和社会价值。 UWB定位精度在厘米级内,其精度远远高于WIFI和蓝牙定位。精度、安全…

华为eNSP配置专题-策略路由的配置

文章目录 华为eNSP配置专题-策略路由的配置0、概要介绍1、前置环境1.1、宿主机1.2、eNSP模拟器 2、基本环境搭建2.1、终端构成和连接2.2、终端的基本配置 3、配置接入交换机上的VLAN4、配置核心交换机为网关和DHCP服务器5、配置核心交换机和出口路由器互通6、配置PC和出口路由器…

ubuntu安装nps客户端

Ubuntu安装nps客户端 1.什么是nps内网穿透?2.设备情况3.下载客户端3.链接服务端3.1、无配置文件模式3.2、注册到系统服务(启动启动、监控进程) 1.什么是nps内网穿透? nps是一款轻量级、高性能、功能强大的内网穿透代理服务器。目前支持tcp、udp流量转发…

单片机为什么一直用C语言,不用其他编程语言?

单片机为什么一直用C语言,不用其他编程语言? 51 单片机规模小得拮据,C 的优势几乎看不到。放个类型信息进去都费劲,你还想用虚函数?还想模板展开?程序轻松破 10k。最近很多小伙伴找我,说想要一些…

uview 1 uni-app表单 number digit 的输入框有初始化赋值后,但是校验失败

背景: 在onReady初始化规则 onReady() { this.$refs.uForm.setRules(this.rules); }, 同时:ref,model,rules,props都要配置好。 报错 当input框限定type为number,digit类型有初始值不做修改动作,直接提交会报错,验…

leetCode 76. 最小覆盖子串 + 滑动窗口 + 哈希Hash

我的往期文章:此题的其他解法,感兴趣的话可以移步看一下: leetCode 76. 最小覆盖子串 滑动窗口 图解(详细)-CSDN博客https://blog.csdn.net/weixin_41987016/article/details/134042115?spm1001.2014.3001.5501 力…

Java SE 学习笔记(十四)—— IO流(2)

目录 1 字节流1.1 字节流写数据1.1.1 创建字节输出流对象1.1.2 字节流写数据 1.2 字节流读数据1.2.1 创建字节输入流对象1.2.2 字节流读数据 1.3 字节流复制文件1.4 流的刷新与关闭1.5 资源释放方式1.5.1 try-catch-finally1.5.2 try-with-resource 2 字符流2.1 字符流概述2.2 …

PyCharm中文使用详解

PyCharm是一个Python IDE,可以帮助程序员节省时间,提高生产力。那么具体怎么用呢?本文介绍了PyCharm的安装、插件、外部工具、专业功能等,希望对大家有所帮助。 之前没有系统介绍过PyCharm。如何配置环境,如何DeBug&a…

springBoot与Vue共同搭建webSocket环境

欢迎使用Markdown编辑器 你好! 这片文章将教会你从后端springCloud到前端VueEleementAdmin如何搭建Websocket 前端 1. 创建websocket的配置文件在utils文件夹下websocket.js // my-js-file.js import { Notification } from element-ui // 暴露自定义websocket对…

MSQL系列(九) Mysql实战-Join算法底层原理

Mysql实战-Join算法底层原理 前面我们讲解了BTree的索引结构,及Mysql的存储引擎MyISAM和InnoDB,今天我们来详细讲解下Mysql的查询连接Join的算法原理 文章目录 Mysql实战-Join算法底层原理1.Simple Nested-Loop Join 简单嵌套循环2.Block Nested-Loop Join 块嵌套…

linux 内存检测工具 kfence 详解(一)

版本基于: Linux-5.10 约定: PAGE_SIZE:4K 内存架构:UMA 系列博文: linux 内存检测工具 kfence 详解(一) linux 内存检测工具 kfence 详解(二) 0. 前言 本文 kfence 之外的代码版本是基于 Linux5.10,…

ORACLE-递归查询、树操作

1. 数据准备 -- 测试数据准备 DROP TABLE untifa_test;CREATE TABLE untifa_test(child_id NUMBER(10) NOT NULL, --子idtitle VARCHAR2(50), --标题relation_type VARCHAR(10) --关系,parent_id NUMBER(10) --父id );insert into untifa_test (CHILD_ID, TITLE, RELATION_TYP…

React 核心与实战2023版

课程亮点: 完整的前后台项目(PC+移动;完成业务;)React 最新企业标准技术栈(React 18 + Redux + ReactRouter + AntD)React + TypeScript (为大型项目奠定了基础)课程内容安排: React 介绍 React 是什么? React 是由Meta公司研发,是一个用于 构建Web和原生交互界面…

支持CT、MR三维后处理的医学PACS源码

医学影像归档与通信系统(picture archiving and communication systems,PACS)是应用于医院的数字医疗设备,如CT、MR(磁共振)、US(超声成像)、X线、DSA(数字减影&#xff…
最新文章