Typescrip 学习-使用技巧归纳

公共

interface 和 Type 的区别

1. interface 在声明后可在原有已声明的字段之上，灵活扩展。但是Type一但声明之后就无法改变内部字段。

!,?, is, as，never 的用法

1. "?" 用于指定某个变量的值是可以为空的
2. "!" 强制使TS认为当前变量不可能为空
3. as 类型断言，强制将当前变量断言成指定类型
4. never 可以用于在代码中断言该部分代码永远不会执行到，在Ts检测期间，如果检查到该部分代码会被执行到则会提示错误，表示之前的代码逻辑中没有完整的检测所有可能发生的条件。
5. is 用于类型判断函数，判断单曲函数的类型是否是指定类型，会返回true或false，可以使用这个来代替设置boolean的返回值类型，使代码的可读性更强。

关于函数入参，声明函数入参的几种方式

函数类型表达式，直接在入参中声明函数类型

function greeter(fn: (a: string) => void) {
    fn("Hello, World");
}
function printToConsole(s: string) {
    console.log(s);
}
greeter(printToConsole);

声明附带属性的函数类型

type DescribableFunction = {
    description: string;
    (someArg: number): boolean;
};

function doSomething(fn: DescribableFunction) {
    console.log(fn.description + " returned " + fn(6));
}
function myFunc(someArg: number) {
    return someArg > 3;
}

myFunc.description = "default description";
doSomething(myFunc);

在函数中使用泛型

function firstElement<Type>(arr: Type[]): Type | undefined {
    return arr[0];
}

使用泛型通过extends 集成，来给类型设置约束，约束泛型的类型, 指定函数类型

function longest<Type extends { length: number }>(a: Type, b: Type) {
    if (a.length >= b.length) {
        return a;
    } else {
        return b;
    }
}
// longerArray is of type 'number[]'
const longerArray = longest([1, 2], [1, 2, 3]);
// longerString is of type 'alice' | 'bob'
const longerString = longest("alice", "bob");
// Error! Numbers don't have a 'length' property
const notOK = longest(10, 100);
// Error! Argument of type 'number' is not assignable to parameter of type '{ length: number; }'.

函数重写声明

一些javascript中同一个函数会被传入不同的入参数量和类型调用 声明重写时需要注意的事项，

1. 实现函数签名必须包括重写函数中的入参。实现函数中的入参无法获取到重写函数中的入参声明
2. 无法重复重写同一个相同的函数声明
3. 实现函数中的返回类型必须包括所有重写的函数类型，如果实现函数只返回number，重写函数中有string或其他的返回类型，将会检测报错。
4. 函数调用的时候只会一一的去寻找所有的重写函数，不会合并所有重写函数的入参。

// 重写函数声明
function makeDate(timestamp: number): Date;
// 重写函数声明
function makeDate(m: number, d: number, y: number): Date;
// 实现函数声明
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
    if (d !== undefined && y !== undefined) {
        return new Date(y, mOrTimestamp, d);
    } else {
        return new Date(mOrTimestamp);
    }
}
const d1 = makeDate(12345678);
const d2 = makeDate(5, 5, 5);
const d3 = makeDate(1, 3);
//error No overload expects 2 arguments, but overloads do exist that expect either 1 or 3 arguments.

在函数里面声明this

在函数的入参中第一个入参设置this: Type,

1. 箭头函数中无法使用this.

interface DB {
    filterUsers(filter: (this: User) => boolean): User[];
}
const db = getDB();
const admins = db.filterUsers(function (this: User) {
return this.admin;

});

函数 剩余入参，位置参数长度，使用...运算符，表示没有边界的入参

function multiply(n: number, ...m: number[]) {
    return m.map((x) => n * x);
}
// 'a' gets value [10, 20, 30, 40]
const a = multiply(10, 1, 2, 3, 4);

模板