TypeScript 看见未来的 JavaScript

TypeScript也可以看作是“更好的JavaScript”,TypeScript充分利用了JavaScript原有的对象模型并在此基础上做了扩充,添加了较为严格的类型检查机制,添加了模块支持和API导出的能力。比起JavaScript,TypeScript提供了更多在语言层面上的支持,使得程序员能够以更加标准化的语法来表达语义上的约束,从而降低了程序出错的机率;TypeScript也使得代码组织和复用变得更加有序,使得开发大型Web应用有了一套标准方法。

下面是完成同样功能的两段简单代码。

TypeScript Code:

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}  

JavaScript Code:

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

在JavaScript中没有类,只有对象,要实现所谓的“类式操作”(classical operations),如封装、多态等,要通过若干基础设施,如原型、构造函数等来完成。这些对于非常熟悉JavaScript的程序员来说,也许都是可以完成的任务,但对于新手来说就困难重重了。并且,即使是高手,一段时间不写相关的代码也很容易遗忘和出错。但TypeScript却提供了标准的机制,将普通程序员熟悉的、C++和C#中常用的类概念映射到JavaScript中去,这样就大大降低了在JavaScript进行类式操作的难度。

严格ES6(ECMAScript 2015)开始支持类了,但TypeScript现在就可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3(或更高版本)的JavaScript引擎中。所以说TypeScript是JavaScript的未来,是更好的JavaScript

为什么要学习 TypeScript ,实际上 JavaScript 已经够用了,而且像我没学过 TypeScript 也照样开发得很好,我们来看看它的优势:

  • 更多的规则和类型限制,让代码预测性更高、可控性更高,易于维护和调试。
  • 对模块、命名空间和面向对象的支持,更容易组织代码开发大型复杂程序。
  • TypeScript 的编译步骤可以捕获运行之前的错误。
  • Angular 2+ 和 Ionic 2+默认使用 TypeScript(虽然我不会,我也在用。)、

TypeScript 是微软开发和控制的开源项目,我在应用 Anguar 2 + Ionic 2 + 框架开发系统时使用的就是 TypeScript,但我一直把 TypeScript 当作 JavaScript 来用的,甚至是照猫画虎,所以我想正儿八经的学习下 TypeScript,弄明白我糊里糊涂使用的东西,这篇 Chat分享算是我的一个学习笔记,如果你想和我一样,想知道以下内容,请来我的 Chat:

为什么要学习 TypeScript TypeScript 的类型有什么不同和用处 使用 Webpack 搭建学习环境 深入了解 TypeScript 中的类型

如果你想了解以上类容,欢迎加入TypeScript 快速入门 的Chat

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

前端面试那些坑

HTML Doctype作用?严格模式与混杂模式如何区分?它们有何意义? HTML5 为什么只需要写 ? 行内元素有哪些?块级元素有哪些? 空(void)元素有...

3476
来自专栏前端架构与工程

《微信小程序七日谈》- 第三天:玩转Page组件的生命周期

《微信小程序七日谈》系列文章: 本系列的文章并非初学教程,而是笔者在具体开发过程中遇到的问题以及部分解决方案。 前两篇文章第一天:人生若只如初见和第二天:你可...

22910
来自专栏企鹅号快讯

前端工程师面试题汇总

作者:@markyun markyun.github.io/2015/Front-end-Developer-Questions/ HTML Doctype作用...

2828
来自专栏从零开始学 Web 前端

从零开始学 Web 之 JavaScript(一)JavaScript概述

JavaScript历史 要了解JavaScript,我们首先要回顾一下JavaScript的诞生。在上个世纪的1995年,当时的网景公司正凭借其Naviga...

1162
来自专栏iOS开发笔记

iOS开发照片框架详解(一)-- AssetsLibrary

1 概要 在 iOS 设备中,照片和视频是相当重要的一部分。最近刚好在制作一个自定义的 iOS 图片选择器,顺便整理一下 iOS 中对照片框架的使用方法。在 ...

4267
来自专栏李蔚蓬的专栏

10.1.5 布局优化利器之 Hierarchy Viewer

无论是哪本讲解布局优化的参考书,它们都不得不提到Hierarchy Viewer。不过,通常情况下,Hierarchy( 英['haɪərɑːkɪ])Viewe...

823
来自专栏nice_每一天

一天带你入门到放弃vue.js(一)

每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧!

1672
来自专栏web前端教室

[web零基础课]~记一个自定义checkBox标签的进化过程&&电商项目作业检查--张潇x

继昨天讲完了jq插件的二种编写方法和区别之后,今天的web前端零基础课中,又回过头来继续把电商网站中的checkBox复选框,进行了进一步的封装与自定义。 //...

2146
来自专栏腾讯NEXT学位

VScode编辑器神插件!让你入门前端轻松打怪升级!

5234
来自专栏前端侠2.0

Angular Elements 组件在非angular 页面中使用的DEMO

      Angular Elements 是伴随Angular6.0一起推出的新技术。它借助Chrome浏览器的ShadowDom  API,实现一种自定义...

3682

扫码关注云+社区

领取腾讯云代金券