TypeScript安装及编译

一、TypeScript是什么

​ Type script 是微软基于 Javascript 开发的开源编程语言,是拥有类型的 Javascript 的超集,继承了js 所有语法,此外增加了一些自己语法。可以编译成普通、千净、完整的 JavaScript
代码。

目的: 不是创造新的语言,是增强 JavaScript 的功能,使其更能适合多人开发的企业级项目

二、安装及编译

环境搭建前提:Node 和Npm

全局安装:

// 安装命令
npm install typescript -g

// 查看版本
tsc -version

编译运行

编写代码是在ts文件,但实际ts文件是无法直接运行的,需要编译为js文件后,运行js代码

  1. 创建ts 文件。例如hello.ts 文件

    ( TypeScript 编写的文件以 .ts 为后缀,用 TypeScript 编写 React 时,以 .tsx 为后缀)

  2. 编译。将TS编译为 Js

    在终端中输入命令,tsc hello.ts(此时,在同级目录中会出现一个同名的 js 文件)

  3. 执行Js 代码

    在node 中运行。在终端中输入命令,node hello.js

    演示图片:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

通过 ts-node 进行简化编译运行:

1 . 安装ts-node

npm install ts-node -g

2 . 另外ts-node 需要依赖 tslib 和@types/node 两个包

npm install tslib @types/node -g

3.项目文件夹下执行 tsc --init 自动生成ts 配置文件 tsconfig.json
4.通过 ts-node 运行TypeScript 的代码:

//会直接将 ts->js,然后运行 Js 代码
ts-node hello.ts

vsCode 配置自动监视编译

  1. 初始化配置文件tsc --init
  2. 修改配置

修改生成的js文件存放位置:文件夹所在目录的js文件夹下,js不存在会新建

在这里插入图片描述

  1. 开启自动编译

    终端->执行任务->显示所有任务->找到要监视的文件

在这里插入图片描述

tips:点击后没有监视到ts文件可能会报错,可以忽略正常使用

开启够创建编写ts文件则会自动生成对应js文件

在这里插入图片描述

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

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

相关文章

【Linux】从零开始认识动静态库 - 静态库

送给大家一句话: 永不言弃,就是我的魔法! ——阿斯塔《黑色四叶草》 ଘ(੭ˊ꒳​ˋ)੭✧ଘ(੭ˊ꒳​ˋ)੭✧ଘ(੭ˊ꒳​ˋ)੭✧ ଘ(੭ˊ꒳​ˋ)੭✧ଘ(੭ˊ꒳​ˋ)੭✧ଘ(੭ˊ꒳​ˋ)੭✧ ଘ(੭ˊ꒳​ˋ)੭✧ଘ(੭ˊ꒳​ˋ)੭✧ଘ(੭ˊ꒳​ˋ)੭✧ 从零…

mysql数据库调优篇章1--日志篇

目录 1.认识数据库中日志的作用2.增加mysql数据库中my.ini 基本配置3.增加my.ini中参数配置4.查看已经执行过的sql语句过去执行时间5.找出慢查询的sql6.常用参数查询命令7.认识慢查询日志记录8.认识通用日志记录(记录增删改查操作)9.认识二进制文件binlo…

多维点分布的均匀性评估方法(NDD和Voronoi 图法)

评估多维点分布的均匀性是统计学和数据科学中的一个重要问题,特别是在模拟、空间分析和样本设计等领域。下面,我将详细介绍2种评估多维点分布均匀性的方法,包括它们的数学原理、实现公式以及各自的优缺点。 1. 最近邻距离法(Neare…

CTF例题和知识点

[ACTF2020 新生赛]Include 打开靶机发现一个超链接,点击之后出现一段话 “Can you find out the flag?” 查看源码注入,无果 仔细看url,发现有flag.php 根据题目提示,该题应该是文件包含漏洞,因此可以判断出此题是PH…

通俗的理解网关的概念的用途(三):你的数据包是如何到达下一层的

其实,这一章我写不好,因为这其中会涉及到一些计算和一些广播等概念,本人不善于此项。在此略述,可以参考。 每台设备的不同连接在获得有效的IP地址后,会根据IP地址的规则和掩码的规则,在操作系统和交换机&a…

自动控制原理学习--平衡小车的控制算法(三)

上一节PID的simulin仿真,这一节用LQR 一、模型 二、LQR LQR属于现代控制理论的一个很重要的点,这里推荐B站的【Advanced控制理论】课程(up主DR_CAN),讲得很好,这里引用了他视频里讲LQR的ppt。 LQR属于lo…

车载电子电器架构 —— 应用软件开发(中)

车载电子电器架构 —— 应用软件开发(中) 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明…

医疗行业如何提升Windows操作系统登录的安全性

医疗行业使用账号和密码登录Windows系统时,可能会遇到一些痛点,这些痛点可能会影响工作效率、数据安全和用户体验。以下是一些主要的痛点: 1. 密码管理复杂性:医疗行业通常涉及大量的敏感数据和隐私信息,因此密码策略…

非模块化 Vue 开发的 bus 总线通信

个人感觉,JavaScript 非模块开发更适合新人上手,不需要安装配置一大堆软件环境,不需要编译,适合于中小项目开发,只需要一个代码编辑器即可开发,例如 vsCode。网页 html 文件通过 script 标签引入 JavaScrip…

学习笔记——字符串(单模+多模+练习题)

单模匹配 Brute Force算法(暴力) 算法思想 母串和模式串字符依次配对,如果配对成功则继续比较后面位置是否相同,如果出现匹配不成功的位置,则j(模式串当前的位置)从头开始,i&…

中北大学软件学院javaweb实验二JSP应用开发实验报告

实验时间 2024年4月 25 日17时至 22 时 学时数 4 1.实验名称 实验2:JSP应用开发(2学时) 2.实验目的 (1)学会编写和运行简单的JSP页面,理解其运行原理; (2)学会使用JSP的声明、表达式、脚…

中国211大学全部排名一览表

211大学是指中国教育部实施的名为“211工程”的高等教育发展战略中被选为重点支持的高等院校。这个名称来源于项目的启动背景和目标:“211”中的“21”代表21世纪,意味着该项目面向21世纪的中国高等教育发展;“1”则意指要重点建设大约100所左…

126.删除链表的倒数第N个节点(力扣)

题目描述 代码解决(双指针) /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, Li…

C语言实现扫雷游戏完整版

游戏介绍: 目录 游戏介绍: 游戏框架: 游戏具体功能实现: 棋盘的定义: 棋盘初始化: 棋盘打印: 棋盘布置雷: 棋盘扫雷: 爆炸展开一片: 获取周围八个…

画出入学管理系统的顶层图和1层图

(学校作业) 题目如下: 某培训机构入学管理系统有报名、交费和就读等多项功能,下面是对其各项功能的说明: 1、报名:由报名处负责,需要在学员登记表上进行报名登记,需要查询课…

Kettle连接Mysql数据库时报错——Driver class ‘org.gjt.mm.mysql.Driver‘ could not be found

一、问题描述 当我们使用ETL工具Kettle需要连接Mysql数据库进行数据清洗操作,在配置好Mysql的连接串内容后,点击【测试】按钮时报错【错误连接数据库 [MysqlTestConnection] : org.pentaho.di.core.exception.KettleDatabaseException: Error occurred while trying to conne…

记一次DNS故障导致用户无法充值的问题(下)

上一篇说到DNS故障导致无法充值,后来我们通过拨测发现业务域名的解析目标地址被解析到了【127.0.0.1】IP。 1、联系阿里云厂商,通过沟通,阿里云反馈我们的域名被XX省通管单位封禁了,导致解析到了不正确的地址。 2、为了解决用户问…

idea运行SpringBoot项目爆红提示出现:Java HotSpot(TM) 64-Bit Server VM warning...让我来看看~

在运行SpringBoot项目的时候,发现总有这个警告提示出现,有点强迫症真的每次运行项目都很难受啊!那么今天便来解决这个问题! 先来看一下提示内容:Java HotSpot(TM) 64-Bit Server VM warning: Options -Xverify:none an…

多目标跟踪入门介绍

多目标跟踪算法 我们也可以称之为 Multi-Target-Tracking (MTT)。 那么多目标跟踪是什么? 不难看出,跟踪算法同时会为每个目标分配一个特定的 id 。 由此得出了目标跟踪与目标检测的区别(似乎都是用方框来框出目标捏…

树与二叉树之间的转换

树转化成二叉树:兄弟相连留长子 1.加线:在兄弟之间加一条线 2.抹线:对每个结点,除了其左孩子外,去除其与其余孩子之间的关系 3.旋转:以树的根结点为轴心,将整树顺时针转45 二叉树转化成为树…