TypeScript 面向对象（三）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

可选参数和默认参数

可选参数：函数在声明的时候，内部的参数使用了?进行修饰，那么就表示该参数可以传入也可以不用传入，叫可选参数 默认参数：函数在声明的时候，内部的参数有自己的默认值，此时的这个参数就可以叫默认参数

    const getFullName =  function (firstName: string = "Errol", lastName?: string) {
        if(lastName){
            return firstName+"-"+lastName
        }else {
            return firstName
        }
    }

    console.log(getFullName())//Errol
    console.log(getFullName('King'))//King
    console.log(getFullName('Errol','King'))//Errol-King

剩余参数

剩余参数是放在所有函数声明中所有参数的最后

	function showMsg(str:string,...args:string[]) {
        console.log(str)//a
        console.log(args)//['b', 'c', 'd']
    }
    showMsg('a','b','c','d')

重载

函数重载：函数名字相同，函数参数及个数不同

我们通过下面的需求来了解重载的意义： 现在我们定义一个 add 函数，它可以接收2个 string 类型的参数进行拼接，也可以接收2个 number 类型的参数进行相加

function add(x: string | number, y: string | number) {
        if (typeof x === 'string' && typeof y === 'string') {
            return x + y;//字符串拼接
        } else if (typeof x === 'number' && typeof y === 'number') {
            return x + y;//数字相加
        }
    }

    console.log(add('Errol','King'))
    console.log(add(1,2))
    //如果传入的是非法的数据，ts应该提示错误
    console.log(add('Errol',1))
    console.log(add(2,'King'))

我们可以看到当传入两个字符串或两个数字的时候是正常的，但如果参数一个传入字符串，一个传入数组会打印 undefined，这不是我们预想的结果，我们希望在编码阶段就给出提示，这就用到了函数重载

我们增加函数重载声明，当我们再传入一个字符串和一个数字时，编辑器会给我们提示

泛型

泛型：在定义函数、接口、类的时候不能预先确定要使用的数据的类型，而是在使用函数、接口、类的时候才能确定数据的类型

function f(a: number): number {
    return a;
}

//在定义函数或类时，类型不明确时，可以使用泛型
function f1<T>(a: T): T {
    return a;
}

//可以直接调用泛型的函数
f1(10);
f1<string>("10");

//可以有多个泛型
function f2<T, K>(a: T, b: K): T {
    console.log(a);
    return a;
}

f2<number, string>(123, "a");

//可以限制泛型的类型，泛型约束
interface Inter {
   length: number;
}
//T extends Inter表示泛型T必须是Inter的实现类（子类）
function f3<T extends Inter>(a: T): number {
	return a.length;
}

console.log(f3({length: 10}));//10
console.log(f3("hello"));//5
//泛型类
//在定义类时, 为类中的属性或方法定义泛型类型 在创建类的实例时, 再指定特定的泛型类型
class GenericNumber<T> {
  zeroValue: T
  add: (x: T, y: T) => T
}

let myGenericNumber = new GenericNumber<number>()
myGenericNumber.zeroValue = 0
myGenericNumber.add = function(x, y) {
  return x + y 
}

let myGenericString = new GenericNumber<string>()
myGenericString.zeroValue = 'abc'
myGenericString.add = function(x, y) { 
  return x + y
}

console.log(myGenericString.add(myGenericString.zeroValue, 'test'))
console.log(myGenericNumber.add(myGenericNumber.zeroValue, 12))

内置对象

内置对象，是TS/JS自带的一些基础对象，提供了TS开发时所需的基础或必要的能力。我们要学内置对象中的属性或方法。怎么学呢?我们可以查文档：JavaScript 标准内置对象