Type aliasing - weird behavior | TypeScript Community | Page 1

blissful cairn Jan 28, 2024, 6:03 PM

#

I've noticed the following behavior in typescript that seems like a bug. If it is not, what is the reason aliasing the type changes things?

type Item = { id: number };

type Container<T extends Record<string, Item>> = {
  name: string,
  items: T,
  pickedItemKeys?: (keyof T)[],
}

function container<T extends Record<string, Item>>(
  options: Container<T>
): Container<T> {
  return {
    ...options
  }
}

const a = container({
  name: 'test',
  items: {
    a: { id: 1 },
    b: { id: 2 },
  },
  pickedItemKeys: ['a']
});

// here's the weird part

function consumeContainer(container: Container<Record<string, Item>>) {
  Object.entries(container.items).forEach(([k, v]) => console.log(v.id));
}

// does not compile - it's the pickedItemKeys that's setting it off
consumeContainer(a);

// but if I define a type alias for the type used as the argument in the above fn
type UntypedContainer = Container<Record<string, Item>>;

function consumeContainer2(container: UntypedContainer) {
  Object.entries(container.items).forEach(([k, v]) => console.log(v.id));
}

// it works fine ¯\_(ツ)_/¯
consumeContainer2(a);

glossy apex Jan 28, 2024, 6:51 PM

#

but if I define a type alias for the type used as the argument in the above fn
it works fine ¯_(ツ)_/¯
it doesn't

slender pollenBOT Jan 28, 2024, 6:52 PM

#

ascor8522#0

Playground Link

Preview:```ts
interface Item {
id: number
}

interface Container<T extends Record<string, Item>> {
name: string
items: T
pickedItemKeys?: (keyof T)[]
}

function container<T extends Record<string, Item>>(
options: Container<T>
): Container<T> {
r
...```

glossy apex Jan 28, 2024, 6:52 PM

#

!ts

slender pollenBOT Jan 28, 2024, 6:52 PM

#

interface Item {
    id: number;
}

interface Container<T extends Record<string, Item>> {
    name: string;
    items: T;
    pickedItemKeys?: (keyof T)[];
}

function container<T extends Record<string, Item>>(options: Container<T>): Container<T> {
    return {
        ...options,
    };
}

const a = container({
    name: 'test',
    items: {
        a: { id: 1 },
        b: { id: 2 },
    },
    pickedItemKeys: ['a'],
});

// here's the weird part

function consumeContainer(container: Container<Record<string, Item>>) {
    Object
        .entries(container.items)
//       ^^^^^^^
// Property 'entries' does not exist on type 'ObjectConstructor'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2017' or later.
        .forEach(([k, v]) => console.log(v.id));
//                 ^  ^
// Binding element 'k' implicitly has an 'any' type.
// Binding element 'v' implicitly has an 'any' type.
}
consumeContainer(a);
//               ^
// Argument of type 'Container<{ a: { id: number; }; b: { id: number; }; }>' is not assignable to parameter of type 'Container<Record<string, Item>>'.
//   Type 'Record<string, Item>' is missing the following properties from type '{ a: { id: number; }; b: { id: number; }; }': a, b

type UntypedContainer = Container<Record<string, Item>>;
function consumeContainer2(container: UntypedContainer) {
    Object
        .entries(container.items)
//       ^^^^^^^
// Property 'entries' does not exist on type 'ObjectConstructor'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2017' or later.
        .forEach(([k, v]) => console.log(v.id));
//                 ^  ^
// Binding element 'k' implicitly has an 'any' type.
// Binding element 'v' implicitly has an 'any' type.
}
consumeContainer2(a);
//                ^
// Argument of type 'Container<{ a: { id: number; }; b: { id: number; }; }>' is not assignable to parameter of type 'UntypedContainer'.

glossy apex Jan 28, 2024, 6:53 PM

#

(ignore the error with Object.entries, the default setting of the bot are kinda outdated)

#

but you can see an error happens with both invocations

#

both having the same source/meaning: Container<{ a: { id: number; }; b: { id: number; }; }> not being assignable to Container<Record<string, Item>>

#

@blissful cairn also, your container function doesn't do "anything", but makes it harder for TS to keep track of the exact type of the object
if you remove it and simply call your consumeContainer function with the raw object, it will work just fine

slender pollenBOT Jan 28, 2024, 7:02 PM

#

ascor8522#0

Playground Link

Preview:```ts
// @target: esnext

interface Item {
id: number;
}

interface Container<T extends Record<string, Item>> {
name: string;
items: T;
pickedItemKeys?: (keyof T)[];
}

const a = {
name: 'test',
items: {
a: { id: 1 },
b: { id: 2 },
...```

glossy apex Jan 28, 2024, 7:02 PM

#

!ts

slender pollenBOT Jan 28, 2024, 7:02 PM

#


interface Item {
    id: number;
}

interface Container<T extends Record<string, Item>> {
    name: string;
    items: T;
    pickedItemKeys?: (keyof T)[];
}

const a = {
    name: 'test',
    items: {
        a: { id: 1 },
        b: { id: 2 },
    },
    pickedItemKeys: ['a'],
};

function consumeContainer(container: Container<Record<string, Item>>) {
    Object
        .entries(container.items)
        .forEach(([k, v]) => console.log(v.id));
}
consumeContainer(a);

type UntypedContainer = Container<Record<string, Item>>;
function consumeContainer2(container: UntypedContainer) {
    Object
        .entries(container.items)
        .forEach(([k, v]) => console.log(v.id));
}
consumeContainer2(a);

glossy apex Jan 28, 2024, 7:03 PM

#

no errors
it not any less type-safe either, since if the a variable were to be a different type, you'd get an error when trying to call consumeContainer

#

only difference is that you don't mess with generics and break the exact type of the object

blissful cairn Jan 28, 2024, 7:27 PM

#

glossy apex > but if I define a type alias for the type used as the argument in the above fn...

In the playground link you've posted, the Container type alias declaration was changed to an interface declaration. It's interesting that it alters the behavior of the type checking. That said, I will stand by my original code example, where the consumeContainer2(a); function call does not cause a type checking error. I would like to learn why this is happening. The container function is there to help with type inference of the passed in argument, and AFAIK is a common pattern used in typescript. Here's a ts playground link for my code example: https://www.typescriptlang.org/play?#code/C4TwDgpgBAksEFsoF4oG8oEsAmAuKAdgK4IBGEATlAL4DcAUPaJFAMID2BwAhpgZQB4AKlAgAPeAWwBnKACUIAY3YVsA6cAp8A5gBpY8BAD4jKdPSiFuCCPg1aCei1kPT8Q3c7CZFAawjYcIgA0hAg0gD8+AAU-iDsAGZQQgCUANoAup7UjAlEBIrAmJxQyly8-BTCohIQUrIKyqrqmjr6QcZG0c7sYEWcbmycPHyCQkb0Kfgc5aNV4+aWFBDARBQEi5ZQAHS7vf0E0s45OfRlGlDcZmUjldFozgTWtlAA5PAar56WmK74D1tLv8sHgoABGGjfLakYE4fAAJkhxyh3j8AQ6oXC+DSr24rwy9GoKQY9AA9KSoAALSgQV6yYDUqAAdwgmFUUDA3AowFy+UKxQ25xIEBmt0o0RuFUo02GUqqjRUansbQMiBMKU2AHlSAArJTAbZ1VoQaQS2Vzba-RDSFLbBIqACi3EUlOi0TSvn0ADcMhrkKZzuwADYQbZB9jaaJey3YFLEwmMclQbDsE2EdjAUrsBDeENQAC0LjpUAZ0FR-kChkx9Mp3GAxekKyKjhcUESCTOA2Forl0W48bJFNIREzmCSMGTEASo0uJfA0G4Qcw3Fk9qopbnLCIjewlxrC4o2mFXCwGw33FI7C90ASBCY86gAFUuPPsD25mZ35UBArmsrHO0hgmCSeQFAcWaHN25qVPCZqzJU+DPswARfpQGoAlA2p6oUhpcFoJpwWKFCWq4tprk6Lpuh63q+igAYDMGobhpG0Y4HGDCnEmvzMiovirjOAD1AA6AD60SACMMKQiaSAmdpBNioRQsH9rQQA

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

slender pollenBOT Jan 28, 2024, 7:27 PM

#

@blissful cairn Here's a shortened URL of your playground link! You can remove the full link from your message.

voightkampff#0

Playground Link

Preview:```ts
type Item = {id: number}

type Container<T extends Record<string, Item>> = {
name: string
items: T
pickedItemKeys?: (keyof T)[]
}

function container<T extends Record<string, Item>>(
options: Container<T>
): Container<T> {
return {
...options,
...```

vagrant meadow Jan 28, 2024, 7:31 PM

#

I can confirm that this error happens to me as well.

nimble cape Jan 28, 2024, 8:25 PM

#

By not using a generic parameter though, both consumeContainer function are broken as they allow invalid Containers.

#

Container<Record<string, Item>> means that your type is now more or less:

type Container = {
  name: string,
  items: {[k: string]: Item },
  pickedItemKeys?: string[],
}

so your consumerContainer functions now allow:

consumeContainer({
  name: 'test',
  items: {
    a: { id: 1 },
    b: { id: 2 },
  },
  pickedItemKeys: ['Hello', 'World']
});

nimble cape Jan 28, 2024, 8:43 PM

#

As for your alias problem, I've seen it before.. it's related to evalation order in the TS compiler. They're usually not a problem but in some rare cases, they can be.

#

Here's a classic example:

slender pollenBOT Jan 28, 2024, 8:45 PM

#

.rcyr#0

Playground Link

Preview:```ts
type MyJSONType =
| string
| number
| boolean
| null
| MyJSONType[]
| {[k: string]: MyJSONType}

#Type aliasing - weird behavior