TypeScript笔记(1)——环境配置与第一个ts程序
TypeScript(1):开发环境配置与第一个ts程序
李俊才
CSDN:jcLee95
作者博客地址:https://blog.csdn.net/qq_28550263?spm=1000.2115.3001.5343
邮箱:291148484@163.com
【导读】:本文介绍了配置TypeScript开发环境的全过程,以及如何将将TypeScript编译成原生JavaScript并在浏览器中运行。
【本专题下一篇】:TypeScript(2): 如何使用VSCode自动编译TypeScript代码
1. 配置开发环境
【提示】如果你使用的是Windows’系统,确保你的系统是Windows10。旧版系统有诸多功能不能正常使用。
在Windows系统中,有一款第三方的包管理器,能够像Linux系统中的apt
、yum
等工具那样轻松地进行包管理称之为Chocolatey
。其具体用法可以参考我的另外一篇博文。《Windows中使用包管理器 - Chocolatey》
Windows安装node.js(使用了Chocolatey):
choco install nodejs.install
Ubuntu安装node.js
sudo apt install nodejs
sudo apt install npm
Windows安装VSCode
choco install vscode
其他系统安装VSCode,可以进入VSCode官网下载对应地安装包:https://code.visualstudio.com/#alt-downloads到本地后自行安装。
使用node.js全局安装Typescript
:
npm install -g typescript
安装后,可以通过以下命令检测安装地版本号:
tsc -V
2. 第一个TypeScript程序
新建一个目录tscode
用于保存我们之后地代码,进入该目录。右键菜单,点击"通过Code打开"。
以后,我们地每一个项目都可以存放在该目录中,并可以在VSCode中进行轻松地管理:
展开该文件夹,在里面建立一个子文件夹"01_hellots"
在文件夹"01_hellots"中分别添加"hello.ts"和"hello.html"
在文件"hello.ts"中添加以下内容:
(function () {// str这个参数时string类型的function hello(str) {return "Hello " + str;}console.log(hello("World"));
})();
这段代码其实用的还是JavaScript地基础语法,只不过是写在
(function () {})();
这样一个框架之内的。TypeScript作为JavaScript的超集是完全支持JavaScript的全部语法的。如果仅有JavaScript语法的而不包含任何TypeScript拓展部分,直接引入html时,在谷歌浏览器等部分浏览器中也是可以使用的。然而如果包含TypeScript语法,比如改成:
(function () {function hello(str:string) {return "Hello " + str;}let surfix = "World"console.log(hello(surfix ));
})();
这时就必须将ts代码编译成原生js代码引入html页面中。现在我们来示范这一过程。
编译TypeScript为JavaScript:
你可以选择"Terminal" -> “New Termional” 打开一个终端。由于我者安装了独立的PowerShell 7.1.3 插件,因此我直接点击左侧工具栏中的图标打开了一个终端,效果是一样的。
打开终端后确认你在终端中的目录位置,
如果不再项目"01_hellots"目录,则先进入该目录:
cd .\01_hellots\
现在,我们通过tsc 需要编译的ts文件完整路径
的命令格式,将hellots.ts
编译成原生的Javascript文件。
tsc .\hellots.ts
命令执行完成后,可以看到左侧的目录中生成了一个JavaScript文件,它就是由TypeScript编译过来的结果。
打开该文件。可以看到命令为我们编译过后的JavaScript代码如下:
(function () {function hello(str) {return "Hello " + str;}var surfix = "World";console.log(hello(surfix));
})();
接着我们在"hellots.html"中添加以下代码,引入该编译的JavaScript文件:
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewpoint" content="width=device-sidth, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head><body><script src="./hellots.js"></script></body>
</html>
在谷歌浏览器中打开"hellots.html",并点击键盘"F12"打开浏览器console(如果是笔记本电脑则用"fn + F12")。可以看到我们代码的运行结果如下:
TypeScript笔记(1)——环境配置与第一个ts程序相关推荐
- React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
- openCV2学习笔记---1.环境配置
openCV2学习笔记-1.环境配置 openCV 是开源的计算机视觉代码库,可以运行在Linux.Windows和Mac OS操作系统上.它轻量级而且高效--由一系列 C 函数和少量 C++ 类构成 ...
- PyQt5 笔记1 -- 环境配置
PyQt5 笔记1 – 环境配置 1.安装 pyqt5 pip3 install pyqt5 2.安装 pyqt5-tools pip3 install pyqt5-tools 3.Pycharm 配 ...
- express学习 - (1)环境配置与第一个express项目
express学习 (1) 环境配置与第一个express项目 CSDN主页:jcLee95 邮箱:291148484@163.com [任务]: 安装express: 创建第一个express项目: ...
- Chisel教程——02.Chisel环境配置和第一个Chisel模块的实现与测试
Chisel环境配置和第一个Chisel模块的实现与测试 动机 现在已经对Scala有一定的了解了,可以开始构造一些硬件了.Chisel的全称为Constructing Hardware In a S ...
- 在 windows 环境下,编写一个批处理程序(算命大师.bat)
在 windows 环境下,编写一个批处理程序(算命大师.bat) 标题 在 windows 环境下,编写一个批处理程序(算命大师.bat) **题目:**在 windows 环境下,编写一个批处理程 ...
- 操原上机(一)在 Windows 环境下,编写一个批处理程序(算命大师.bat)
要求 在 Windows 环境下,编写一个批处理程序(算命大师.bat),程序运行后,输入:出生年月日(例如 2000-07-31).系统输出相应的属相和星座,例如:你属兔, 狮子座.要求:输入进行合 ...
- 斯坦福大学CS106A公开课笔记--启示环境配置
首先感谢斯坦福大学所提供这么一个良好的平台,感谢主讲: Mehran Sahami.感谢奋战在翻译第一线的人人影视的高手们. 本文在线视频资料来源于:网易公开课 离线视频资料来源于:人人影视 1.ec ...
- Linux学习笔记之环境配置和常用管理命令
一.环境配置 修改ip地址(略过) 1.网络通信命令 <1> ping 测试网络的连通性 ping 选项 IP地址 -c 指定发送次数 <2> ifconfig 查看和设置网卡 ...
最新文章
- 微信小程序 python接口_微信小程序-封装请求基准路径、接口API 和使用
- Promise 的基础用法
- WCF光芒下的Web Service
- dxf转nc代码软件_Window绝赞的6款软件,效率加班党必备,快到惊人!
- 背景半透明(HTML、CSS)
- 寻路算法:找到NPC最好的行走路径
- 计算机辅助英语教学电子版,计算机辅助英语教学探究.pdf
- 数据结构之八大排序算法(C语言实现)
- Left-pad 分数 20作者 陈越单位 浙江大学
- 秘密打印机涉密计算机之间,涉密打印机与涉密计算机之间应该怎么连接
- 行存储 VS 列存储
- Unity3D在windows10下小问题解决
- zz什么是beacons - 在Web Analytics中的应用(网站分析的灯塔)
- UNIX发展史(BSD,GNU,linux)
- laravel的使用-模型和数据库基本操作
- LED智能照明与健康-光莆电子-张潇
- 【转】超星转PDF最佳方法(对打印机重新审视)
- 使用docker安装nextcloud
- 北科大计算机实践报告,计算机应用实践报告_北科大.doc
- ios备忘录下载安卓版_苹果备忘录怎么下载安卓版?有仿iOS备忘录的便签吗