TS的对象类型、数组类型、函数类型

• 对象类型

• 基础使用

在 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;// 该属性只读，赋值操作会报错

• 数组类型

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

1. 「类型 + 方括号」表示法

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

2. 数组泛型

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

3. 用接口(interface)表示数组

interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

4. 类数组不能使用以上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