当前位置: 首页 > news >正文

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

文章目录

    • 安装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文件处理红色波浪线的几种方式,可从本文章开发进入。

相关文章:

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

文章目录 安装Typescript判断是否有运行权限编写第一Typescript文件手动编译Ts文件转Js文件实时编译 安装Typescript npm install -g typescript 判断是否有运行权限 命令行运行 tsc -v 遇到了权限问题 用管理员打开window自带的powershell 运行如下指令即可: Set-…...

Dockerfile快速搭建自己专属的LAMP环境,生成镜像lamp:v1.1,并推送到私有仓库

环境: CentOS 7 Linux 3.10.0-1160.el7.x86_64 具体要求如下: (1)基于centos:6基础镜像; (2)指定作者信息; (3)安装httpd、mysql、mysql-server、php、ph…...

Lottery抽奖项目学习第二章第一节:环境、配置、规范

Lottery抽奖项目学习第二章第一节:环境、配置、规范 环境、配置、规范 下面以DDD架构和设计模式落地实战的方式,进行讲解和实现分布式抽奖系统的代码开发,那么这里会涉及到很多DDD的设计思路和设计模式应用,以及互联网大厂开发中…...

OpenCV之reshape函数

函数原型: /** brief Changes the shape and/or the number of channels of a 2D matrix without copying the data.The method makes a new matrix header for \*this elements. The new matrix may have a different sizeand/or different number of channels. A…...

【JavaEE】Spring事务-@Transactional参数介绍-事务的隔离级别以及传播机制

【JavaEE】Spring事务(2) 文章目录 【JavaEE】Spring事务(2)1. Transactional 参数介绍1.1 value 和 transactionManager1.2 timeout1.3 readOnly1.4 后面四个1.5 isolation 与 propagation 2. Spring 事务隔离级别 - isolation2.…...

微信小程序canvas type=2d生成海报保存到相册、文字换行溢出显示...、文字删除线、分享面板

一、简介 做个简单的生成二维码海报分享,我做的时候也找简单的方法看能不能实现页面直接截图那种生成图片,原生小程序不支持,不多介绍下面有全部代码有注释、参数自行替换运行看看,还有需要优化的地方,有问题可以咨询…...

C++卷积神经网络

C卷积神经网络 #include"TP_NNW.h" #include<iostream> #pragma warning(disable:4996) using namespace std; using namespace mnist;float* SGD(Weight* W1, Weight& W5, Weight& Wo, float** X) {Vector2 ve(28, 28);float* temp new float[10];V…...

go 读取yaml映射到struct

安装 go get gopkg.in/yaml.v3创建yaml Mysql:Host: 192.168.214.134Port: 3306UserName: wwPassword: wwDatabase: go_dbCharset: utf8mb4ParseTime: trueLoc: LocalListValue:- haha- test- vv JWTSecret: nidaye定义结构体 type Mysql struct {Host string yaml:&…...

Redis 10 大数据类型

1. which 10 1. redis字符串 2. redis 列表 3. redis哈希表 4. redis集合 5. redis有序集合 6. redis地理空间 7. redis基数统计 8. redis位图 9. redis位域 10. redis流 2. 获取redis常见操作指令 官网英文&#xff1a;https://redis.io/commands 官网中文&#xff1a;https:/…...

优化生产流程:数字化工厂中的OPC UA分布式IO模块应用

背景 近年来&#xff0c;为了提升在全球范围内的竞争力&#xff0c;制造企业希望自己工厂的机器之间协同性更强&#xff0c;自动化设备采集到的数据能够发挥更大的价值&#xff0c;越来越多的传统型工业制造企业开始加入数字化工厂建设的行列&#xff0c;实现智能制造。 数字化…...

Elasticsearch(十四)搜索---搜索匹配功能⑤--全文搜索

一、前言 不同于之前的term。terms等结构化查询&#xff0c;全文搜索首先对查询词进行分析&#xff0c;然后根据查询词的分词结果构建查询。这里所说的全文指的是文本类型数据&#xff08;text类型&#xff09;,默认的数据形式是人类的自然语言&#xff0c;如对话内容、图书名…...

已解决Gradle错误:“Unable to load class ‘org.gradle.api.plugins.MavenPlugin‘”

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

windows中安装sqlite

1. 下载文件 官网下载地址&#xff1a;https://www.sqlite.org/download.html 下载sqlite-dll-win64-x64-3430000.zip和sqlite-tools-win32-x86-3430000.zip文件&#xff08;32位系统下载sqlite-dll-win32-x86-3430000.zip&#xff09;。 2. 安装过程 解压文件 解压上一步…...

前端面试:【系统设计与架构】前端架构模式的演进

前端架构模式在现代Web开发中扮演着关键角色&#xff0c;它们帮助我们组织和管理前端应用的复杂性。本文将介绍一些常见的前端架构模式&#xff0c;包括MVC、MVVM、Flux和Redux&#xff0c;以及它们的演进和应用。 1. MVC&#xff08;Model-View-Controller&#xff09;&#x…...

【CSS】em单位的理解

1、em单位的定义 MDN的解释&#xff1a;它是相对于父元素的字体大小的一个单位。 例如&#xff1a;父元素font-size&#xff1a;16px&#xff1b;子元素的font-size&#xff1a;2em&#xff08;也就是32px&#xff09; 注&#xff1a;有一个误区&#xff0c;虽然他是一个相对…...

无涯教程-Python机器学习 - Based on human supervision函数

Python机器学习 中的 Based on human s - 无涯教程网无涯教程网提供https://www.learnfk.com/python-machine-learning/machine-learning-with-python-based-on-human-supervision.html...

【滑动窗口】leetcode209:长度最小的子数组

一.题目描述 长度最小的子数组 二.思路分析 题目要求&#xff1a;找出长度最小的符合要求的连续子数组&#xff0c;这个要求就是子数组的元素之和大于等于target。 如何确定一个连续的子数组&#xff1f;确定它的左右边界即可。如此一来&#xff0c;我们最先想到的就是暴力枚…...

C++ STL unordered_map

map hashmap 文章目录 Map、HashMap概念map、hashmap 的区别引用头文件初始化赋值unordered_map 自定义键值类型unordered_map 的 value 自定义数据类型遍历常用方法插入查找 key修改 value删除元素清空元素 unordered_map 中每一个元素都是一个 key-value 对&#xff0c;数据…...

全流程R语言Meta分析核心技术应用

Meta分析是针对某一科研问题&#xff0c;根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法&#xff0c;对来源不同的研究成果进行收集、合并及定量统计分析的方法&#xff0c;最早出现于“循证医学”&#xff0c;现已广泛应用于农林生态&#xff0c;资源环境等方面。…...

Go并发可视化解释 - Select语句

昨天&#xff0c;我发布了一篇文章&#xff0c;用可视化的方式解释了Golang中通道&#xff08;Channel&#xff09;的工作原理。如果你对通道的理解仍然存在困难&#xff0c;最好呢请在阅读本文之前先查看那篇文章。作为一个快速的复习&#xff1a;Partier、Candier 和 Stringe…...

新手入门:基于快马平台复现pencil设计工具基础功能学前端

最近在学前端开发&#xff0c;想找个能动手实践的项目练练手。朋友推荐了pencil官网的设计工具&#xff0c;但直接看源码有点复杂。后来发现用InsCode(快马)平台可以快速复现基础功能&#xff0c;特别适合新手理解画布操作和事件处理。下面分享我的学习过程&#xff1a; 画布搭…...

Dankoe新作《使命与收益》读书笔记 7|你不是迷茫,你只是不敢面对真正的自己

"我不知道自己想要什么。" 这大概是30岁前后最常说的一句话。辞职不敢&#xff0c;创业不会&#xff0c;留下来又不甘心。于是我们把迷茫当成一种身份&#xff0c;穿在身上&#xff0c;仿佛承认迷茫就不必为停滞负责。 但Dan Koe在《使命与收益》里说了一句扎心的话…...

暗黑破坏神3自动化工具:智能技能管理与效率提升解决方案

暗黑破坏神3自动化工具&#xff1a;智能技能管理与效率提升解决方案 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面&#xff0c;可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 在暗黑破坏神3的冒险旅程中&…...

Ubuntu 20.04 下 Zotero 文献管理神器:从安装到插件配置的完整避坑指南

Ubuntu 20.04 下 Zotero 文献管理神器&#xff1a;从安装到插件配置的完整避坑指南 第一次在Linux环境下配置文献管理工具时&#xff0c;我盯着终端里密密麻麻的命令行输出&#xff0c;突然意识到学术研究的数字化工具链竟如此脆弱。直到遇见Zotero&#xff0c;这款跨平台的开源…...

基于摄像头和网络的火灾监测系统开源项目推荐

推荐的开源项目 基于YOLOv10的火焰烟雾检测系统&#xff08;最推荐&#xff09; 特点&#xff1a;支持图像、视频和摄像头实时检测&#xff0c;提供完整的GUI界面&#xff08;PySide6开发&#xff09;优势&#xff1a;界面简洁易用&#xff0c;代码结构清晰&#xff0c;适合初学…...

别再手动刷新了!SAP ALV中利用change事件与modify_cell实现智能数据同步

SAP ALV开发进阶&#xff1a;巧用change事件与modify_cell构建智能数据联动体系 在SAP前端开发领域&#xff0c;ALV&#xff08;ABAP List Viewer&#xff09;作为最常用的数据展示控件&#xff0c;其交互体验直接影响用户操作效率。传统开发模式中&#xff0c;当用户修改某个单…...

人肉区块链:用群体记忆对抗AI篡改

当测试数据面临AI篡改危机在生成式AI全面渗透软件开发生命周期的今天&#xff0c;软件测试从业者正面临前所未有的挑战。AI工具在提升测试用例生成、缺陷预测和日志分析效率的同时&#xff0c;也带来了隐蔽而致命的风险&#xff1a;AI驱动的数据篡改。自动化测试结果被注入虚假…...

Pixel Couplet Gen 生成效果对比分析:不同参数下的对联质量评估

Pixel Couplet Gen 生成效果对比分析&#xff1a;不同参数下的对联质量评估 1. 引言&#xff1a;当AI遇上传统对联 春节贴对联是中国延续千年的文化传统&#xff0c;但创作一副既工整又有新意的对联并非易事。Pixel Couplet Gen作为一款AI对联生成工具&#xff0c;通过调整Te…...

Shiny框架终极指南:输入控件与输出渲染的完美交互原理

Shiny框架终极指南&#xff1a;输入控件与输出渲染的完美交互原理 【免费下载链接】shiny Easy interactive web applications with R 项目地址: https://gitcode.com/gh_mirrors/sh/shiny Shiny是R语言生态中一款强大的交互式Web应用框架&#xff0c;它让数据科学家和分…...

HarmonyOS6 半年磨一剑 - RcCheckboxGroup 组件与全选不确定态机制深度解析

文章目录前言一、RcCheckboxGroup 内部状态同步1.1 双层状态管理1.2 选中状态判断二、布局渲染架构2.1 横向与纵向的渲染分支2.2 itemGap 的类型安全处理2.3 属性透传机制三、全选与不确定态&#xff08;indeterminate&#xff09;3.1 三态状态机3.2 全选逻辑实现3.3 indetermi…...