从 JavaScript 到 TypeScript - 声明类型

2017-06-05 admin

从 JavaScript 语法改写为 TypeScript 语法,有两个关键点,一点是类成员变量 (Field) 需要声明,另一点是要为各种东西 (变量、参数、函数 / 方法等) 声明类型。而这两个点直接引出了两个关键性的问题,有哪些类型?怎样声明?

类型

在说 TypeScript 的类型之前,我们先复习一下 JavaScript 的七种类型:

  • undefined

  • function

  • boolean

  • number

  • string

  • object

  • symbol

这七种类型都是可以通过 typeof 运算符算出来的,但其中并没有我们常见的 ArraynullDate 之类的类型——因为它们其实都是 object

TypeScript 的重要特性之一就是类型,所以 TypeScript 中的类型要讲究得多,除了 JavaScript 中的类型之外,还定义了其它一些 (不完全列表)

  • Array<T>,或 T[],表示 T 类型的数组

  • null,空类型,其作用与 strictNullChecks 编译参数有关

  • Tuple(元组),形如 [Number, String]

  • enum T,定义枚举类型 T,可理解为集中对数值常量进行命名

  • interface T,接口,T 是一种接口类型

  • class T,类,T 是一种类型

  • any,代表任意类型

  • void,表示没有类型,用于声明函数类型

  • never,表示函数不可返回的神奇类型

  • ……

具体的类型这里就不详述了,官方 Handbook 的 Basic TypeInterfacesClassesEnumAdvanced Types 这几部分说得非常清楚。

不过仍然有一种类型相关的特性不得不提——泛型。如果只是说数据类型,纯粹的 JSer 们还可以理解,毕竟类型不是新鲜玩意儿,只是扩展了点种类。但是泛型这个东西,纯粹的 JSer 们可能就没啥概念了。

泛型主要是用一个符号来表示一些类型,只要是符合约束条件 (默认无约束) 的类型,都可以替换掉这个类型符号来使用,比如

function test<T>(v: T) {
    console.log(v);
}

test<boolean>(true);    // 显式指定 T 由 boolean 替代
test("hello");          // 推断(隐式) T 被 string 替代
test(123);              // 推断(隐式) T 被 number 替代

泛型与强类型相关,即需要进行严格的类型检查,又想少写相似代码,所以干脆用某个符号来代替类型。泛型这个名称本身可能并不是很好理解,但是如果借用 C++ 的 “模板” 概念,就好理解了。比如上面的泛型函数,根据后面的调用,可以被解释为三个函数,相当于套用模板,用实际类型代替了 T

function test(v: boolean) { ... }
function test(v: string) { ... }
function test(v: number) { ... }

关于泛型,更详细的内容可以参考 Handbook 的 <a>Generic</a> 部分。

类型就简述到这里,简单的类型一看就能明白,高级一点的类型我们以后再开专题来详述。不过既然选择使用 TypeScript,必然会用到它的静态类型特性,那就必须强化识别类型的意识,并养成这样的习惯。对于纯 JSer 来说,这是一个巨大的挑战。

声明类型

声明类型,主要是指声明变量 / 常量,函数 / 方法和类成员的类型。JS 中使用 var 声明一个变量,ES6 扩展了 let 和 const。这几种声明 TypeScript 都支持。要为变量或者常量指定类型也很简单,就是在变量 / 常量名后面加个冒号,再指定类型即可,比如

// # typescript

// 声明函数 pow 是 number 类型,即返回值是 number 类型
// 声明参数 n 是 number 类型
function pow(n: number): number {
    return n * n;
}

// 声明 test 是无返回值的
function test(): void {
    for (let i: number = 0; i < 10; i++) {  // 声明 i 是 number
        console.log(pow(i));
    }
}

这段代码演示了对函数类型、参数类型和变量类型地声明。这相对于 JavaScript 代码来说,似乎变得更复杂了。但是考虑下,如果我们在某处不小心这样调用了 pow

// # javascript

let n = "a";
let r = pow(n);     // 这里存在一个潜在的错误

JavaScript 不会提前检查错误的,只有在执行到 r = pow(n) 的时候给 r 赋值为 NaN。然后如果别处又用到 r,可能就会造成连锁错误,可能很要调试一阵才把问题找得出来。

不过上面两行代码在 TypeScript 里是通不过转译的,它会报告一个类型不匹配的错误:

Argument of type 'string' is not assignable to parameter of type 'number'.

声明类成员

这时先来看一段 JavaScript 代码

// # javascript (es6)

class Person {
    constructor(name) {
        this._name = name;
    }

    get name() {
        return this._name;
    }
}

这段 JavaScript 代码如果翻译成 TypeScript 代码,会是这样

// # typescript

class Person {
    private _name: string;

    public constructor(name: string) {
        this._name = name;
    }

    public get name(): string {
        return this._name;
    }
}

注意到 private _name: string,这句话是在声明类成员变量 _name。JavaScript 里是不需要声明的,对 this._name 赋值,它自然就有了,但在 TypeScript 里如果不声明,就会报告属性不存在的错误:

Property '_name' does not exist on type 'Person'.

虽然写起来麻烦了一点,但是我也能理解 TypeScript 的苦衷。如果没有这些声明,tsc 就搞不清楚你在使用 obj.xxxx 或者 this.xxxx 的时候,这个 xxxx 到底确实是你想要添加的属性名称呢,还是你不小心写错了的呢?

另外要注意到的是 privatepublic 修饰符。JavaScript 中存在私有成员,为了实现私有,大家都想了不少办法,比如闭包。

TypeScript 提供了 private 来修饰私有成员,protected 修改保护 (子类可用) 成员,public 修饰公共成员。如果不添加修饰符,默认作为 public,以兼容 JavaScript 的类成员定义。不过特别需要注意的是,这些修饰符只在 TypeScript 环境 (比如转译过程) 有效,转译成 JavaScript 之后,仍然所有成员都是公共访问权限的。比如上例中的 TypeScript 代码转译出来基本上就是之前的 JavaScript 代码,其 _name 属性在外部仍可访问。

当然在 TypeScript 代码中,如果外部访问了 _name,tsc 是会报告错误的

Property '_name' is private and only accessible within class 'Person'.

所以应用内使用 private 完全没问题,但是如果你写的东西需要做为第三方库发布,那就要想一些手段来进行 “私有化” 了,其手段和 JavaScript 并没什么不同。

小结

从 JavaScript 语法改写 TypeScript 语法,我们来做个简单的总结:

  1. 类成员需要声明。

  2. 变量、函数参数和返回值需要申明类型。

如果所有这些东西都要声明类型,工作量还是满大的,所以我建议:就接口部分声明类型。也就是说,类成员、函数 / 方法的参数和返回类型要声明类型,便于编辑器进行语法提示,局部使用的变量或者箭头函数,在能明确推导出其类型的时候,可以不声明类型。

原文:https://segmentfault.com/a/1190000009653948

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

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

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

文章标题:从 JavaScript 到 TypeScript - 声明类型

相关文章
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
回到顶部