官网: https://github.com/microsoft/TypeScriptTypeScript是一种由微软开发的开源、跨平台的编程语言 。它是JavaScript的超集 , 最终会被编译为JavaScript代码 。TypeScript是一种应用级JavaScript语言 。TypeScript为JavaScript添加了可选类型 , 支持针对任何浏览器、任何主机、任何操作系统的大规模JavaScript应用的工具 。TypeScript编译成可读的、基于标准的JavaScript特点:
- 始于JavaScript,归于JavaScript
- 强大的类型系统
- 先进的 JavaScript
npm install -g typescriptnpm install -g typescript@next【安装 TypeScript 并编译成JS】
ps: 可能会失败 最好还是不要加@next
检查安装是否成功tsc -V安装成功
构建第一个文件我们写一个JS程序
(() => { function sayHi(str) { return "hello" + str } let text = "world" console.log(sayHi(text))})()然后运行
(() => { function sayHi(str: string) { return "hello" + str } let text = "world" console.log(sayHi(text))})()然后运行会发现这样会报错
编译代码所以我们需要把ts代码转换成JS 不然就运行不成功,当然 ts文件里都是js代码的话是可以运行的所以我们可以使用命令把它编译成JS
tsc .\helloworld.ts
这样再同级目录下就会生成一个js代码以下是JS代码(function () { function sayHi(str) { return "hello" + str; } var text = "world"; console.log(sayHi(text));})();可以发现 类型注解自动的去掉了 并且 let 改成了var
vscode自动编译我们可以在vscode中让他自动编译成js直接使用命令
tsc --init这样会生成一个tsconfig.json的文件
![安装 TypeScript 并编译成JS](http://pic.ikafan.com/imgp/L3Byb3h5L2h0dHBzL2Nkbi5ubGFyay5jb20veXVxdWUvMC8yMDIyL3BuZy8xMjg0MzI4Ni8xNjY4MTM1NzQ3NDExLTdkMzlhZjJmLWMwNmMtNGVjMC04NTdjLWQxYWY2NmJmYmI4NS5wbmcjYXZlcmFnZUh1ZT0lMjMyMjJkMzYmYW1wO2NsaWVudElkPXUwODM3MGRiZS05MDBlLTQmYW1wO2Nyb3A9MCZhbXA7Y3JvcD0wJmFtcDtjcm9wPTEmYW1wO2Nyb3A9MSZhbXA7ZnJvbT1wYXN0ZSZhbXA7aGVpZ2h0PTExNCZhbXA7aWQ9dTcyYjE4ZWU3JmFtcDttYXJnaW49JTVCb2JqZWN0JTIwT2JqZWN0JTVEJmFtcDtuYW1lPWltYWdlLnBuZyZhbXA7b3JpZ2luSGVpZ2h0PTExNCZhbXA7b3JpZ2luV2lkdGg9NTA3JmFtcDtvcmlnaW5hbFR5cGU9YmluYXJ5JmFtcDtyYXRpbz0xJmFtcDtyb3RhdGlvbj0wJmFtcDtzaG93VGl0bGU9ZmFsc2UmYW1wO3NpemU9ODc4NiZhbXA7c3RhdHVzPWRvbmUmYW1wO3N0eWxlPW5vbmUmYW1wO3Rhc2tJZD11Y2VjZWM4YmQtNzBiMS00NjczLWI1YTktZWQ3YmQ1ZWI2MWEmYW1wO3RpdGxlPSZhbXA7d2lkdGg9NTA3.jpg)
文章插图
修改tsconfig.json配置在文件中增加如下内容
{ // 把ts文件最终编译后放到js的目录中 指定存放的路径 "outDir": "./js", // 不使用严格模式 "strict": false, ...}启动监视我们还需要配置一下监视任务
![安装 TypeScript 并编译成JS](http://pic.ikafan.com/imgp/L3Byb3h5L2h0dHBzL2Nkbi5ubGFyay5jb20veXVxdWUvMC8yMDIyL3BuZy8xMjg0MzI4Ni8xNjY4MTM1OTgzMDQ4LWExNGMxMDUxLTIxYjgtNDY4MS04NjkwLWExNmZhZmIzYzZmZC5wbmcjYXZlcmFnZUh1ZT0lMjMyYjJkMzAmYW1wO2NsaWVudElkPXUwODM3MGRiZS05MDBlLTQmYW1wO2Nyb3A9MCZhbXA7Y3JvcD0wJmFtcDtjcm9wPTEmYW1wO2Nyb3A9MSZhbXA7ZnJvbT1wYXN0ZSZhbXA7aGVpZ2h0PTM2NSZhbXA7aWQ9dWJiODdkMDU3JmFtcDttYXJnaW49JTVCb2JqZWN0JTIwT2JqZWN0JTVEJmFtcDtuYW1lPWltYWdlLnBuZyZhbXA7b3JpZ2luSGVpZ2h0PTM2NSZhbXA7b3JpZ2luV2lkdGg9NjQxJmFtcDtvcmlnaW5hbFR5cGU9YmluYXJ5JmFtcDtyYXRpbz0xJmFtcDtyb3RhdGlvbj0wJmFtcDtzaG93VGl0bGU9ZmFsc2UmYW1wO3NpemU9NDc2NjUmYW1wO3N0YXR1cz1kb25lJmFtcDtzdHlsZT1ub25lJmFtcDt0YXNrSWQ9dTdmMTg1N2UyLWY1ZmItNDgzMi05YmQxLTAzYzgwMWI0NzkyJmFtcDt0aXRsZT0mYW1wO3dpZHRoPTY0MQ==.jpg)
文章插图
![安装 TypeScript 并编译成JS](http://pic.ikafan.com/imgp/L3Byb3h5L2h0dHBzL2Nkbi5ubGFyay5jb20veXVxdWUvMC8yMDIyL3BuZy8xMjg0MzI4Ni8xNjY4MTM2MDMwMzQ4LWY4ZjlhZDk4LWI3MzgtNDkyNS04YjRkLTkzZmNlNzEzNTJlZC5wbmcjYXZlcmFnZUh1ZT0lMjMyMjJiMzImYW1wO2NsaWVudElkPXUwODM3MGRiZS05MDBlLTQmYW1wO2Nyb3A9MCZhbXA7Y3JvcD0wJmFtcDtjcm9wPTEmYW1wO2Nyb3A9MSZhbXA7ZnJvbT1wYXN0ZSZhbXA7aGVpZ2h0PTE5MiZhbXA7aWQ9dTAzYTNiYjg5JmFtcDttYXJnaW49JTVCb2JqZWN0JTIwT2JqZWN0JTVEJmFtcDtuYW1lPWltYWdlLnBuZyZhbXA7b3JpZ2luSGVpZ2h0PTE5MiZhbXA7b3JpZ2luV2lkdGg9NjAwJmFtcDtvcmlnaW5hbFR5cGU9YmluYXJ5JmFtcDtyYXRpbz0xJmFtcDtyb3RhdGlvbj0wJmFtcDtzaG93VGl0bGU9ZmFsc2UmYW1wO3NpemU9MTE1ODcmYW1wO3N0YXR1cz1kb25lJmFtcDtzdHlsZT1ub25lJmFtcDt0YXNrSWQ9dWM0MDAwNTEzLWI3NzItNDg1OC05NDBlLTAzNzUyOTJhYmI3JmFtcDt0aXRsZT0mYW1wO3dpZHRoPTYwMA==.jpg)
推荐阅读
- 基础篇 TypeScriptday01
- rabbitmq docker安装消息队列及数据库(mongo、mysql)
- ubantu18.04@Intel 82545EM 【安装文档】TRex流量分析仪保姆级安装指南--基于VMware虚拟机
- Sqlite 安装操作使用
- docker+nginx 安装部署修改资源目录配置文件和容器端口信息
- 九 SpringCloud - Nginx
- 试试将.NET7编译为WASM并在Docker上运行
- 和平精英下载完成怎么玩(和平精英国际体验服下载安装)
- 10 ClickHouseClickHouse合并树MergeTree家族表引擎之ReplacingMergeTree详细解析
- 第2-1-5章 docker安装MinIO实现文件存储服务-springboot整合minio-minio全网最全的资料