typescript基础篇(二)

117 阅读3分钟

这是我参与8月更文挑战的第2天,活动详情查看: 8月更文挑战

定义函数:4种方式

1function add1(x: number,y: number){
    return x + y;
}
2、变量
let add2: (x: number,y:number) => number;
3、接口
interface add3 {
    (x: number,y:number): number
};
4、类型别名
type add4 = (x: number,y: number) => number;
具体函数如下:
let add: add3 = (a,b) => a + b;

混合类型 的接口:

interface Lib {
    (): void;
    version: string;
    doSomething(): void;
}
这样,一个混合类型的接口定义完成。
下面,我们来实现这个接口。定义变量lib, 指定其类型为Lib;
let lib: Lib = () => {}; // 这时,开始飘红:Type '() => void' is not assignable to type 'Lib'.  Property 'version' is missing in type '() => void'


那么,可以用类型断言:
let lib: Lib = (() => {}) as Lib;

lib.version = '1.0';
lib.doSomething = () => {}

这样,一个接口已经实现了,但是他的问题是,对全局暴露了一个变量 lib ,他是一个单例,如果我们想创建多个lib,我们封装一个函数。

function getLib () {
    let lib: Lib = (() => {}) as Lib;
    lib.version = '1.0';
    lib.doSomething = () => {};
    return lib;
}
这样,我们就能创建多个实例了。
let lib1 = getLib();
lib1();
lib1.doSomething();
let lib2 = getLib();

聊聊 ts 中的函数。变量、接口、类型别名只是函数类型的定义,而并没有具体的实现,真正调用的时候,我们要书写这个函数体。js中对函数参数的个数是没有限制的,而在ts中,形参和实参必须一一对应。

比如 :

 add1(1) // 飘红!!会提示少了一个参数。

 add(1,2,3) // 飘红!!提示只有两个参数。

这时候,可选参数来咯。如下:

function add5 (x:number,y?:number) {
    return y ? x+y : x;   
}
// y就是可选参数,用 ?: 定义。这里要注意下,可选参数必须位于必选参数之后。
如下,这样是不行的!!
// function add5 (x:number,y?:number, z: number) {
//     return y ? x+y : x;   
// }

我们还可以函数参数定义默认值

function add6(x: number,y = 0,z: number, q = 1) {
    return x + y + z + q;
}
注意:在必选参数前,默认参数是不可以省略的!!必须传入默认的undefined,来获取默认值。
add6(1, undefined, 3) // 输出5,如果这里不传undefined,就会把3赋值给y;

以上参数都是固定的,如果不固定,可以使用剩余参数。

function add7 (x: number, ...rest: number[]) {
    return x + rest.reduce((pre, cur) => pre + cur);
}
add7(1,2,3,4,5) // 输出15

函数重载

含义:两个函数,如果名称相同,参数类型或者参数个数不同,那么就实现了一个函数重载。

好处:不用为相似功能的函数,选用不同的函数名称,增强了可读性。

ts 中,需要我们先定义好一系列的函数声明,比如:

我们先定义一个函数声明,

function add8 (...rest: number[]): number;
再定义一个
function add8 (...rest: string[]): string;
再定义一个
function add8 (...rest: any[]): any{
    let first = rest[0];
    if(typeof first === 'string'){
        return rest.join('');
    }
    if(typeof first === 'number'){
        return rest.reduce((pre,cur) => pre + cur)
    }
} ;
执行:
console.log(add8(1,2,3,4)) // 6
console.log(add8('a','b','c')) // abc

ts 编译器在处理重载的时候,会去查询一个重载的列表,并且会尝试第一个定义,如果匹配,就用这个函数定义,如果不匹配,就接着往下查找,所以,我们要把最容易匹配的函数定义写在最前面。

ts 中的类

ts 的类覆盖了es6的类,同时,也引入了其他的一些特性。

1、类的继承和成员修饰符