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

news/2025/2/14 6:55:35/

文章目录

    • 安装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.ppmy.cn/news/1064454.html

相关文章

2000-2021年地级市产业升级、产业结构高级化面板数据

2000-2021年地级市产业升级、产业结构高级化面板数据 1、时间:2000-2021年 2、范围:地级市 3、指标:年份、地区、行政区划代码、地区、所属省份、地区生产总值、第一产业增加值、第二产业增加值、第三产业增加值、第一产业占GDP比重、第二…

NPM 管理组织包

目录 1、关于组织范围和包 1.1 管理无作用域的包 2、使用组织设置配置npm客户端 2.1 配置您的npm客户端以使用您组织的范围 为所有新包设置组织范围 为单个包设置组织范围 2.2 将默认包可见性更改为public 将单个包的包可见性设置为public 将所有包的包可见性设置为pu…

微信小程序分享后真机参数获取不到和部分参数不能获取问题问题解决

微信小程序的很多API,都是BUG,近期开发小程序就遇到了分享后开发工具可以获取参数,但是真机怎么都拿不到参数的问题 一、真机参数获取不到问题解决 解决方式: 在onLoad(options) 中。 onLoad方法中一定要有options 这个参数。…

《C和指针》笔记11: external和internal链接属性

当组成一个程序的各个源文件分别被编译之后,所有的目标文件以及那些从一个或多个函数库中引用的函数链接在一起,形成可执行程序。然而,如果相同的标识符出现在几个不同的源文件中时,它们是像Pascal那样表示同一个实体?…

图像线段检测几种方法

1、方法一 当我将OpenCV提升到4.1.0时,LineSegmentDetector(LSD)消失了。 OpenCV-contrib有一个名为FastLineDetector的东西,如果它被用作LSD的替代品似乎很好。如果你有点感动,你会得到与LSD几乎相同的结果。 2、方…

Flink CDC数据同步

背景 随着信息化程度的不断提高,企业内部系统的数量和复杂度不断增加,因此,数据库系统的同步问题已成为越来越重要的问题。 缓存失效 在缓存中缓存的条目(entry)在源头被更改或者被删除的时候立即让缓存中的条目失效。如果缓存在一个独立的…

CrossOver 23 新功能介绍 CrossOver 23 版本更新了哪些功能

本次发布的CrossOver 23为用户带来了许多令人期待的新功能和优化,特别是对游戏方面的支持,更是让广大Mac游戏玩家兴奋。CrossOver 23包括对Wine 8.0.1的更新,带来了5000多处改动,对各种应用程序进行了改进。该版本还包括 Wine Mon…

Vue2向Vue3过度核心技术指令补充

目录 1 指令修饰符1.1 什么是指令修饰符?1.2 按键修饰符1.3 v-model修饰符1.4 事件修饰符 2 v-bind对样式控制的增强-操作class2.1 语法:2.2 对象语法2.3 数组语法2.4 代码练习 3 京东秒杀-tab栏切换导航高亮3.1 需求:3.2 准备代码:3.3 思路&…