TypeScript简介和环境搭建

news/2024/5/20 5:08:15 标签: node, 前端, ts, js

TypeScript 简介

TypeScript 是由微软公司在 2012 年正式发布,现在也有 8 年的不断更新和维护了,TypeScript 的成长速度是非常快的,现在已经变成了前端必会的一门技能。TypeScript 其实就是 JavaScript 的超集,也就是说 TypeScript 是建立在 JavaScript 之上的,最后都会转变成 JavaScript。这就好比漫威里的钢铁侠,没穿装甲之前,他实力一般,虽然聪明有钱,但还是接近人类。但是有了装甲,他就厉害太多了,甚至可以和神干一架。

也许你会觉的我这说的太夸张,我刚开始学习时,也是这样想的,但是用了 2 年左右,特别是大型项目中,真的好用。比如说它的扩展语法、面向对象、静态类型。如果一个前端项目我可以做主,我会在强烈的要求所有人都使用 TypeScript 的语法进行编程。

使用VSCode进行编写代码

下载地址:https://code.visualstudio.com/

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

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

TypeScript开发环境搭建

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

1.安装Node的运行环境

你可以到Node.js官网去下载 Node 进行安装(https://node.js.org),建议你下载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文件

在你电脑的某个地方新建一个文件夹,存放typeScript的练习代码,然后拖进VSCode中,新建一个 Demo1.ts文件,写入下面代码:

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

test();

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

tsnode__52">4.ts-node 的安装和使用

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

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

npm install -g ts-node

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

ts-node Demo1.ts

好了,今天就学这么多吧,恭喜你有学会了新的编程技能,小伙伴们,加油!!!

原文链接:http://www.jspang.com/detailed?id=63


有微信小程序课设、毕设需求联系个人QQ:505417246

关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢

关注公众号后,回复前端面试题,领取大量前端面试题汇总pdf资料
在这里插入图片描述


http://www.niftyadmin.cn/n/1576454.html

相关文章

MySQL学习笔记-自定义函数

MySQL学习笔记-自定义函数1.自定义函数简介自定义函数:用户自定义函数(user-defined function,UDF)是一种对MySQL扩展的途径,其用法与内置函数相同自定义函数的两个必要条件:(1)参数 &#xff…

TypeScript的静态类型

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。 TypeScript 的一个最主要特点就是可以定义静态类型,英文是 Static Typing。那到底是什么意思那?太复杂的概念性东西…

MySQL 基础命令

作为前端虽然数据库接触的不多,但当使用时总记不住命令确实有点尴尬,遂做此笔记,以方便查阅。 登录登出 mysql -h localhost -u root -p //登录 QUIT // 登出 基本操作 ps: 又一次储存emoji表情时,出现了一次报错,因…

TypeScript基础静态类型和对象类型

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。 在 TypeScript 静态类型分为两种,一种是基础静态类型,一种是对象类型,这两种都经常使用,非常…

2021届秋招腾讯前端一面面经

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。 基本信息 部门:QQ音乐 方式:电话面试 题目总结 JavaScript篇 自我介绍学习前端多久JavaScript常见的数据类型有…

Netbeans使用技巧

Html代码中的图片、JS、CSS等的引用,不再需要手动输入,非常好用! 直接将你要引用的文件用鼠标拖拽到当中。即使图片、JS、CSS与自己的Html不在同一目录下,Netbeans也会自动为你添加引用。 自定义代码模板,使用TAB键&a…

TypeScript中的类型注解和类型推断

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。 这期我们学习一下 TypeScript 中的两个基本概念:类型注解和类型推断,这两个概念在我们编写 TypeScript 代码时会一直…

中考经验

快六月了。 也就是说快要中考和高考了。 明天sugar的小学妹就要回母校准备中考了,作为一个称职的好学姐,sugar打算给学妹传授点中考经验。 去年的这个时候sugar也是在苦逼奋斗中考的,呜呜呜~~~~ 我认为中考这个东西完全是靠心态,据…