开始编译第一个typescript实例

作者:程序员学院
官方网址:https://www.chengxuyuan.com

1、什么是typescript

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

2、JavaScript 与 TypeScript 的区别

TypeScript是JavaScript的超集,扩展了JavaScript的语法,因此现有的JavaScript代码可与TypeScript一起工作无需任何修改,TypeScript通过类型注解提供编译时的静态类型检查。
TypeScript可处理已有的JavaScript代码,并只对其中的TypeScript代码进行编译。

3、安装typescript

我们需要使用到 npm 工具安装TypeScript。
如果你的本地环境已经安装了 npm 工具,可以使用以下命令来安装:

npm install -g typescript

因上述安装方法受到网络限制,所以我们可以采用淘宝镜像进行安装

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
npm -g install typescript

如果需要指定typescript版本,则使用@符号,例如:

npm -g install [typescript@3.1.3](mailto:typescript@3.1.3)

安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码,以下是查看版本号:

$ tsc -v
Version 4.0.2

4、安装 Visual Studio Code

很多 IDE 都有支持 TypeScript 插件,如:Visual Studio,Sublime Text 2,WebStorm / PHPStorm,Eclipse 等。
这里我们用Visual Studio Code来对TypeScript进行编写。
Visual Studio Code 是一个可以运行于 Mac OS X、Windows 和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器,由 Microsoft 公司开发。
下载地址:https://code.visualstudio.com/

Windows 上安装 Visual Studio Code

(1)下载 Visual Studio Code。
image.png
(2)双击 VSCodeSetup.exe 安装。
image.png

(3)安装完成后,打开 Visual Studio Code 界面类似如下:
image.png

5、构建你的第一个TypeScript文件

(1)首页创建TypeScript文件greeter.ts,将下列代码输入到该文件中(注:通常我们使用 .ts 作为 TypeScript 代码文件的扩展名):

function greeter(person: string) {
 return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);

image.png

(2)然后执行以下命令将 TypeScript 转换为 JavaScript 代码,我们可以在左侧窗口中点击当前编辑的代码文件,选择 open in command prompt(在终端中打开),这时候我们就可以在屏幕的右侧下半部分使用 tsc 命令来执行 TypeScript 文件代码了。

tsc greeter.ts

在这里插入图片描述
在这里插入图片描述

输出结果为一个greeter.js文件,我们打开greeter.js来看看编译的代码是什么吧:

function greeter(person) {
 return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

(3)如果运行时报错:

无法加载文件C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本

解决方法:
以管理员身份运行powerShell(一定要以管路员身份打开):
image.png

复制下面命令:

set-ExecutionPolicy RemoteSigned

输入A 或者 Y 即可解决该问题

好的,你学会了吗?

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值