TypeScript 说不存在交集属性

Question

I have a variable that starts out as one type, IPerson[] , but after being mapped a couple of times, should have an _id property added to it, so like Array<IPerson & IWithId> . However, in the fourth-to-last-line, tyring to print the _id property gives me a TS error, even though the property does exist and the logging works like I'd expect, printing the three properties fname , lname , and _id .

I thought that maybe I need to re-cast it somehow, like

mapped = collection.map(mapperB) as Array<IPerson & IWithId>

That didn't work, thankfully as it seems super verbose to have to do that for a variable that imo should already be getting its type based on the return type of the mapperB function.

let _id = 0;
interface IPerson { 
    fname: string;
    lname: string;
}

interface IWithId { 
    _id: number;
}

function getNumber() { 
    return _id++
}

async function getData(json: string): Promise<IPerson[]> { 
    return JSON.parse(json)
}

function mapperA(entry: IPerson): IPerson { 
    return {
        ...entry,
        lname: entry.lname.toUpperCase()
    }
}
function mapperB(entry: IPerson): IPerson & IWithId { 
    const _id = getNumber();
    return {
        ...entry,
        _id
    } 
}
async function main() {
    const json = `[{"fname":"john","lname":"doe"},{"fname":"jane","lname":"doe"}]`    
    const collection = await getData(json)
    let mapped = collection.map(mapperA)
    mapped = collection.map(mapperB)
    console.log(mapped[0]._id); // Property '_id' does not exist on type 'IPerson'.
    return mapped;
}

main().then(console.log)

I can get this to work if I use another variable to hold the value of the second map function, ie const mapped2 = collection.map(mapperB) but I'm curious why I can't use my original variable?

Why doesn't typescript infer the value of mapped from the explicitly stated return value of mapperB ? Can I make it do this for me?

TypeScript Playground

Answer 1

TypeScript infers the type of mapped from it's first assignment (initialization), so it's IPerson[] :

In TypeScript, there are several places where type inference is used to provide
type information when there is no explicit type annotation. For example, in this
code

> let x = 3;

The type of the x variable is inferred to be number. This kind of inference takes place
when initializing variables and members, setting parameter default values, and 
determining function return types.

Taken from "Type inference" chapter from the TypeScript handbook (I linked it's upcoming 2.0 beta version), I recommend reading this.

The second assignment then doesn't extend the definition, but is no error either because objects can have additional properties. When you're accessing _id , you get an error because TypeScript cannot be sure from the initially inferred type that the array entries also contain _id properties.

Note: casting with mapped = collection.map(mapperB) as Array<IPerson & IWithId> gives TypeScript no additional information, so the outcome is the same.

---

To ease reasoning about types, I personally recommend assigning transformed values to new variables (as you proposed with const mapped2 = collection.map(mapperB) . And choose expressive variable names (with tradeoff of becoming lengthy, but this shouldn't happen that often if you keep your function complexity small enough):

const filteredList = list.filter(...);
const filteredListWithIds = filteredList.map(...)

---

Not directly related, but an error: Array.prototype.map() returns a new array . The value of mapped from let mapped = collection.map(mapperA) is lost immediately as it s being overwritten at the next line during mapped = collection.map(mapperB)`. Maybe a mistake when creating the playground example based on your real code?

Answer 2

Yes, you cannot change the type of the variable in typescript once it is assigned.

As mentioned in the above example you can use different variables. But as per your concern, you want to use simply one variable you can call both mappers by chaining them one after the other.

Typescript supports the chaining of function calls in very good manner. So you can replace your last two lines of code by the single line as below:

let mapped = collection.map(mapperA).map(mapperB)

I hope you find this helpful. And you can resolve your error.

Answer 3

Here the problem is in following lines:

let mapped = collection.map(mapperA) // here you declare mapped with the type IPerson[]
mapped = collection.map(mapperB) // here mapped already has a type and can't be changed
console.log(mapped[0]._id); // here you try to access a property IPerson doesn't have

You can try to solve this either chaining the mappers as per other answers or coercing the two mappers in only one:

function mapper(entry: IPerson): IPerson & IWithId {
    const _id = getNumber();

    return {
        ...entry,
        _id,
        lname: entry.lname.toUpperCase()
    }
}

// later in your main function
let mapped = collection.map(mapper); // here mapped is declared as (IPerson & IWithId)[]
console.log(mapped[0]._id); // now you can access any IWithId property

Hope this helps.