Not verifying the argument type in Typescript makes the function generic in nature

Question

Not verifying the argument type in Typescript makes the function generic in nature

I was initially under the impression that TypeScript would throw an error due to passing the incorrect number of elements in EntryPoints, but surprisingly, no error occurred.

function createContext<T>(defaultValue: T): T[] {
  return [defaultValue]
}

interface EntryPoints {
  parentSelector: string;
}
interface SomeType {
  entryPoints: EntryPoints[];
}
const defaultData = {
  entryPoints: [{
    parentSelector: '',
    foo: 1 // <-- error expected here
  }]
}
createContext<SomeType>(defaultData)

The same code without generics behaves as anticipated

function createContext<T>(defaultValue: T): T[] {
  return [defaultValue]
}

interface EntryPoints {
  parentSelector: string;
}
interface SomeType {
  entryPoints: EntryPoints[];
}
const defaultData: SomeType = {
  entryPoints: [{
    parentSelector: '',
    foo: 1 // <-- error thrown here
  }]
}
createContext(defaultData)

Playground

typescript

Answer 1

Answer №1

Encountering an object freshness problem, hence the usage of the additional key.

If you provide the object explicitly, it will undergo proper type checking:

function createContext<T>(defaultValue: T): T[] {
  return [defaultValue];
}

interface EntryPoints {
  parentSelector: string;
}

interface SomeType {
  entryPoints: EntryPoints[];
}

createContext<SomeType>({
  entryPoints: [
    {
      parentSelector: "",
      foo: 1 // <-- expected errors displayed here
    }
  ]
});

TypeScript Playground

Answer 2

Encountering an object freshness problem, hence the usage of the additional key.

If you provide the object explicitly, it will undergo proper type checking:

function createContext<T>(defaultValue: T): T[] {
  return [defaultValue];
}

interface EntryPoints {
  parentSelector: string;
}

interface SomeType {
  entryPoints: EntryPoints[];
}

createContext<SomeType>({
  entryPoints: [
    {
      parentSelector: "",
      foo: 1 // <-- expected errors displayed here
    }
  ]
});

TypeScript Playground

Answer 3

Answer №2

You are currently facing the distinction between

type checking when assigning a literal value to a type and
type checking when assigning a variable to a type.

Imagine we have two types. One of them has an extra property compared to the other.

type Foo = {
  foo: string;
};

type FooBar = {
  foo: string;
  bar: string;
};

When you assign an object literal to a type, extra properties are not permitted.

// Object literals can only define known properties,
// and 'bar' is not part of the 'Foo' type.
const foo: Foo = {
  foo: "foo",
  bar: "bar" // <---- 'bar' is not allowed in Foo.
};

However, when you assign a variable to a type, additional properties are accepted.

const fooBar: FooBar = {
  foo: "foo",
  bar: "bar" // <---- 'bar' is allowed for Foo
};

const foo: Foo = fooBar; // <---- no error shown

It is acceptable to assign fooBar to foo since fooBar is a variable, not an object literal, and can therefore contain unknown properties.

Answer 4

You are currently facing the distinction between

type checking when assigning a literal value to a type and
type checking when assigning a variable to a type.

Imagine we have two types. One of them has an extra property compared to the other.

type Foo = {
  foo: string;
};

type FooBar = {
  foo: string;
  bar: string;
};

When you assign an object literal to a type, extra properties are not permitted.

// Object literals can only define known properties,
// and 'bar' is not part of the 'Foo' type.
const foo: Foo = {
  foo: "foo",
  bar: "bar" // <---- 'bar' is not allowed in Foo.
};

However, when you assign a variable to a type, additional properties are accepted.

const fooBar: FooBar = {
  foo: "foo",
  bar: "bar" // <---- 'bar' is allowed for Foo
};

const foo: Foo = fooBar; // <---- no error shown

It is acceptable to assign fooBar to foo since fooBar is a variable, not an object literal, and can therefore contain unknown properties.

Not verifying the argument type in Typescript makes the function generic in nature

Answer №1

Answer №2

Similar questions

Unable to reinitialize the DataTable using Angular Datatable

What is the process for refreshing the dropdown menu in angular2 after modifying the data in the typescript file?

Is there a way to make the Sweetalert2 alert appear just one time?

Merging declarations fails to function properly following the release of the npm module

What is the reasoning behind leaving out wwwroot from tsconfig?

The manager encountered an issue while querying for "Photo" data: EntityMetadataNotFoundError - no metadata could be found

Encountering an Unknown Error when attempting to retrieve a response using Angular's httpClient with

Typescript: Declaring object properties with interfaces

The outcome of using Jest with seedrandom becomes uncertain if the source code undergoes changes, leading to test failures

The replacer argument of the JSON.stringify method doesn't seem to work properly when dealing with nested objects

Troubles encountered while attempting to properly mock a module in Jest

Steps for implementing a conditional rendering in your codeHere is a

What made the "in" operator not the best choice in this situation?

The 'component' property is not found in the 'IntrinsicAttributes' type in this context

Is there any way I can verify the invocation of signOut in this Jest test case?

Encountered error: Unable to locate module - Path 'fs' not found in '/home/bassam/throwaway/chakra-ts/node_modules/dotenv/lib' within newly generated Chakra application

Choosing to overload the plainToClass function may result in a type error

How to reference an array from one component to another in Angular 2

Array of options with specified data types in Props interface

aiplafrom struggles to establish a customer using Vite alongside Vue and TypeScript