MDistance的博客

声明合并 如果定义了两个相同名字的函数、接口或类，那么它们会合并成一个类型： 函数的合并§ 之前学习过，我们可以使用重载定义多个函数类型： function reverse(x: number): number; function reverse(x: string): string; function reverse(x: number | string): number | string { if (typeof x === 'number') { return Number(x

18-类与接口 之前学习过，接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。 这一章主要介绍接口的另一个用途，对类的一部分行为进行抽象。 类实现接口§ 实现（implements）是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。 举例来说，门是一个类，防盗门是门的子类。如果防盗门有一个报警器的功能，

类 传统方法中，JavaScript 通过构造函数实现类的概念，通过原型链实现继承。而在 ES6 中，我们终于迎来了 class。 TypeScript 除了实现了所有 ES6 中的类的功能以外，还添加了一些新的用法。 这一节主要介绍类的用法，下一节再介绍如何定义类的类型。 类的概念§ 虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。 类（Class）：定义了一件事物的抽象特点，包含它的属性和方法 对象（Objec

枚举 枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。 简单的例子§ 枚举使用 enum 关键字来定义： enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}; 枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射： enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}; console.log(Days["Sun"] === 0); // true con

字符串字面量类型 字符串字面量类型用来约束取值只能是某几个字符串中的一个。 简单的例子§ type EventNames = 'click' | 'scroll' | 'mousemove'; function handleEvent(ele: Element, event: EventNames) { // do something } handleEvent(document.getElementById('hello'), 'scroll'); // 没问题 handleEvent(doc

类型别名 类型别名用来给一个类型起个新名字。 简单的例子§ type Name = string; type NameResolver = () => string; type NameOrResolver = Name | NameResolver; function getName(n: NameOrResolver): Name { if (typeof n === 'string') { return n; } else { return n()

内置对象 JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。 内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。 ECMAScript 的内置对象§ ECMAScript 标准提供的内置对象有： Boolean、Error、Date、RegExp 等。 我们可以在 TypeScript 中将变量定义为这些类型： let b: Boolean = new Boolean(1);

声明文件 当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。 新语法索引§ 由于本章涉及大量新语法，故在本章开头列出新语法的索引，方便大家在使用这些新语法时能快速查找到对应的讲解： declare var 声明全局变量 declare function 声明全局方法 declare class 声明全局类 declare enum 声明全局枚举类型 declare namespace 声明（含有子属性的）全局对象 interface 和 type 声明全局类型 expor

类型断言 类型断言（Type Assertion）可以用来手动指定一个值的类型。 语法§ 值 as 类型 或 <类型>值 在 tsx 语法（React 的 jsx 语法的 ts 版）中必须使用前者，即 值 as 类型。 形如 `` 的语法在 tsx 中表示的是一个 ReactNode，在 ts 中除了表示类型断言之外，也可能是表示一个泛型。 故建议大家在使用类型断言时，统一使用 值 as 类型 这样的语法，本书中也会贯彻这一思想。 类型断言的用途§ 类型断言的常见用途有以下几种： 将一个联合

函数的类型 函数是 JavaScript 中的一等公民 函数声明§ 在 JavaScript 中，有两种常见的定义函数的方式——函数声明（Function Declaration）和函数表达式（Function Expression）： // 函数声明（Function Declaration） function sum(x, y) { return x + y; } // 函数表达式（Function Expression） let mySum = function (x, y) {

数组的类型 在 TypeScript 中，数组类型有多种定义方式，比较灵活。 「类型 + 方括号」表示法§ 最简单的方法是使用「类型 + 方括号」来表示数组： let fibonacci: number[] = [1, 1, 2, 3, 5]; 数组的项中不允许出现其他的类型： let fibonacci: number[] = [1, '1', 2, 3, 5]; // Type 'string' is not assignable to type 'number'. 数组的一些方法的参数也会根据数

对象的类型——接口 在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。 什么是接口§ 在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。 TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。 简单的例子§ interface Person { name: string;

联合类型 联合类型（Union Types）表示取值可以为多种类型中的一种。 简单的例子§ let myFavoriteNumber: string | number; myFavoriteNumber = 'seven'; myFavoriteNumber = 7; let myFavoriteNumber: string | number; myFavoriteNumber = true; // index.ts(2,1): error TS2322: Type 'boolean' is not as

类型推论 如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。 什么是类型推论§ 以下代码虽然没有指定类型，但是会在编译的时候报错： let myFavoriteNumber = 'seven'; myFavoriteNumber = 7; // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'. 事实上，它等价于： let myF

任意值 任意值（Any）用来表示允许赋值为任意类型。 什么是任意值类型§ 如果是一个普通类型，在赋值过程中改变类型是不被允许的： let myFavoriteNumber: string = 'seven'; myFavoriteNumber = 7; // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'. 但如果是 any 类型，则允许被赋值为任意类型。 let myFavoriteNumber

Hello TypeScript 我们从一个简单的例子开始。 将以下代码复制到 hello.ts 中： function sayHello(person: string) { return 'Hello, ' + person; } let user = 'Tom'; console.log(sayHello(user)); 然后执行 tsc hello.ts 这时候会生成一个编译好的文件 hello.js： function sayHello(person) { return 'He

原始数据类型 JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。 原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。 本节主要介绍前五种原始数据类型在 TypeScript 中的应用。 布尔值§ 布尔值是最基础的数据类型，在 TypeScript 中，使用 boolean 定义布尔值类型： let isDone: boolean = false; // 编译通过

安装 TypeScript TypeScript 的命令行工具安装方法如下： npm install -g typescript 以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。 编译一个 TypeScript 文件很简单： tsc hello.ts 我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。 tsc --outFile ./dist/abc.js hello.

什么是 TypeScript 首先，我对 TypeScript 的理解如下： TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。 其次引用官网的定义： TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.