AI考拉技术分享--程序媛带你入门the real typescript
发布于 15 天前 作者 kalengo 256 次浏览 最后一次编辑是 2 天前 来自 分享

前言

公司的程序猿的“日常女友”是JS,每天相爱相杀,一边吐槽一边却又离不开;自从新入职了个程序媛小姐姐,分享了Typescript大法,大家上班腰也不酸腿也不累了,经常往小姐姐的位置上问问题… 女程序媛说:用到了Typescript的特性,才是写了真的TypeScript;否则它们都只是披着.ts外套的JavaScript 。

Typescript 还没出生的年代

那时候,JavaScript被定义为一门弱类型、灵活、跨平台动态脚本语言… 接着,前端工程师也想写后端、想快速开发小项目、想“一门语言走天下”,于是Node.js技术栈出现了… 后来,ES6/ES6+开始有Class、Module、Promise对象,更合理与强大地解决异步编程问题,Node.js不断优化…… 于是争霸开始出现了:Node.js好还是Java好?(BTW,php是世界上最好的语言)… 程序猿的内心os:能不能JavaScript也能像Java一样开发更稳定、更健壮的大型项目?(能! 给JavaScript加个类型——TypeScript

Typescript 介绍

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TypeScript 扩展了JavaScript语法,任何已经存在的JavaScript程序,可以不加任何改动,在TypeScript环境下运行。 PS:TypeScript已经构建在GitHub上了。TypeScript编译器已经在TypeScript中实现,并且可以运行在任何JavaScript计算机中。

Typescript 的优势

Typescript的优势,概括来说有如下几点:

  1. 静态类型检查,程序猿在编译时就可以提前发现错误,降低使用纯js开发风险;
  2. 包含JavaScript所有元素;
  3. 高可读性;
  4. 继承封装多态、接口、泛型、装饰器;
  5. 开发大型应用、代码重构、维护。

Typescript的安装

有两种主要的方式来获取TypeScript工具:

  1. 通过npm(Node.js包管理器)
    • 针对使用npm的用户:
    npm install -g typescript   
    
  2. 安装Visual Studio的TypeScript插件 Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。 如果你的Visual Studio还没有安装TypeScript,你可以下载它。

TypeScript 声明文件

声明文件是对对象,方法的声明。ts在静态检查语法规则时,当遇到对象、方法时,会先检查这些对象、方法有没有被声明过,如果没有找到声明则认为使用非法。

  1. 下载 在TypeScript 2.0以上的版本,获取类型声明文件只需要使用npm。 比如,获取lodash库的声明文件,只需使用下面的命令:

    npm install --save [@types](/user/types)/lodash
    
  2. 使用 下载完后,就可以直接在TypeScript里使用lodash了。 不论是在模块里还是全局代码里使用。 比如,你已经npm install安装了类型声明,你可以使用导入: types包.png

  3. 发布 写好一个声明文件,接着把它发布到npm了。 有两种主要方式用来发布声明文件到npm:

    1. 与你的npm包捆绑在一起;
    2. 发布到npm上的@types organization,这里主要讲第二种。 @types下面的包是从DefinitelyTyped里自动发布的,通过 types-publisher工具。 如果想让你的包发布为@types包,提交一个pull request到https://github.com/DefinitelyTyped/DefinitelyTyped。 在这里查看详细信息 contribution guidelines page。

TypeScript 的与众不同

  1. 面向对象特性
    • TypeScript 引入了 JavaScript 中没有的“类”概念。 传统JavaScript 通过构造函数实现类的概念,通过原型链实现继承。 在Typescript中,我们可以把它看成是Java,对类有着同样的定义,同样也拥有封装、继承、多态的特性即是我们通常所说的OO(面向对象)。 tp继承1.png
      跟Java一样,typescript可以实现(implements)多个接口,但只能继承(extends)一个父类
    • 泛型
      在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。 泛型1.png
      泛型2.png
    • 泛型约束 泛型约束1.png
      泛型约束2.png
    • 重载
      Java重载
      Java重载.png
      Typescript重载
      tp重载.png tp重载2.png
  2. 装饰器的使用
    装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用@expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。 装饰器1.png
    装饰器2.png

写在最后

此次程序媛小姐姐带着大家入了个门,介绍了typescript的特性以及使用。接下来,我们会继续深挖JavaScript中node框架的那些事,Node大牛将接过大棒,分享node模型三部曲:并发模型、内存模型以及异步编程,大家敬请期待哦!
参考文献:

  1. typescirpt 官方文档 http://www.typescriptlang.org/

  2. @types声明文件包 https://microsoft.github.io/TypeSearch/

  3. 边写typescript边看编译出来的js代码 http://www.typescriptlang.org/play/index.html

  4. 装饰器传送门:https://github.com/typestack/routing-controllers https://github.com/typestack/typedi

著作权归本文作者所有,未经授权,请勿转载,谢谢。

1 回复

只想看小姐姐,不想看TS。

回到顶部