Question

我创建了2个通用函数，这些函数将接受任何对象的数组。第一个函数将采用属性作为要与给定对象匹配的字符串和字符串值。第二个函数将返回给定对象的最后一个id。

// First data
const data = [
    {
        id: 1,
        name: 'John',
    },
    {
        id: 2,
        name: 'Doe',
    },
    {
        id: 3,
        name: 'Tim',
    },
];
// Second data
const data2 = [
    {
        id: 1,
        title: 'John',
    },
    {
        id: 2,
        title: 'Doe',
    },
    {
        id: 3,
        title: 'Tim',
    },
];


export const matchStr = <T>(key: string, val: string, data: Array<T>): string => {

    if (Array.isArray(data) && data.length > 0) {
        const result = data.find((obj) => {
            return obj[key] === val;
        });
        // If not undefined
        if (result) {
            return `${key} value is matched.`;
        } else {
            // Return value
            return val;
        }
    }
    return val;
};


export const getLastId = <T>(data: Array<T>): number => {
    if (Array.isArray(data) && data.length > 0) {
        // Create an array of Id's of all items
        const idsArray: number[] = [];
        data.forEach((obj) => {
            idsArray.push(obj.id);
        });
        // Return last element id
        return idsArray[data.length - 1];
    } else {
        return 1;
    }
};


const resultSet1 = matchStr('name', 'John', data);
const resultSet2 = matchStr('name', 'George', data2);

console.log(resultSet1);
console.log(resultSet2);

const resultId = getLastId(data);

console.log(resultId);

但是以下几行给我一个错误：

关于第一个功能：

obj[key] === val

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'unknown'. No index signature with a parameter of type 'string' was found on type 'unknown'.

关于第二个功能：

idsArray.push(obj.id)

TS2339: Property 'id' does not exist on type 'T'.

出了什么问题？ Live link。

Answer 1

一切都很好。您已声明该函数应接受类型T，但TypeScript不知道该T类型是什么。当然，不能指望此T具有属性ID。

要解决此问题，您可以下一步：

创建界面：

interface IId {
    id: number;
}

更改函数声明以指示打字稿应使用具有id的内容：

export const getLastId = <T extends IId>(data: Array<T>): number => {
    if (Array.isArray(data) && data.length > 0) {
        // Create an array of Id's of all items
        const idsArray: number[] = [];
        data.forEach((obj) => {
            idsArray.push(obj.id);
        });
        // Return last element id
        return idsArray[data.length - 1];
    } else {
        return 1;
    }
};

现在一切正常。

UPD：

取决于TS版本的错误

返回obj [key] === val;

仍然可能发生。要解决此问题，您至少有两个选择：

再声明一个界面：

interface IIndexer {
    [key: string]: any;
}

再次重新声明功能：

export const matchStr = <T extends IId & IIndexer>(key: string, val: string, data: Array<T>): string => {

或将obj强制转换为函数内部的任何

const result = data.find((obj: any) => obj[key] === val;);

最后一个选项更简单，但是它不是类型安全的，因此我不建议您使用它，因为代码应该是可维护的

希望这会有所帮助。

泛型函数，其参数为任何对象的数组

1 个答案: