01. TypeScript 简介和教程介绍

前言

TypeScript 已经在我们公司全面使用了,现在招聘的环节也增加了一个要求,就是要求必须熟练使用 TypeScript。我以前也出过 TypeScript 的教程,不过那个太简单,不够深入。所以在这个空档期,准备自己重学一下 TypeScript,然后也也出一个比较完全的教程。

这里我个人建议你耐心点,跟我一起学习这版最新的TypeScript 从入门到精通的教程,这样能更好的对 TypeScript 有全面的了解。

TypeScript 简介

TypeScript 是由微软公司在 2012 年正式发布,现在也有 8 年的不断更新和维护了,TypeScript 的成长速度是非常快的,现在已经变成了前端必会的一门技能。TypeScript 其实就是 JavaScript 的超集,也就是说 TypeScript 是建立在 JavaScript 之上的,最后都会转变成 JavaScript。

特别是大型项目中,真的好用。比如说它的扩展语法、面向对象、静态类型。如果一个前端项目我可以做主,我会在强烈的要求所有人都使用 TypeScript 的语法进行编程。

使用 VSCode 进行编写代码

我的所有前端课程都是使用 VSCode 进行编写代码的,因为这是我在工作中用的最多的编辑器,也是目前我认为最好用的编辑器。

下载地址:visualstudio

如果你已经参加了工作,我相信你身边至少有 80%以上的前端,在使用这款编辑器。

使用 VSCode 讲解,还有一个主要的原因就是他们都是微软出的产品,所以有很好的兼容性和支持,VSCode 上有很多专门为 TypeScript 专门作的语法适配,所以在编写时就会轻松快乐起来。

TypeScript 开发环境搭建

如果你想使用 TypeScript 来编写代码,你需要先安装一下它的开发环境,这并不复杂。

1.安装 Node 的运行环境

你可以到Node.js官网去下载 Node 进行安装(下载node.js),建议你下载LTS版本,也就是长期支持版本。安装的过程我就不演示了,这个过程就和安装 QQ 一样,没有任何难度。

如果你已经安装了,可以打开命令行工具,然后使用node -v命令查看安装的版本,但是一般还有一个命令需要检测一下,就是npm -v,如果两个命令都可以输出版本号,说明你的 Node 安装已经没有任何问题了。

2.全局安装 typeScript

你要使用 TypeScript 先要在你的系统中全局安装一下TypeScript,这里你可以直接在 VSCode 中进行安装,安装命令可以使用 npm 也可以使用 yarn

npm install typescript -g
或
yarn global add typescript

这两个你使用那个都是可以的,根据喜好自行选择,我在视频中使用的npm进行安装。

3.建立项目目录和编译 TS 文件

D盘(当然你可以在你喜欢的任何一个地方安装),新建一个目录,我这里起的目录名字叫做TypeScriptDemo,然后把这个文件在 VSCode 中打开。 我在教程里用了命令行的形式建立,直接使用win+r打开运行,然后在运行的文本框里输入cmd,回车后,打开命令行工具,在命令行中输入下面的命令。

d:
mkdir TypeScriptDem

完成后,打开 D 盘,打开 VSCode,把新建立的文件夹拖入到 VSCode 当中,新建一个Demo1.ts文件,写入下面代码:

function mybj() {
  let web: string = "Hello World";
  console.log(web);
}

mybj();

这时候你使用node Demo1.ts是执行不成功的,因为 Node 不能直接运行TypeScript文件,需要用tsc Demo1.ts转换一下,转换完成后typeScript代码被编译成了javaScript代码,新生成一个demo1.js的文件,这时候你在命令行输入node Demo1.js,在终端里就可以顺利的输出Hello World的字符了。

4.ts-node 的安装和使用

但是这样操作的效率实在是太低了,你可以使用ts-node插件来解决这个问题,有了这个插件,我们就不用再编译了,而使用ts-node就可以直接看到编写结果。

使用npm命令来全局安装,直接在命令行输入下面的命令:

npm install -g ts-node

安装完成后,就可以在命令中直接输入如下命令,来查看结果了。

ts-node Demo1.ts

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 01. TypeScript 简介和教程介绍

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们