TypeScript 类型注解 - 扩展的 JavaScript

2019-11-04 admin

TypeScript Type Annotations - Scale JavaScript

关于

本文由 WowBar 团队首发于 GitHub 作者: zhilidali

欢迎来到 《TypeScript 类型注解 - 扩展的 JavaScript》 系列教程。 第一篇,我们将以 JavaScript 开发者的角度来探索 TypeScript,旨在让你能够(重新)认识 TypeScript。

目录

  1. TypeScript 的定义
  2. TypeScript 的优点
  3. TypeScript 的使用

正文

  • 1. TypeScript 的定义

    What is Type?下面我们以 官方__、JavaScript、__作者 三个维度来对 TypeScipt 的定义进行了剖析,希望能够让你对 “TypeScript 是什么?”有个全面的认识,并为后续“Why Typescript?”提供依据。

    • 1.1 官方定义

      TypeScript 由 Microsoft 开发,开源于 GitHub官网首页对 TypeScript 进行了如下定义:

      JavaScript that scales

      TypeScript is a typed superset of javascript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.

      “TypeScript 是 JavaScript 的类型超集,可以编译为原生 JavaScript”。其中所谓“超集”,具体来说,TypeScript 扩展了 JavaScript,在 JavaScript 的基础上添加了新特性,新特性可大致分为两类:

      1. 支持 ES6、ES.Next 语法特性。支持如下:

        • ES5 中的 作用域、函数与 this …
        • ES6 中的 Symbol、iterator、generator、class …
        • ES Proposals 的 Decorator 特性 …
        • 以及 Mixin 编程模式 和 扩展的命名空间 …
      2. 提供了 静态类型系统 用于 静态类型检查

        1. 首先,TypeScript 允许你使用一种称为 Type Annotation (类型注解) 的方式,来对 JS 中的变量进行类型说明,并约定使用 .ts 后缀文件。
        2. 其次,TypeScript Compiler (编译器) 会对 .ts 文件进行类型检查,编译输出原生 .js 文件,之后可在浏览器、Node 等环境中运行。
    • 1.2 TypeScript VS. JavaScript

      说到编译为 JavaScript 的这类语言,我相信大多人同我一样,从一开始就抵触的。近些年来出现了诸多此类语言,有些常常自诩:“去 JS 之糟粕,取 JS 之精华,推陈出新,革故鼎新。。。”,可大多最终没能流行起来。

      有一点要说的是,JavaScript 的灵活性是我最喜欢的,尽管这曾让许多人感到困惑。从编程范式 (JS 是一门多范式编程语言) 到语法层面等无不体现出其灵活性,例如 JS 中的隐式转换,更是让无数开发者苦不堪言,然而真正掌握它就像如鱼得水。关于 JavaScript 好与坏的问题,我们不在这里展开讨论。下面主要来阐述,TypeScript 究竟于 JavaScript 到底有何不同,能够让我从接触到接受 TypeScript。

      如今 TypeScript 热度不断攀升,越来越多的主流 JavaScript 代码库纷纷采用了 TypeScript。这自然要归功于,我们对官方定义的解释中所提到的:支持 ES 特性和提供了静态类型检查。

      1. TypeScript 是兼容 JavaScript 的。没错,TypeScript 没有放弃,是认可 JavaScript 的。开发者只需将文件扩展名从 .js 改为 .ts,便实现了从 JavaScript 到 TypeScript 最简单转换,TypeScript Compiler 最终会输出为客户端环境可以理解的 JavaScript,正所谓“始于 JS,终于 JS”:Starts and ends with JavaScript。至此,你可以放下心结,TypeScript 不会让你已掌握的 JavaScript 知识没有用武之地,

      2. TypeScript 比 JavaScript 多了类型系统。毫无疑问,TypeScript 与 JavaScript 最大的差别在于其提供了强大类型系统。Coding 时的最直观表现,就是在 .ts 文件中,可用类型系统提供的 Type Annotations 语法,为我们声明的变量进行类型约束,: number 表明变量 foo 应为 Number 类型的值。

        let foo: number = 1;
        
    • 1.3 我眼中的 TypeScript

      官方定义说 TypeScript 是 JavaScript 的类型 超集。而在我看来,TypeScript 是 JavaScript 的 子集,才能让我接受,TypeScript 并不是一种全新的语言。作为 TypeScript 最大的特性亮点,类型系统用于扩展 JavaScript,就像 ES Proposals 所扮演的角色一样,属于未来 ES.Next 的语法。

      事实上,早在 ES4 (未通过) 中,就加入了静态检查和类型注解等相关特性, 如同每年加入到 ECMAScript standard 的 EcmaScript Proposals 和 ES6 中许多新的语法特性一样,可在 ES4 中找到其身影。(当然如果你想问 ECMAScript 会不会加入静态检查,就目前来看,这不会很快。)

      我不会强迫你同意我对 TypeScript 的看法,关键在于我们能够对 TypeScript 有清晰的认识,TypeScript 给我们带来了什么。

      另外,如果你问我关于 TypeScript 支持的 ES.Next 新特性,如何才能在现有的环境中顺利运行,我给出答案是 Babel,使用 plugin (插件) 或 preset (预设) 来转换新的 JavaScript 语法。无独有偶,@babel/preset-typescript 更加坚定了我对 TypeScript 的定位,其作为预设让 Babel 来处理 TypeScript,与处理 ES proposals 如出一辙,简直是完美。

      @babel/preset-typescript 是由 Babel 团队与 TypeScript 团队共同合作开发

  • 2. TypeScript 的优点

    Why Typescript?本节通过 TypeScript 的一些优点进行讲解,希望能够回答你是否需要学 TypeScript 的一些顾虑:

    TypeScript 值得我们学习吗? 学不学无所谓或者学了用不到? TypeScript 会过时衰败吗? …

    类型系统到底有什么神奇之处,竟能让这么多人拍手称快,在此主要介绍两方面的特性。

    1. 避免潜在的 bug。我们都知道,JavaScript 是一门弱类语言,JavaScript 的动态类型让许多经验不足或习惯强类型语言的开发者经常摸不着头脑,各种 Uncaught TypeError 满天飞,而 TypScript 能够在编译阶段就及时发现这些错误。
    2. 增加了代码的易读性和可维护性。在你编码时,Type Annotion 可作为文档,比如当你引入一个由第三方用 TypScript 维护的工具函数时,无需频繁查阅文档,在 VSCode 中,就能到够得到提示。尤其现如今项目规模越发庞大,开发人员之间的协作,使得人工维护的代码如何描述自身显得极其重要。

另外,源于 JavaScript 的 TypeScript 早已渗透回 JavaScript 中来。比如你可以通过 JSDoc 注释的方式来支持对 .js 文件类型检查。再比如你正在使用 webpack 中 alias,想要在 VSCode 中跳转你引入的相关路径时,你或许且应当在根项目中添加 jsconfig.json,而 jsconfig.json 来源于 TypeScript 配置文件 tsconfig.json。也许你不需要上面这两个例子,使用 TypeScript 的场景远比你想象的更广泛,甚至只要你用 VSCode 编写过 JavaScript 代码,事实上你早已体验到了 TypsScript 带来的便利性,只是可能你并不清楚而已。

  • 3. TypeScript 的使用

    How TypeScript? 下面是对 ”如何使用 TypeScript” 的概览,既是映射前面所讲的理论内容,也为我们后续学习做铺垫。

    • 3.1 Installing

      首先通过 npm 来安装 TypeScript Compiler

      $ npm i -D typescript
      

      之后我们便可以在终端执行 tsc 命令

    • 3.2 Compiling

      首先我们来编写我们的 .ts 代码,其中变量后面的 : string写法就是 Type Annotation,把变量 name 的数据类型约定为 ‘string’

      let name: string = 'TypeScript';
      

      编译 TypeSciprt 很简单,只需在你的项目中下输入 tsc 命令,就会将 .ts 文件到编译输出为 .js 代码文件

      let name = `TypeScripts`;
      
    • 3.3 Configuring

      同 babel 等编译器一样,TypeScript Compiler 提供了许多编译选项,来细粒度控制编译器的行为。可通过命令参数或者 tsconfig.json 文件来设置。

      {
          "compilerOptions": {
              "target": "esnext",
              "module": "esnext",
              "allowJs": true,
              "checkJs": true,
              "strict": true
          }
      }
      

结语 通过本篇对 TypeScript 本质的探索,希望你已(重新)认识了TypeScript。 关于本文中提到的类型系统,以及代码块中 Type Annotation 语法,也许你有点摸不着头脑。别急,后续我们会展开全面的讲解,做到让你从接触、到了解、再到爱上 TypeScript,沉浸享受于通往 TypeScript 的道路上。

CC BY-NC-ND 4.0

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

[转载]原文链接:https://segmentfault.com/a/1190000020895758

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78807.html

文章标题:TypeScript 类型注解 - 扩展的 JavaScript

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
html5+JavaScript教程-微信打飞机小游戏源码
js // JavaScript Document var c = document.getElementById("dotu"); var cxt = c.getContext("2d&q...
2015-11-12
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
回到顶部