TypeScript开发环境入门

举报
jackwangcumt 发表于 2021/11/25 07:09:09 2021/11/25
【摘要】 TypeScript可以看作是JavaScript的一个超集,本质上在JavaScript语言特征上添加了可选的静态类型和基于类的面向对象编程。TypeScript扩展了JavaScript的语法,它是为大型应用的开发而设计。TypeScript开发环境搭建需要如下两个核心步骤:npm安装和安装TypeScript的Visual Studio插件。

1 TypeScript概述


        根据百度百科定义,TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。它通过TypeScript编译器转译为JavaScript代码,可运行在任何浏览器,任何操作系统。TypeScript可以看作是JavaScript的一个超集,本质上在JavaScript语言特征上添加了可选的静态类型和基于类的面向对象编程。TypeScript扩展了JavaScript的语法,它是为大型应用的开发而设计。

        TypeScript开发环境搭建需要如下两个核心步骤:1)npm安装;2)安装TypeScript的Visual Studio插件或Visual Studio Code

2 NPM安装


        npm是JavaScript最常用的包管理工具,也是Node.js的默认包管理工具。通过npm可以安装、共享、分发代码和管理项目依赖关系。由于TypeScript需要通过npm安装,而npm依赖于Node.js,因此第一步就是先安装Node.js环境。Node.js发布于2009年5月,Node.js由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。我们可以在https://nodejs.org官网上下载最新的版本。如果需要下载之前的版本,可以在https://nodejs.org/en/download/releases/中进行下载。这里我们下载Node.js 10.13.0进行安装。如图所示。
1.jpg

    在命令行工具中输入node -v和npm -v查看是否安装成功,如果安装成功会显示版本号,如下图所示。

2.jpg
注意:npm 的包安装分为本地安装(local)和全局安装(global)两种,从命令来看,差别只是有没有-g而已。例如npm install express -g表示全局安装,如果不带-g表示本地安装。

在命令行工具界面输入命令npm install -g typescript全局安装typescript,稍等片刻,等待安装完成后,用命令tsc -v查看其版本号来验证是否安装成功,如下图所示。

3.jpg
npm默认镜像是国外的地址,速度可能会比较慢,或者无法下载包。建议将包仓库地址配置为国内镜像,如npm淘宝镜像。修改npm的镜像可以用如下语句完成。

//持久使用
npm config set registry https://registry.npm.taobao.org
//验证是否成功
npm config get registry

3 Visual Studio插件安装


        由于TypeScript语言是微软公司开发的,因此势必在其IDE Visual Studio上进行集成。 Visual Studio 2017和Visual Studio 2015 Update 3默认包含TypeScript。
Visual Studio是一个完整的集成开发工具,提供了一站式开发工具集合,它能够支持现在IT行业上主流的编程语言。它包括了整个软件生命周期中所需要的大部分工具,如UML建模工具、代码管理工具、代码编辑和调试,程序测试和程序发布等。Visual Studio所写的目标代码适用于微软支持的所有平台。
Visual Studio版本很多,其中Visual Studio Community为社区版,适用于学生、开源和个人。该版本有相对完备的免费IDE,可用于开发 Android、IOS、Windows 和 Web 的应用程序。

      如果在安装Visual Studio的时候未安装TypeScript工具,后续仍可以通过下载插件TypeScript SDK for Visual Studio 进行安装。在弹出的【扩展和更新】界面,通过在右边的文本框输入typescript进行联网搜索,找到对应版本的TypeScript SDK for Visual Studio,这里选择TypeScript 3.3.1 for Visual Studio 2017,单击【下载】进行插件下载,如图所示。

5.jpg

下载完成后,双击TypeScript_SDK.exe文件进行TypeScript环境安装,在弹出的安装界面上单击【Install】完成安装,如图所示。

6.jpg

TypeScript SDK安装完成后,并没有包含创建TypeScript项目的模板,因此还需要通过扩展和更新界面安装TypeScript HTML Application Template插件,单击【下载】进行联网下载并完成安装,如图所示。

7.jpg
至此通过Visual Studio安装TypeScript相关插件来搭建开发环境就完成了。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200