前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TypeScript快速入门

TypeScript快速入门

作者头像
xiangzhihong
发布2022-11-30 15:18:40
5530
发布2022-11-30 15:18:40
举报
文章被收录于专栏:向治洪

1,TypeScript简介

TypeScript是微软开源的一门面向对象的编程语言,是JavaScript的一个超集,因此对于已经存在的JavaScript程序,不需要任何改动就可以在TypeScript环境下运行。同时,TypeScript扩展了JavaScript的语法糖,添加了一些新的遵循ES6规范的语法,使得TypeScript具有了可选的静态类型和面向对象编程的特性。 作为一门全新的编程语言,TypeScript的诞生有它特殊的场景。Ajax的火热和JavaScript的复兴标志着前端一个全新时代的到来,这一时期的JavaScript代码正在变得越来越庞大,构建规模化JavaScript应用程序的需求日益旺盛。同时,微软工程师们发现,内部的研发部门以及外部的客户都表示JavaScript在大型Web应用中很容易出现失控,变得难以驾驭。 微软认为JavaScript只是一门脚本语言,设计理念简单,缺乏对类与模块的支持,并不能真正用于开发大型Web应用。基于此,微软内部开始出现需要自定义工具去强化JavaScript开发的需求。正是在这种情况下,微软的首席架构师安德斯·海尔斯伯格主持开发了TypeScript,并亲自进行推广。 自2012年10月份首个公开版本发布以来,迄今为止,TypeScript已发布了多个版本,并且越来越多的前端项目开始使用TypeScript来进行开发。和传统的JavaScript语言相比,TypeScript具有如下一些特点。

  • 免费开源,使用Apache授权协议。
  • 基于ECMAScript标准进行拓展,是JavaScript的一个超集。
  • 添加了可选静态类型、类和模块语法。
  • 可以编译为可读的、符合ECMAScript规范的JavaScript。
  • 成为一款跨平台的工具,支持所有的浏览器、主机和操作系统。
  • 保证可以与JavaScript代码一起运行,无须修改。
  • 文件拓展名是ts。
  • 编译时检查,不污染运行时。

如今,TypeScript已经成为微软发展的重点项目,其新版本的发布节奏也加快到平均一个半月一次。在这样高强度的更新下,可以期待的是TypeScript必将成为前端开发的标准语言。

2, 环境搭建

Node.js作为JavaScript的运行环境,大部分的JavaScript工具链都需要它才能运行,TypeScript也不例外。因此,安装TypeScript前需要先安装Node.js。 目前,TypeScript提供了两种安装方式:

  • 使用npm包管理器方式。
  • 安装Visual Studio的TypeScript插件方式。

需要说明的是,由于Visual Studio 2019已经包含了TypeScript插件,所以无需再手动进行安装。如果使用npm方式进行安装,只需要在终端执行如下的命令即可。

代码语言:javascript
复制
npm install –g typescript

不过,在实际项目开发过程中,并不需要对TypeScript进行全局安装。因为TypeScript自带的tsc命令并不能直接运行TypeScript代码。所以,通常安装的是TypeScript的运行时ts-node,如下所示:

代码语言:javascript
复制
npm install –g ts-node

ts-node并不等于TypeScript的Node.js,仅仅是封装了TypeScript编译的过程,提供直接运行TypeScript代码的能力。要编译TypeScript文件,可以使用如下的命令。

代码语言:javascript
复制
tsc filename.ts        // filename为TypeScript文件名

其中,filename表示TypeScript文件名,ts是TypeScript文件的后缀。编译成功之后,会在相同目录下生成一个同名的js文件。当然,tsc命令工具还可以同时编译多个ts文件,多个文件之间用逗号隔开,如下所示。

代码语言:javascript
复制
tsc file1.ts, file2.ts, file3.ts

除了在本地执行编译操作外,TypeScript还提供了在线编译环境,开发者可以使用TypeScript提供的在线运行环境来体验TypeScript语言的魅力。

开发工具选择

工欲善其事,必先利其器,选择一款合适的开发工具可以大大的提高开发效率。在TypeScript开发工具的选择上,我们推荐使用Visual Studio Code(简称VSCode),因为相比其他开发工具来说,它具有如下一些优势:

  • 免费开源,支持跨平台开发且跨平台体验非常一致。
  • 由微软主导开发,对TypeScript有良好的支持。
  • 提供代码智能补全功能的智能感知。
  • 提供丰富的开发插件,开发与调试异常方便。 VSCode的安装也非常简单,打开VSCode的官网,然后根据当前系统版本下载对应的安装包即可,如图1-1所示。
在这里插入图片描述
在这里插入图片描述

VSCode每次启动会自动检查是否为最新版本,并提示用户自动更新,所以无须担心当前是否为最新版本。 除了VSCode外,WebStrom也是一款不错的前端开发工具,开发时可以根据情况进行选择。

示例程序

首先,我们新建一个index.html文件,然后添加如下代码:

代码语言:javascript
复制
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Learning TypeScript</title>
</head> 
<body> 
    <script src="hello.js"></script>
</body> 
</html>

然后,再创建一个hello.ts文件,在文件中添加如下代码。

代码语言:javascript
复制
alert('hello world in TypeScript!');

使用tsc命令编译hello.ts文件,如下所示。

代码语言:javascript
复制
tsc hello.ts

等待编译完成,会在相同目录下生成一个hello.js文件,然后使用浏览器打开index.html文件,运行效果如图2-2所示。

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

除了编译文件命令外,tsc支持的常用命令还包括:

  • help:显示帮助信息。
  • version:查看TypeScript安装版本。
  • module:载入扩展模块。
  • target:设置ECMA版本。
  • declaration:额外生成一个扩展名为.d.ts的文件。
  • removeComments:删除文件的注释。
  • out:编译多个文件并合并到一个输出的文件。
  • sourcemap:生成一个sourcemap文件,此文件专门用于存储源代码与编译代码对应位置映射信息。
  • module noImplicitAny:在表达式和声明上有隐含的any类型时报错。
  • watch:在监视模式下运行编译器,当文件内容发生改变时会重新编译。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-09-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1,TypeScript简介
  • 2, 环境搭建
  • 开发工具选择
  • 示例程序
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档