TypeScript-- 配置Typescript环境(1)ts 转js,tsc --watch 实时编译

news2024/12/29 8:51:27

文章目录

    • 安装Typescript
    • 判断是否有运行权限
    • 编写第一Typescript文件
    • 手动编译Ts文件转Js文件
    • 实时编译


安装Typescript

npm install -g typescript

判断是否有运行权限

命令行运行

tsc -v

遇到了权限问题

在这里插入图片描述

用管理员打开window自带的powershell

在这里插入图片描述
运行如下指令即可:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted

在这里插入图片描述
重新打印版本号,如下表示成功了。

在这里插入图片描述

编写第一Typescript文件

// greeter.ts
function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);

手动编译Ts文件转Js文件

tsc greeter.ts

在这里插入图片描述
自动生成了对应的JS文件了

// 自动生成的 greeter.js
function greeter(person) {
    return 'Hello, ' + person;
}
var user = 'Jane User';
document.body.textContent = greeter(user);

实时编译

tsc --watch greeter.ts

这样,只要修改greeter.ts,就会自动编译成greeter.js了。


:)

额外:刚玩typescript的小白,如果把一些JS代码放在配置了TS的项目,那就会如下显示:

在这里插入图片描述

由于篇幅原因,将在本专栏其他文章讲解TS文件处理红色波浪线的几种方式,可从本文章开发进入。

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

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

相关文章

C++对象调用优化

C对象调用优化 临时对象拷贝构造新对象,临时对象就不会产生!!! 常见的对象调用过程 c编译器对于对象构造的优化:用临时对象拷贝新对象的时候,临时对象就不产生了,直接构造新对象就可以了。 …

DEFORMABLE DETR: DEFORMABLE TRANSFORMERS FOR END-TO-END OBJECT DETECTION 论文精度笔记

DEFORMABLE DETR DEFORMABLE DETR: DEFORMABLE TRANSFORMERS FOR END-TO-END OBJECT DETECTION 参考:AI-杂货铺-Transformer跨界CV又一佳作!Deformable DETR:超强的小目标检测算法! 摘要 摘要部分,作者主要说明了如…

STM32F4X Systick系统滴答定时器

STM32F4X Systick系统滴答定时器 Systick定时器Systick使用Systick时钟源Systick寄存器Systick频率计算Systick例程 Systick定时器 在以Crotex-M4为架构的MCU中,都会有一个Systick内核定时器,这个定时器的作用可以给系统一个心跳时钟,通常用…

python3/pip3 SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed

环境: mac os 背景: 电脑之前安装的是python3.9 , 现在升级到python3.10。 从python官网下载macos版本的python3.10 pkg。 双击安装。 程序使用aiohttp访问ebay 。 出错: aiohttp.client_exceptions.ClientConnectorCertifi…

图论算法基础:最小生成树算法(kruskal算法和Prim算法)

文章目录 一.图邻接矩阵数据结构二.kruskal算法算法实现思想kruskal算法接口实现 三.Prim算法Prim算法接口实现 一.图邻接矩阵数据结构 以STLvector和unordered_map为适配容器实现图数据结构: namespace Graph_Structure {//Vertex是代表顶点的数据类型,Weight是边…

系统架构设计高级技能 · 大数据架构设计理论与实践

系列文章目录 系统架构设计高级技能 软件架构概念、架构风格、ABSD、架构复用、DSSA(一)【系统架构设计师】 系统架构设计高级技能 系统质量属性与架构评估(二)【系统架构设计师】 系统架构设计高级技能 软件可靠性分析与设计…

最新WAF信息收集技术

WAF信息收集 目前,市面上的WAF大多都部署了云服务进行防护加固,让WAF的防护性能得到进一步提升。 图1-32所示为安全狗最新版服务界面,增加了“加入服云”选项。 安全狗最新版服务界面,不仅加强了传统的WAF防护层,还增…

七层、四层和五层网络模型区别和联系

七层、四层和五层网络模型区别和联系 概述OSI网络7层模型(概念型框架)概述图片分析 四层模型概述常用协议OSI与TCP/IP四层的区别 五层模型概述三种网络模型对比 总结 概述 网络模型-七层模型(OSI模型)、五层协议体系结构和TCP/IP…

[C++ 网络协议] 多进程服务器端

具有代表性的并发服务器端实现模型和方法: 多进程服务器:通过创建多个进程提供服务。✔ 多路复用服务器:通过捆绑并统一管理I/O对象提供服务。 多线程服务器:通过生成与客户端等量的线程提供服务。 1. 进程的概念及应用 1.1 什么…

基于算术优化算法优化的BP神经网络(预测应用) - 附代码

基于算术优化算法优化的BP神经网络(预测应用) - 附代码 文章目录 基于算术优化算法优化的BP神经网络(预测应用) - 附代码1.数据介绍2.算术优化优化BP神经网络2.1 BP神经网络参数设置2.2 算术优化算法应用 4.测试结果:5…

mybatis自动生成文件配置记录

记录下mybatis自动生成mapper文件&#xff0c;虽然现在有点过时了&#xff0c;但对于新手来说还是有一定用处的&#xff08;diss下通过这种文章引流关注的博主&#xff09;。 比较简单&#xff0c;基本就三步搞定&#xff01; 1、pom配置 <!--mybatis自动生成代码插件-->…

【Qt学习】07:绘图与绘图设备

OVERVIEW 绘图与绘图设备一、QPainter二、QPainterDevice1.QPixmap2.QBitmap3.QImage4.QPicture 绘图与绘图设备 一、QPainter Qt 的绘图系统允许使用API在屏幕和其它打印设备上进行绘制&#xff0c;整个绘图系统基于QPainter&#xff0c;QPainterDevice和QPaintEngine三个类&…

Eplan软件安装包分享(附安装教程)

目录 一、软件简介 二、软件下载 一、软件简介 Eplan软件是一款专为电气专业设计开发的软件&#xff0c;旨在提高电气设计的效率和质量。以下是Eplan软件的详细介绍。 1、Eplan的历史和演变 Eplan是一款由德国Eplan公司开发的电气设计软件&#xff0c;自1984年推出以来&…

如何在windows电脑上安装多个node,并可以进行随意切换

一、进入官网http://nvm.uihtm.com/ 下载 二、启动解压后的程序 1.开始安装nvm 选择要安装的目录 一直下一步–下一步–最后点击完成 3.最后点击完成即可 ![在这里插入图片描述](https://img-blog.csdnimg.cn/3656568c7e9946e8a04219811fc4c4d3.png 三、在cmd控制台进行操作…

VMware ESXi 7.0 优化VMFSL磁盘占用与系统存储大小

文章目录 VMware ESXi 7.0 优化VMFSL磁盘占用与系统存储大小引言创建ESXi7.0可启动 U 盘结果检查VMware ESXi 7.0 优化VMFSL磁盘占用与系统存储大小 引言 本文讲述了在 J1900平台上安装ESXi7.0时减少 VMFSL 分区占用的说明, 通常这来说些主机内置的磁盘空间非常小, 采用默认安…

uniapp返回上一页并刷新

在uniapp中&#xff0c;经常会有返回上一页的情况&#xff0c;官方提供有 uni.navigateBack 这个api来实现效果&#xff0c;但是此方法返回到上一页之后页面并不会更新&#xff08;刷新&#xff09;。 例如有这样一个场景&#xff1a;从地址列表页点击添加按钮进入添加地址页面…

Aidex 移动端快速开发框架# RuoYi-Uniapp项目,uniapp vue app项目跨域问题

参考地址&#xff1a; manifest.json官方配置文档&#xff1a;manifest.json 应用配置 | uni-app官网 Chrome 调试跨域问题解决方案之插件篇&#xff1a; uni-app H5跨域问题解决方案&#xff08;CORS、Cross-Origin&#xff09; - DCloud问答 其实uni-app官方有解决跨域的办…

「MySQL-01」MySQL基础

目录 一、数据库概念 1. 什么是数据库 2. 为什么要有数据库&#xff1f; 3. 数据库将数据存在哪里&#xff1f; 二、知名数据库介绍 1.知名数据库介绍 2.为什么要学习MySQL 三、MySQL的基本使用 0. 安装MySQL 1. 数据库客户端链接服务端 2. Windows下的MySQL服务端管理 3. 数据…

Pygame编程(10)freetype模块

Pygame编程&#xff08;10&#xff09;freetype模块 函数示例 函数 pygame.freetype.get_error 返回最新的FreeType错误get_error() -> strget_error() -> None pygame.freetype.get_version 返回FreeType版本get_version(linkedTrue) -> (int, int, int) pygame.fre…

斯坦福人生设计课——简略笔记

来源&#xff1a;⽐尔博内特 戴夫伊万斯 著图书《人生设计课》 目录 一、认清当下的情况&#xff0c;从四个维度观察自己的人生 二、平衡人生&#xff0c;但不要走入误区 2.1 记录你的“美好时光日志”&#xff1a; 2.1.1 记录内容&#xff1a; 2.1.2 辅助反思的方法&…