每周三集前端免费视频
每年帮助超100万前端爱好者学习

TypeScript免费视频教程 ,Deno前置知识 (开始更新)

第01节:初识TypeScript

Deno都要来了,还不学TypeScript?

近日Node.js之父瑞安达尔(Ryan Dahl)发布新的开源项目 deno,从官方介绍来看,可以认为它是下一代 Node,使用 Go 语言代替 C++ 重新编写跨平台底层内核驱动,上层仍然使用 V8 引擎,最终提供一个安全的 TypeScript 运行时。

甚至Dahl在公开场合标识Node.js已经无力回天,Deno将是他的代替品。我相信前端小伙伴们一定都听说了这个消息。

Deno开始使用后用TypeScript变成了一个必会的技能,但是很多小伙伴们还不太熟悉TypeScript的用法。其实TypeScript现在用的已经很广泛了,无论你使用ng、React还是Vue都可以使用TypeScript来实现的你JavaScript代码。

小伙伴们快准备好你们的电脑,跟着技术胖一起学习吧。再不学习就被这个时代抛弃了,正如那句流行的话:

时代抛弃你时,连一声再见都不会说。

TypeScript是什么?

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,TypeScript 在 JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程。

其实TypeScript就是相当于JavaScript的增强版,但是最后运行时还要编译成JavaScript。TypeScript最大的目的是让程序员更具创造性,提高生产力,它将极大增强JavaScript编写应用的开发和调试环节,让JavaScript能够方便用于编写大型应用和进行多人协作。

TypeScript和JavaScript的对比

TypeScript 与JavaScript两者的特性对比,主要表现为以下几点:

  • TypeScript是一个应用程序级的JavaScript开发语言。(这也表示TypeScript比较牛逼,可以开发大型应用,或者说更适合开发大型应用)
  • TypeScript是JavaScript的超集,可以编译成纯JavaScript。这个和我们CSS离的Less或者Sass是很像的,我们用更好的代码编写方式来进行编写,最后还是有好生成原生的JavaScript语言。
  • TypeScript跨浏览器、跨操作系统、跨主机、且开源。由于最后他编译成了JavaScript所以只要能运行JS的地方,都可以运行我们写的程序,设置在node.js里。
  • TypeScript始于JavaScript,终于JavaScript。遵循JavaScript的语法和语义,所以对于我们前端从业者来说,学习前来得心应手,并没有太大的难度。
  • TypeScript可以重用JavaScript代码,调用流行的JavaScript库。
  • TypeScript提供了类、模块和接口,更易于构建组件和维护。

第02节:VSCode开发环境的安装和HelloWorld

已经对TypeScript有了大概的了解,我的博客全是注重实际,所以不讲那么多理论了,直接开始上手。这节我们开始搭建TypeScript的开发环境。

1.安装Node.js

安装Node.js非常简单,只要到Node官网下载一个最新版本就可以了:https://nodejs.org/zh-cn/.在windows上的安装方法和安装QQ一样。我这里就不重复描述了。
安装好后,可以打开命令行工具,同时按下win+R,然后输入cmd就可以打开,打开后输入

如果看到版本号说明已经安装成功了,看不到版本号就说明你的node.js没有安装成功。

2.安装TypeScript包。

在刚才的命令行窗口继续输入如下命令:

需要注意的是:如果你是mac电脑,要使用sudo npm install typescript -g指令进行安装

3.编写HelloWorld程序

1.初始化项目:进入你的编程文件夹后,可以使用npm init -y来初始化项目,生成package.json文件。

2.创建tsconfig.json文件,在终端中输入tsc --init:它是一个TypeScript项目的配置文件,可以通过读取它来设置TypeScript编译器的编译参数。

3.安装@types/node,使用 npm install @types/node --dev-save进行安装。这个主要是解决模块的声明文件问题。

4.编写HelloWorld.ts文件,然后进行保存,代码如下。

5.在Vscode的任务菜单下,打开运行生成任务,然后选择tsc:构建-tsconfig.json,这时候就会生成一个helloWorld.js文件

6.在终端中输入node helloWorld.js就可以看到结果了。

总结:这节课虽然简单,但是小伙伴们一定要动手操作,如果不操作,或者开发环境配置不好,下面的课程就不好学习了。


每周更新2-3集

未经允许不得转载:技术胖-胜洪宇关注web前端技术 » TypeScript免费视频教程 ,Deno前置知识
分享到: 更多 (0)

评论 39

  1. #26

    期待更新ing

    匿名4天前回复
  2. #25

    胖哥,在等更新ing

    匿名1周前 (07-12)回复
  3. #24

    既然都要编译后才能运行,那么TypeScript与es6以及es7/8有什么区别吗?感觉都是在完善原生js。

    匿名1周前 (07-12)回复
    • Type是JavaScript的超级,也就是在不改变JavaScript的情况下对JavaScript的一个扩展。es7和es8是JavaScript的一个标准定义。

      匿名5天前回复
  4. #23

    胖哥,真棒!

    匿名1周前 (07-11)回复
  5. #22

    英语有待提高啊

    匿名2周前 (07-06)回复
    • 英语是我的硬伤,英语只认识,不会读。属于哑巴英语。以后会努力加强。

      技术胖2周前 (07-08)回复
  6. #21

    在命令行输入tsc -p tsconfig.json跟在Vscode的任务菜单下,打开运行生成任务,然后选择tsc:构建-tsconfig.json,这时候就会生成一个helloWorld.js文件是一样的操作

    匿名3周前 (07-02)回复
  7. #20

    node变数太大,学go是不是会性价比更高呢?@jspang

    匿名3周前 (07-01)回复
    • Go是不错,建议有精力可以学习一下。

      技术胖3周前 (07-02)回复
      • 这不准备跟你学呢,呵呵。

        匿名2周前 (07-06)回复
      • 这不期待跟你学呢,呵呵。

        匿名2周前 (07-06)回复
  8. #19

    支持技术胖

    匿名3周前 (07-01)回复
  9. #18

    胖哥,能不能将腾讯视频引用使用H5播放器啊,flash播放器经常卡死,而且还不能设置播放速度。。。

    匿名3周前 (06-30)回复
  10. #17

    谢谢胖哥!

    匿名3周前 (06-30)回复
  11. #16

    谢谢胖哥

    匿名3周前 (06-30)回复
  12. #15

    胖哥,有时间把你用的visual studio code 这个编辑器的使用给讲一下呗,谢谢。

    匿名3周前 (06-29)回复
    • 百度vscode的使用一大片

      匿名3周前 (06-30)回复
  13. #14

    TypeScript 很好,项目中一直使用。
    不过课程介绍中,有些不准确了,应该修改一下哦。
    deno已经移除go了,目前底层仍然是c++/c, 同时会有rust

    匿名3周前 (06-29)回复
    • 非常感谢的更正,你的一个评论会帮助到很多小伙伴。

      技术胖3周前 (06-29)回复
  14. #13

    非常的期待这门课程,跟着胖哥走,技术不落后

    匿名3周前 (06-28)回复
  15. #12

    那岂不是node白学了!!!

    匿名3周前 (06-27)回复
    • 不白学的,Deno要是普及,最少还需要2-3年。知识这东西我觉的学什么都不白学。

      技术胖3周前 (06-28)回复
      • JSpang迷一样的生物钟

        匿名3周前 (06-28)回复
    • 我觉得node还是挺好的

      匿名3周前 (06-30)回复
  16. #11

    沙发.

    匿名3周前 (06-27)回复
  17. #10

    wa~~~竟然是今天,我说今天怎么这么卡呀哈哈哈哈开心

    匿名3周前 (06-27)回复
  18. #9

    沙发!

    匿名3周前 (06-27)回复
  19. #8

    胖哥可以结合vue来教学啊,vue-cli3.0支持typescript了

    匿名3周前 (06-27)回复
    • 后期吧,前期都是基础,我希望没有Vue知识的小伙伴也可以学习。

      技术胖3周前 (06-28)回复
      • 希望能看到 TypeScript+vue 前几天还搜索来着

        匿名3周前 (06-28)回复
  20. #7

    666,我也一直想学ts,就是一直没下决心

    匿名3周前 (06-27)回复
  21. #6

    今年最值得学习的

    匿名3周前 (06-27)回复
  22. #5

    node是 node done是done吧 不能就现在来确认是下一代node吧

    匿名3周前 (06-27)回复
    • 哈哈,不争论这个。因为谁也确定不了。

      技术胖3周前 (06-28)回复
  23. #4

    期待中….

    匿名3周前 (06-27)回复
  24. #3

    66的。。顶一下

    匿名3周前 (06-27)回复
  25. #2

    赞!

    匿名3周前 (06-27)回复
  26. #1

    大力支持~

    匿名3周前 (06-27)回复