TypeScript 极简教程Web Developer前端开发笔记

Typescript基础入门

2018-06-03  本文已影响586人  Gukson666

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。

它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，而且 Google 的 Angular2 也使用了 TypeScript 作为开发语言。

它除了支持最新的 JavaScript 语言特性之外，还增加了非常有用的编译时类型检查特性，而代码又最终会编译成 JavaScript 来执行，非常适合原本使用 JavaScript 来开发的大型项目。

安装 TypeScript

TypeScript 的命令行工具安装方法如下：

npm install -g typescript

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。

编译一个 TypeScript 文件很简单：

tsc hello.ts

我们约定使用 TypeScript 编写的文件以 .ts 为后缀。

编辑器

TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等。主流的编辑器都支持 TypeScript，这里我推荐使用 Visual Studio Code。它是一款开源，跨终端的轻量级编辑器，内置了 TypeScript 支持。另外它本身也是用 TypeScript 编写的。
结合微软开发的开源代码编辑器 Visual Studio Code，使用 TypeScript 开发项目具有以下优点：

下载安装：https://code.visualstudio.com/

TypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错。TypeScript 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个编译之后的文件。如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。

TypeScript 中，使用 : 指定变量的类型，: 的前后有没有空格都可以。

原始数据类型

let u: undefined = undefined;
let n: null = null;

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查

接口（interface）

接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implements）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

以下是接口的几种常见形式：

// 定义具有 color 和 width 属性的对象
interface SuperConfug {
  color: string;
  width: number;
}

// readonly 表示只读，不能对其属性进行重新赋值
interface Point {
  readonly x: number;
  readonly y: number;
}

// ?表示属性是可选的，可选属性的含义是该属性可以不存在。仍然不允许添加未定义的属性。
// [propName: string]: any 表示允许 obj[xxx] 这样的动态属性
interface SquareConfig {
  color?: string;
  width?: number;
  [propName: string]: any; // 使用 [propName: string] 定义了任意属性取 string 类型的值。
}

// 函数接口
interface SearchFunc {
  (source: string, subString: string): boolean;
}

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候。

数组

最简单的方法是使用「类型 + 方括号」来表示数组：
let fibonacci: number[] = [1, 1, 2, 3, 5];
数组的项中不允许出现其他的类型：
let fibonacci: number[] = [1, '1', 2, 3, 5];
也可以使用数组泛型（Array Generic） Array<elemType> 来表示数组：
let fibonacci: Array<number> = [1, 1, 2, 3, 5];

函数

一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义较简单，以下是几种函数接口的定义方式：

// 普通函数
function add(a: number, b: number): number {
  return a + b;
}

// 函数参数
function readFile(file: string, callback: (err: Error | null, data: Buffer) => void) {
  fs.readFile(file, callback);
}

// 通过 type 语句定义类型
type CallbackFunction = (err: Error | null, data: Buffer) => void;
function readFile(file: string, callback: CallbackFunction) {
  fs.readFile(file, callback);
}

// 通过 interface 语句来定义类型
interface CallbackFunction {
  (err: Error | null, data: Buffer): void;
}
function readFile(file: string, callback: CallbackFunction) {
  fs.readFile(file, callback);
}

注意，输入多余的（或者少于要求的）参数，是不被允许的。

函数表达式

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

注意，不要混淆了 TypeScript 中的 => 和 ES6 中的 =>。
在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

在 ES6 中，我们允许给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数

内置对象

ECMAScript 标准提供的内置对象有：
Boolean、Error、Date、RegExp 等。
我们可以在 TypeScript 中将变量定义为这些类型：

let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

类型别名用来给一个类型起个新名字。
简单的例子：

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    }
    else {
        return n();
    }
}

元组

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。
当赋值或访问一个已知索引的元素时，会得到正确的类型：

let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';
xcatliu[1] = 25;

当赋值给越界的元素时，它类型会被限制为元组中每个类型的联合类型。

枚举

枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。枚举项有两种类型：常数项（constant member）和计算所得项（computed member）。
常数枚举是使用 const enum 定义的枚举类型：

const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

一个典型的计算所得项的例子：
enum Color {Red, Green, Blue = "blue".length};
上面的例子中，"blue".length 就是一个计算所得项。上面的例子不会报错，但是如果紧接在计算所得项后面的是未手动赋值的项，那么它就会因为无法获得初始值而报错。

类

类的一些概念：

TypeScript 的类定义跟 JavaScript 的定义方法类型一样，但是增加了public, private, protected, readonly等访问控制修饰符：

class Person {
  protected name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Employee extends Person {
  private department: string;

  constructor(name: string, department: string) {
    super(name);
    this.department = department;
  }

  public getElevatorPitch() {
    return `Hello, my name is ${this.name} and I work in ${this.department}.`;
  }
}

需要注意的是，这些修饰符仅在 TypeScript 程序中才有效，如果直接使用 JavaScript 是可以在类外部访问到被声明为 private 或者 protocted 的类成员，也可以修改被声明为 readonly 的成员变量。

如果没有指定访问控制关键字，则默认为 public。

使用 static 修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用

class Animal {
    static isAnimal(a) {
        return a instanceof Animal;
    }
}

let a = new Animal('Jack');
Animal.isAnimal(a); // true
a.isAnimal(a); // TypeError: a.isAnimal is not a function

abstract 用于定义抽象类和其中的抽象方法。抽象类是不允许被实例化的，抽象类中的抽象方法必须被子类实现。
不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现。一个类可以实现多个接口，接口与接口之间可以是继承，接口也可以继承类。

泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
以下是使用泛型的简单例子：

function identity<T>(arg: T): T {
  return arg;
}

const map = new Map<string, number>();
map.set('a', 123);

function sleep(ms: number): Promise<number> {
  return new Promise<number>((resolve, reject) => {
    setTimeout(() => resolve(ms), ms);
  });
}

我们在函数名后添加了 <T>，其中 T 用来指代任意输入的类型，在后面的输入 arg: T 和输出 T 中即可使用了。
在 TypeScript 2.3 以后，我们可以为泛型中的类型参数指定默认类型。

function createArray<T = string>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

编译并执行文件

大多数时候，为了方便我们可以直接使用 ts-node 命令执行 TypeScript 源文件而不需要预先编译。首先执行以下命令安装 ts-node：
npm install -g ts-node
然后使用 ts-node 命令执行即可：
ts-node --no-cache server.ts
说明：使用 ts-node 执行 TypeScript 程序时，为了提高编译速度，默认会缓存未修改过的 .ts 文件，但有时候会导致一些 Bug，所以建议启动时加上 --no-cache 参数。

tsconfig.json 配置文件

每个 TypeScript 项目都需要一个 tsconfig.json 文件来指定相关的配置，比如告诉 TypeScript 编译器要将代码转换成 ES5 还是 ES6 代码等。以下是我常用的最基本的 tsconfig.json 配置文件：

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es6",
    "rootDir": "src",
    "outDir": "dist",
    "sourceMap": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true
  }
}

使用了这个 tsconfig.json 配置文件之后，我们的源码就需要全部放到 src 目录

补充知识：JSX是一种嵌入式的类似XML的语法。 它可以被转换成合法的JavaScript，尽管转换的语义是依据不同的实现而定的。 JSX因React框架而流行，但也存在其它的实现。 TypeScript支持内嵌，类型检查以及将JSX直接编译为JavaScript。

使用第三方模块

一般情况下在 TypeScript 中是不能”直接“使用 npm 上的模块的。由于 TypeScript 项目最终会编译成 JavaScript 代码执行，当我们在 TypeScript 源码中引入这些被编译成 JavaScript 的模块时，它需要相应的声明文件（.d.ts文件）来知道该模块类型信息，这些声明文件可以通过设置tsconfig.json中的declaration: true来自动生成。而那些不是使用 TypeScript 编写的模块，也可以通过手动编写声明文件来兼容 TypeScript。

为了让广大开发者更方便地使用 npm 上众多非 TypeScript 开发的模块，TypeScript 官方建立了一个名叫 DefinitelyTyped 的仓库，任何人都可以通过 GitHub 在上面修改或者新增 npm 模块的声明文件，经多几年多的发展，这个仓库已经包含了大部分常用模块的声明文件，而且仍然在继续不断完善。当遇到缺少模块声明文件的情况，开发者可以尝试通过 npm install @types/xxx 来安装模块声明文件。

我们尝试执行以下命令安装 express 模块的声明文件：
npm install @types/express --save
成功安装。现在再通过 ts-node 来执行的时候，没有报错。

如果我们使用的第三方模块在 DefinitelyTyped 找不到对应声明文件，也可以尝试使用require()这个终极的解决方法，它会将模块解析成 any 类型，不好的地方就是没有静态类型检查了。

typings 声明文件

编写 .d.ts 文件还是比较繁琐的，比如要完整地给 express 编写声明文件，首先得了解这个模块都有哪些接口，而且 JavaScript 模块普遍接口比较 灵活，同一个方法名可能接受各种各样的参数组合。所以，大多数情况下我们只会定义我们需要用到的接口，下文以 express 模块为例。

为了验证我们编写的声明文件是否有效，首先执行以下命令将之前安装的声明文件全部删除：
rm -rf node_modules/@types

然后新建文件typings/express.d.ts（TypeScript 默认会自动从 typings 目录加载这些 .d.ts 文件）：

declare module 'express' {

  /** 定义 express() 函数 */
  function express(): express.Application;

  namespace express {

    /** 定义 Application 接口 */
    interface Application {
      /** get 方法 */
      get(path: string, handler: (req: Request, res: Response) => void): void;
      /** listen 方法 */
      listen(port: number, callback: () => void): void;
    }

    /** 定义 Response 接口 */
    interface Request { }

    /** 定义 Response 接口 */
    interface Response {
      end(data: string): void;
    }

  }

  export = express;
}

说明：

TSLint 代码规范检查

在编写 JavaScript 代码时，我们可以通过 ESLint 来进行代码规范检查，编写 TypeScript 代码时也可以使用 TSLint，两者在配置上也有些相似。对于初学者来说，使用 TSLint 可以知道哪些程序的写法是不被推荐的，从而养成更好的 TypeScript 代码风格。

首先我们执行以下命令安装 TSLint：
npm install tslint -g
然后在项目根目录下新建 TSLint 配置文件 tslint.json：

{
  "extends": [
    "tslint:recommended"
  ]
}

这个配置文件指定了使用推荐的 TSLint 配置（tslint:recommended）。然后执行以下命令检查：
tslint src/**/*.ts
可以通过修改配置文件 tslint.json 来关闭它：

{
  "extends": [
    "tslint:recommended"
  ],
  "rules": {
    "no-console": [
      false
    ],
    "only-arrow-functions": [
      false
    ]
  }
}

以上配置允许使用 console.log 和 function，而字符串使用双引号和圆括号前的空格这两条可以使用 tslint 命令来格式化。执行以下命令检查，并允许 ESLint 尝试自动格式化：
tslint --fix src/**/*.ts

发布模块

相比直接使用 JavaScript 编写的 npm 模块，使用 TypeScript 编写的模块需要增加以下几个额外的工作：

真有计划发布TypeScript 编写的模块，可以看文末链接 老雷 的文章。这里不做详述。

单元测试

要执行使用 TypeScript 编写的单元测试程序，可以有两种方法：

直接执行 .ts 源文件，下文将以 mocha 为例演示。

首先执行以下命令安装所需要的模块：
npm install mocha @types/mocha chai @types/chai ts-node --save-dev
然后新建单元测试文件 src/test.ts：

import { expect } from 'chai';
import { add } from './math';

describe('测试 math', function () {

  it('add()', function () {
    expect(add(1, 2)).to.equal(3);
  });

});

修改文件 package.json 在 scripts 中增加 test 脚本：

{
  "scripts": {
    "test": "mocha --compilers ts:ts-node/register src/test.ts"
  }
}

说明：通过 mocha 命令的 –compilers 选项指定了 .ts 后缀的文件使用 ts-node 的钩子函数来预编译。

然后执行以下命令测试：
npm test
可以看到以下结果：

  测试 math
    ✓ add()

  1 passing (8ms)

JavaScript 项目渐进式迁移

要将一个已有的 JavaScript 项目迁移到 TypeScript 之上，往往会遇到以下几个问题：

针对以上第一个问题，tsconfig.json 文件中有一个 allowJs 选项，将其设置为 true 后即可支持在 TypeScript 代码中直接 import JavaScript 代码，并且具有一定的静态检查能力。以下是一个简单的例子：

首先新建配置文件 tsconfig.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es6",
    "rootDir": "src",
    "outDir": "dist",
    "sourceMap": true,
    "allowJs": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true
  }
}

然后新建 TypeScript 文件 src/main.ts：

import * as utils from './utils';

console.log(utils.add(1, 2));

新建 JavaScript 文件 src/utils.js：

exports.add = function (a, b) {
  return a + b;
};

执行 tsc 命令即可看到 dist 目录生成了对应的 dist/utils.js 和 dist/main.js 文件。如果去掉 allowJs 选项，则编译时会报错：

src/main.ts(1,24): error TS6143: Module './utils' was resolved to '/tmp/src/utils.js', but '--allowJs' is not set.

在实际项目中，可以先从一个 JavaScript 文件入手，将其后缀改为 .ts，然后再逐步更改项目下所有文件。

针对缺少 .d.ts 文件的问题，可以参照上文 编写 typings 声明文件 一节，自行编写必要的 .d.ts 文件。

而对于以上第三个问题，可以将变量类型声明为 any，这实际上是“取消”了针对该变量的静态检查，可以像 JavaScript 一样随意赋值。

当然，从 JavaScript 迁移到 TypeScript 还有很多细节，具体可以参考这篇文章：《从 JavaScript 迁移到 TypeScript》

在 Webpack 中使用

Webpack 是当前最流行的前端构建工具之一，要在 Webpack 中使用 TypeScript 可以通过 ts-loader 模块来实现。

首先全局安装 webpack 命令：
npm install webpack -g
然后执行以下命令安装 ts-loader 和 typescript 模块：
npm install ts-loader typescript --save-dev
新建 Webpack 配置文件 webpack.config.js：

module.exports = {
  entry: './app.ts',
  output: {
    filename: 'bundle.js',
  },
  resolve: {
    extensions: [ '.ts', '.tsx', '.js' ],
  },
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      }
    ],
  },
};

然后新建 TypeScript 配置文件 tsconfig.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es6",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true
  }
}

现在我们来新建 TypeScript 入口程序文件 app.ts：

function add(a: number, b: number): number {
  return a + b;
}

const v = [ 1, 2, 3, 4, 5, 6].reduce(add);
console.log(v);

即可执行 webpack 命令编译代码，其结果如下：

webpack

ts-loader: Using typescript@2.3.4 and /tmp/tsconfig.json
Hash: af9d997c471a89158065
Version: webpack 3.0.0
Time: 868ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.57 kB       0  [emitted]  main
   [0] ./app.ts 99 bytes {0} [built]

此时可见到生成了目标文件 bundle.js。

推荐一些开源项目，进一步学习TypeScript：

参考书籍

上一篇下一篇

猜你喜欢

热点阅读