TypeScript 类型注解 - 扩展的 JavaScript

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 的道路上。

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

原文链接:segmentfault.com

上一篇:在使用百度的人脸识别的时候有几个需要注意的地方(主要是一些报错)
下一篇:精读《React Conf 2019 - Day1》

相关推荐

官方社区

扫码加入 JavaScript 社区