对象类型

基础使用

在 TypeScript 中，我们使用接口(Interfaces)来定义对象的类型。

简单例子：

interface Person {

name: string;

age: number;

}

let tom: Person = {

name: 'Tom',

age: 25

};

复制代码

上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。这样，我们就约束了 tom 的形状必须和接口 Person 一致。

定义的变量比接口少/多了属性是不允许的：

interface Person {

name: string;

age: number;

}

let tom: Person = {

name: 'Tom'

};

let tom: Person = {

name: 'Tom',

age: 25,

gender: 'male'

};

//都会报错哦

复制代码可选属性

但是有些时候，我们并不希望对象的形状完全遵守接口的定义(我们希望少/多些属性)：

所以我们会用到可选属性

interface Person {

name: string;

age?: number;

}

let tom: Person = {

name: 'Tom'

};

// 特征是打了个问号，意味着并不是必须的，而是可选的属性

//但是这个时候可以少属性，却不能多属性

复制代码任意属性

我们会使用任意属性来实现可以少属性/多属性

interface Person {

name: string;

age?: number;

[propName: string]: any;

}

let tom: Person = {

name: 'Tom',

gender: 'male'

};

复制代码

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集:

interface Person {

name: string;

age?: number;

[propName: string]: string; // 任意属性只包含了string类型

}

let tom: Person = {

name: 'Tom',

age: 25, // age的nubmer属性不在任意属性string内，会报错

gender: 'male'

};

复制代码只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：

interface Person {

readonly id: number;

name: string;

age?: number;

[propName: string]: any;

}

let tom: Person = {

id: 89757,

name: 'Tom',

gender: 'male'

};

tom.id = 9527;// 该属性只读，赋值操作会报错

复制代码数组类型

数组类型会对其的内容进行约束

「类型 + 方括号」表示法

let fibonacci: number[] = [1, 1, 2, 3, 5];

复制代码数组泛型

let fibonacci: Array = [1, 1, 2, 3, 5];

复制代码用接口(interface)表示数组

interface NumberArray {

[index: number]: number;

}

let fibonacci: NumberArray = [1, 1, 2, 3, 5];

复制代码类数组不能使用以上3钟形式去表示

function sum() {

let args: {

[index: number]: number;

length: number;

callee: Function;

} = arguments;

}

复制代码函数类型

函数声明

函数表达式

在 JavaScript 中，有两种常见的定义函数的方式如上。

一个函数有输入和输出，所以基本上就是把约束覆盖到函数的输入与输出上。

1. 传统的定义函数的输入与输出

// 函数声明的写法

function sum(x: number, y: number): number {

return x + y;

}

// 多参数 | 少参数 是不被允许的哦

// 函数表达式的写法，等式左边的可以被省略而完全又右边类型判断出来。

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {

return x + y;

};

复制代码

2. 用接口定义函数的输入与输出

interface SearchFunc {

(source: string, subString: string): boolean;

}

let mySearch: SearchFunc = function(source: string, subString: string) {

return source.search(subString) !== -1;

}

复制代码

- 函数的参数详情

前面我们提到，输入多/少的参数式不被允许的，这在接口定义中也存在着这个限制，同样的，我们也可以使用？来定义可选参数

！！！可选参数必须接在必需参数后面，否则会报错。如下是正确写法

function buildName(firstName: string, lastName?: string) {

if (lastName) {

return firstName + ' ' + lastName;

} else {

return firstName;

}

}

let tomcat = buildName('Tom', 'Cat');

let tom = buildName('Tom');

复制代码

参数也可以拥有默认值, TypeScript 会将添加了默认值的参数识别为可选参数,此时就不受「可选参数必须接在必需参数后面」的限制了：

function buildName(firstName: string, lastName: string = 'Cat') {

return firstName + ' ' + lastName;

}

let tomcat = buildName('Tom', 'Cat');

let tom = buildName('Tom');

复制代码

- 函数的重载

这个挺……无语的，感觉很没必要

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('');

}

}

复制代码本教程完全依赖于 ： https://ts.xcatliu.com/introduction/index.html

复制代码