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

Determining the size of a custom-typed array in Typescript

Ionic 2 faced an unresolved core-js dependency issue

What is the best way to transfer my static files to the desired output directory in a TypeScript Express application?

What is the process for transferring a Pulumi Output<T> to the container definition of a task in ECS?

How to access elements by their class name in Angular

Unable to locate any static exports within the TypeScript library bundle

An issue has occurred with error code TS2688: The type definition file for 'jquery' cannot be located. [Angular Application] --

What is the solution to fixing the Vetur/Vuelidate issue where the error message "'validate' does not exist in type 'ComponentOptions<Vue [etc.]" is displayed?

Transform leaflet marker plugin into Typescript format

Angular 2 Google Chart: Defining column type using TypeScript

Swapping out 'useResult' in graphql for Vue and Apollo: A step-by-step guide

In order to conceal the div tag once the animation concludes, I seek to implement React

Is it necessary to include a package.json file in the /src directory when creating a package?

An unknown error has arisen: "The page https://registry.yarnpkg.com/react-native-template-react-native-template-typescript cannot be located."

What is the process for including a selected-by option in a VIS network graph?

FilterService of PrimeNg

Position the text alongside the thumbnail rather than in the center

Is Typescript compatible with the AWS Amplify Express API?

Angular 7 - ALERT: Circular dependency identified:

tsconfig is overlooking the specified "paths" in my Vue project configuration