#1 typescript基础知识

一.interface

一般情况: 不允许多属性也不允许少属性

interface Person {
  name: string,
  age: number
}

let james: Person {
  name: 'james'
} // 错误， 少了age属性

let james: Person {
  name: 'james'
  age: 27,
  job: 'bricks diliver'
} // 错误， 多了属性

如果想要某个属性可选，可用 ?

interface Person {
  name: string,
  age?: number // 变为可选
}

let james: Person {
  name: 'james'
} // 没毛病 老铁

let james: Person {
  name: 'james'
  age: 27,
  job: 'bricks diliver'
} // 错误， 可以少属性， 多了属性依然报错

任意属性使用 [propName: string]: any（当然这里这个属性限制为了字符串）

interface Person {
  name: string,
  age?: number,
  [propName: string]: any
}

let james: Person {
  name: 'james'
  age: 27,
  job: 'bricks diliver'
} // ok

只读属性使用 readonly: 只读的约束在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候

interface Person {
  readonly id: number,
  name: string,
  age?: number,
  [propName: any]: any;
}

let james: Person = {
  id: 10086, // 初始化赋值
  name: 'james'
} // ok

james.id = 10010; // 错误，只读属性不能赋值

二.数组和类数组

数组的表示方式有以下几种:

// 普通形
let arr: number[] = [1, 2, 3]
let arr: (number | string)[] = [1, 'james']

// 泛型 Array<elemType>
let genericArr: Array<number> = [1, 2, 3]

// 使用接口描述数组
interface NumberArr {
  [index: number]: number // 表示只要 'index' 的类型是 number, 那么值的类型必须是 number
}

let someNumArr: NumberArr = [1, 2, 3]

类数组不是数组类型，一般类数组都有自己的接口类型，如 IArguments, NodeList, HTMLCollection等等

function sum() {
  let args: IArguments = arguments;
}

三.函数类型

一般写法:

// 写法1
function sum(a: number, b: number): number {
  return a + b;
}
// 传入的参数过少或过多或类型不符都会报错
sum(10) // error
sum(10, 20, 30) // error

let sum = function(a: number, b: number): number {
  return a + b;
}

函数表达式

let mySum: (a: number, b: number) => number = function(a: number, b: number): number {
  return a + b;
}

// 或
let mySum: (a: number, b: number) => number = function(a, b) {
  return a + b;
}

在typescript中 => 用来表示函数的定义，左边是输入类型，右边是输出类型。注意这点和ES6的箭头表达式的区别

参数默认值

ES6中可以直接写默认值，ts写法为:

function getFullName(firstName: string, lastName: string = 'William'): string {
  return firstName + ' ' + lastName;
}

rest操作符 ...
ES6语法类似:

function push(arr: any[], ...items: any[]) {
  items.forEach(function(item) {
    arr.push(item);
  });
}

let a = [];
push(a, 1, 2, 3);

函数重载

function reverse(x: number | string): number | string {
  if (typeof x === 'number') {
    return Number(x.toString().split('').reverse().join(''));
  } else if (typeof x === 'string') {
    return x.split('').reverse().join('');
  }
}

这样写有一个缺点，就是表达不够精确，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。

下面是重载的写法:

// Typescript会优先从最前面的函数定义开始匹配
// 所以多个函数定义如果由包含关系，需要优先把精确的定义写在前面。
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
  if (typeof x === 'number') {
    return Number(x.toString().split('').reverse().join(''));
  } else if (typeof x === 'string') {
    return x.split('').reverse().join('');
  }
}

四.类型断言 Type Assertion

类型断言用于绕过编译器的类型推断，手动指定一个值的类型

语法：

<Type>variable

// 或

value as type (React的JSX语法只能使用这种)

例子: 比如将一个联合类型的变量指定为一个更加具体的类型

当TypeScript不确定一个联合类型的变量到底是哪个类型时，我们只能访问联合类型的公共方法和属性

function getLength(something: string | number): number {
  return something.length;
} // 报错，number类型不存在length属性

而有时候确实需要在还不确定类型的时候就访问其中一个类型的属性或方法，比如:

function getLength(something: string | number): number {
  if (something.length) {
    return something.length;
  } else {
    return something.toString().length;
  }
} // 报错 number类型不存在length属性

这个时候我们可以使用类型断言，将'something' 断言为 'string'

function getLength(something: string | number): number {
  if ((<string>something).length) { // (<string>something)
    return (<string>something).length;
  } else {
    return something.toString().length;
  }
}

// 或
function getLength(something: string | number): number {
  if ((something as string).length) { // (<string>something)
    return (something as string).length;
  } else {
    return something.toString().length;
  }
}

类型断言不是类型转换，断言为一个不存在的类型是会报错的

function toBoolean(something: string | number): number {
  return <boolean> somethins;
} // 错误 Type 'string | number' cannot be converted to type 'boolean'

五.声明文件

当使用第3方库的时候，我们需要引用它的声明文件

比如想引入jQuery

$('#name')
// 或
jQuery('#name')

但是TypeScript中，并不知道 $或jQuery是什么东西，直接使用会报错

我们需要使用 declare 关键字来定义它:

// declare 定义的类型只会用于编译时的检查，编译结果中会被删除。
declare var jQuery: (string) => any;

jQuery('#foo') // ok

声明文件

通常我们会把类型声明放到一个单独的文件中，约定文件以 .d.ts 为后缀:

// jQuery.d.ts
declare var jQuery: (string) => any;

然后在使用到的文件的开头，用 /// 表示引入文件

/// <reference path="./jQuery.d.ts" />

jQuery('#name');

第3方声明文件

当然jQuery已经有第三方帮我们定义好了，我们可以直接安装使用， TypeScript推荐使用 @types 来管理

@types 的使用方式也很简单:

npm install @types/jQuery --save-dev

可以使用 TypeSearch来搜索需要的声明文件

六.内置对象

TypeScript内置定义很多都定义在TypeScript核心库中

ECMAScript 内置对象 Boolean, Error, Date, RegExp 等

let b: Boolean = new Boolean(1)
let r: RegExp = /[a-z]/

DOM, BOM内置对象：Document, HTMLElement, Event, NodeList*等

let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent)) {
  // ...
}

用TypeScript写Node.js

Node.js不是内置对象的一部分，如果想要用Typescript写，则需要引入第三方声明

npm i -D @types/node

总结

TypeScript的写法对于有后端基础的应该很熟悉，这里只是做基本的概念介绍。对我而言，断言和声明文件部分比较陌生，另外第三方声明文件的方式也比较陌生。