TypeScript 初识

时间 2019-12-04

标签 typescript 繁體版

原文原文链接

文章博客地址：http://pinggod.com/2016/Typescript/javascript

TypeScript 是 JavaScript 的超集，为 JavaScript 的生态增长了类型机制，并最终将代码编译为纯粹的 JavaScript 代码。类型机制很重要吗？最近的一些项目经历让我以为这真的很重要。当你陷在一个中大型项目中时（Web 应用日趋成为常态），没有类型约束、类型推断，总有种牵一发而动全身的危机和束缚。Immutable.js 和 Angular 2 都在使用 TypeScript 作开发，它们都是体量颇大的项目，因此我决定尝试一下 Typescript。此外咱们还能够尝试 Facebook 的 Flow，比较一下二者的优劣。Typescript 对 ES6 也有良好的支持，目前组内项目使用 Babel 编译 ES6，这也就天然而然的把 TypeScirpt 和 Flow / babel-plugin-tcomb 放在了对立面，也许下一篇文章就是介绍 Flow 和 babel-plugin-tcomb。html

What and Why

若是你想对 TypeScript 有更深刻的认识，那么推荐你阅读 Stack Overflow 上的问答 What is TypeScript and why would I use it in place of JavaScript? ，这一节也是对这篇问答的一个简述。java

虽然 JavaScript 是 ECMAScript 规范的标准实现，但并非全部的浏览器都支持最新的 ECAMScript 规范，这也就限制了开发者使用最新的 JavaScript / ECMAScript 特性。TypeScript 一样支持最新的 ECMAScript 标准，并能将代码根据需求转换为 ES 3 / 5 / 6，这也就意味着，开发者随时可使用最新的 ECMAScript 特性，好比 module / class / spread operator 等，而无需考虑兼容性的问题。ECMAScript 所支持的类型机制很是丰富，包括：interface、enum、hybird type 等等。react

与 TypeScript 类似的工具语言还有不少，它们主要分为两个阵营，一个是相似 Babel 的阵营，以 JavaScript 的方式编写代码，致力于为开发者提供最新的 ECMAScript 特性并将代码编译为兼容性的代码；另外一个则是 Coffeescript、Clojure、Dart 等的阵营，它们的语法与 JavaScript 迥然不一样，但最终会编译为 JavaScript。TypeScript 在这二者之间取得了一种平衡，它既为 JavaScript 增长了新特性，也保持了对 JavaScript 代码的兼容，开发者几乎能够直接将 .js 文件重命名为 .ts 文件，就可使用 TypeScript 的开发环境，这种作法一方面能够减小开发者的迁移成本，一方面也可让开发者快速上手 TypeScript。webpack

JavaScript 是一门解释型语言，变量的数据类型具备动态性，只有执行时才能肯定变量的类型，这种后知后觉的认错方法会让开发者成为调试大师，但无益于编程能力的提高，还会下降开发效率。TypeScript 的类型机制能够有效杜绝由变量类型引发的误用问题，并且开发者能够控制对类型的监控程度，是严格限制变量类型仍是宽松限制变量类型，都取决于开发者的开发需求。添加类型机制以后，反作用主要有两个：增大了开发人员的学习曲线，增长了设定类型的开发时间。整体而言，这些付出相对于代码的健壮性和可维护性，都是值得的。git

目前主流的 IDE 都为 TypeScript 的开发提供了良好的支持，好比 Visual Studio / VS Code、Atom、Sublime 和 WebStorm。TypeScript 与 IDE 的融合，便于开发者实时获取类型信息。举例来讲，经过代码补全功能能够获取代码库中其余函数的信息；代码编译完成后，相关信息或错误信息会直接反馈在 IDE 中……github

在即将发布的 TypeScript 2.0 版本中，将会有许多优秀的特性，好比对 null 和 undefined 的检查。cannot read property 'x' of undefined 和 undefined is not a function 在 JavaScript 中是很是常见的错误。在 TypeScript 2.0 中，经过使用 non-nullable 类型能够避免此类错误：let x : number = undefined 会让编译器提示错误，由于 undefined 并非一个 number，经过 let x : number | undefined = undefined 或 let x : number? = undefined 可让 x 是一个 nullable（undefined 或 null）的值。若是一个变量的类型是 nullable，那么 TypeScript 编译器就能够经过控制流和类型分析来断定对变量的使用是否安全：web

let x : number?;
if (x !== undefined)
    // this line will compile, because x is checked.
    x += 1;

// this line will fail compilation, because x might be undefined.    
x += 1;

TypeScript 编译器既能够将 source map 信息置于生成的 .js 文件中，也能够建立独立的 .map 文件，便于开发者在代码运行阶段设置断点、审查变量。此外，TypeScript 还可使用 decorator 拦截代码，为不一样的模块系统生成模块加载代码，解析 JSX 等。typescript

Usage

这一节介绍 TypeScirpt 的一些基础特性，算是抛砖引玉，但愿引发你们尝试和使用 TypeScript 的兴趣。首先，从最简单的类型标注开始：编程

// 原始值
const isDone: boolean = false;
const amount: number = 6;
const address: string = 'beijing';
const greeting: string = `Hello World`;

// 数组
const list: number[] = [1, 2, 3];
const list: Array<number> = [1, 2, 3];

// 元组
const name: [string, string] = ['Sean', 'Sun'];

// 枚举
enum Color {
    Red,
    Green,
    Blue
};
const c: Color = Color.Green;

// 任意值：能够调用任意方法
let anyTypes: any = 4;
anyTypes = 'any';
anyTypes = false

// 空值
function doSomething (): void {
    return undefined;
}

// 类型断言
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

TypeScript 中的 Interface 能够看作是一个集合，这个集合是对对象、类等内部结构的约定：

// 定义接口 Coords
// 该接口包含 number 类型的 x，string 类型的 y
// 其中 y 是可选类型，便是否包含该属性无所谓
interface Coords {
    x: number;
    y?: string;
};

// 定义函数 where
// 该函数接受一个 Coords 类型的参数 l
function where (l: Coords) {
    // doSomething
}

const a = { x: 100 };
const b = { x: 100, y1: 'abc' };

// a 拥有 number 类型的 x，能够传递给 where
where(a);
// b 拥有 number 类型的 x 和 string 类型的 y1，能够传递给 where
where(b);

// 下面这种调用方式将会报错，虽然它和 where(b) 看起来是一致的
// 区别在于这里传递的是一个对象字面量
// 对象字面量会被特殊对待并通过额外的属性检查
// 若是对象字面量中存在目标类型中未声明的属性，则抛出错误
where({ x: 100, y1: 'abc' });

// 最好的解决方式是为接口添加索引签名
// 添加以下所示的索引签名后，对象字面量能够有任意数量的属性
// 只要属性不是 x 和 y，其余属性能够是 any 类型
interface Coords {
    x: number;
    y?: string;
    [propName: string]: any
};

上面的代码演示了接口对对象的约束，此外，接口还经常使用于约束函数的行为：

// CheckType 包含一个调用签名
// 该调用签名声明了 getType 函数须要接收一个 any 类型的参数，并最终返回一个 string 类型的结果
interface CheckType {
    (data: any): string;
};

const getType: CheckType = (data: any) : string => {
    return Object.prototype.toString.call(data);
}

getType('abc');
// => '[object String]'

与老牌强类型语言 C#、Java 相同的是，Interface 也能够用于约束类的行为：

interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
    tick();
}

function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    return new ctor(hour, minute);
}

class DigitalClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("beep beep");
    }
}
class AnalogClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("tick tock");
    }
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

class

除了 ES6 增长的 Class 用法，TypeScript 还增长了 C++、Java 中常见的 public / protected / private 限定符，限定变量或函数的使用范围。TypeScript 使用的是结构性类型系统，只要两种类型的成员类型相同，则认为这两种类型是兼容和一致的，但比较包含 private 和 protected 成员的类型时，只有他们是来自同一处的统一类型成员时才会被认为是兼容的：

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

class Rhino extends Animal {
    constructor() { super("Rhino"); }
}

class Employee {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

let animal = new Animal("Goat");
let rhino = new Rhino();
let employee = new Employee("Bob");

animal = rhino;
// Error: Animal and Employee are not compatible
animal = employee;

抽象类是供其余类继承的基类，与接口不一样的是，抽象类能够包含成员方法的实现细节，但抽不能够包含抽象方法的实现细节：

abstract class Animal {
    // 抽象方法
    abstract makeSound(): void;
    // 成员方法
    move(): void {
        console.log('roaming the earch...');
    }
}

function

添加类型机制的 TypeScript 在函数上最能够秀的一块就是函数重载了：

let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
    // Check to see if we're working with an object/array
    // if so, they gave us the deck and we'll pick the card
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    }
    // Otherwise just let them pick the card
    else if (typeof x == "number") {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 };
    }
}

let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
let pickedCard1 = myDeck[pickCard(myDeck)];
let pickedCard2 = pickCard(15);

console.log("card: " + pickedCard1.card + " of " + pickedCard1.suit);
console.log("card: " + pickedCard2.card + " of " + pickedCard2.suit);

编译器首先会尝试匹配第一个函数重载的声明，若是类型匹配成功就执行，不然继续匹配其余的重载声明，所以参数的针对性越强的函数重载，越要靠前声明。

genrics

function identity<T>(arg: T[]): T[] {
    console.log(arg.length);
    return arg;
}

let myIdentity: {<T>(arg: T[]): T[]} = identity;

上面的代码展现了泛型的基本用法，这里的 <T> 称为泛型变量，经过这个声明，咱们能够肯定传入的参数类型和返回的数据类型是一致的，一旦肯定了传入的参数类型，也就肯定了返回的数据类型。myIdentity 使用了带有调用签名的对象字面量定义泛型函数，实际上能够结合接口，写出更简洁的泛型接口：

interface IdentityFn {
     <T>(arg: T[]): T[];
};

let myIdentity: IdentityFn = identity;

若是同一个泛型变量在接口中被反复使用，那么能够在定义接口名的同时声明泛型变量：

interface IdentityFn<T> {
    (arg: T[]): T[];
};

function identity<T>(arg: T[]): T[] {
    console.log(arg.length);
    return arg;
}

let myIdentity: IdentityFn<string> = identity;

在泛型接口以外，还可使用泛型类，二者的形式很是相似：

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

泛型也能够直接继承接口约束本身的行为：

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

type inference

TypeScript 主要有两种类型推断方式：Best Common Type 和 Contextual Type。咱们先介绍 Best Common Type:

let x = [0, 1, null];

对于上面代码中的变量 x，若是要推断出它的类型，就必须充分考虑 [0, 1, null] 的类型，因此这里进行类型推断的顺序是从表达式的叶子到根的，也就是先推断变量 x 的值都包含什么类型，而后总结出 x 的类型，是一种从下往上的推断过程。

TypeScript 的类型推论也能够按照从上往下的顺序进行，这被称为 Contextual Type：

window.onmousedown = function(mouseEvent) {
    // Error: Property 'button' does not exist ontype 'MouseEvent'
    console.log(mouseEvent.buton);  
};

在上面的示例中，TypeScript 类型推断机制会经过 window.onmousedown 函数的类型来推断右侧函数表达式的类型，继而推断出 mouseEvent 的类型，这种从上到下的推断顺序就是 Contextual Type 的特征。

这里只对 TypeScript 的特性作简单的介绍，更详细的资料请参考如下资料：

React and Webpack

在 TypeScript 中开发 React 时有如下几点注意事项：

对 React 文件使用 .tsx 的扩展名
在 tsconfig.json 中使用 compilerOptions.jsx: 'react'
使用 typings 类型定义

interface Props {
    foo: string;
}

class MyComponent extends React.Component<Props, {}> {
    render() {
        return <span>{this.props.foo}</span>
    }
}

<MyComponent foo="bar" />; // 正确

TypeScript 的官方文档中对 React 的开发作了一个简单的演示，主要包含如下几个部分：

使用 tsconfig.json 做为 TypeScript 的编译配置文件
使用 webpack 做为构建工具，须要安装 webpack、ts-loader 和 source-map-loader
使用 typings 做为代码提示工具

具体的搭建流程能够参考文档 React & Webpack，此外，我我的写过一个 TypeScript & Webpack & React 开发的最小化模板可供各位参考，与之等同的 Babel & Webpack & React 版本。

若是查看模板以后对 import * as React from 'react' 的方式有所疑惑，请查看 TypeScript 的负责人 Anders Hejlsberg 在 issue#2242 中的详细解析。