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<number> = [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
    复制代码
  • 私信
  •