What is the reason behind TypeScript not throwing an error when the last name is a number?

Currently exploring typescript and enjoying the type checking it provides. I'm curious as to why tsc is unable to detect that lastName is a number in this specific case. Any insights would be appreciated, thank you.

class Student {
  constructor(public firstName, public lastName ) {
  }
}

interface Person {
  firstName : string;
  lastName : string;
}

function greeter(person : Person) {
  return "hello, " + person
}

var user = new Student("Jane", 123)

console.log('user', user)
console.log('user.lastName is', typeof user.lastName)

console.log(greeter(user))

Answer №1

Within your Student class, both properties are implicitly assigned the type any:

class Student {
  constructor(public firstName, public lastName) {
  }
}

This code is essentially equivalent to:

class Student {
  public firstName: any;
  public lastName: any;
  // Constructor goes here
}

As a result, instances of the Student class can be treated as instances of Person because any is compatible with string.

An instance named user can even be created with a string and a number due to the use of any:

let user = new Student("Jane", 123)

However, this could lead to errors like in the following example:

let p: Person;
p = user; // error-prone code

Using any essentially turns off type checking, so exercise caution when utilizing it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the appearance of a heading through CSS upon being clicked

My goal is to create a feature that highlights the border of a selected box in a different color. I attempted to achieve this by using classes in the TypeScript file and utilizing document.getElementById within the selectFlight method, which is called in t ...

What prevents us from returning Observable.of(false) in the catch block within the canActivate function?

In order to protect certain routes (admin), I utilize the canActivate feature. In this scenario, I employ an authGuard class/function: The issue arises when attempting to return an observable of boolean using: return Observable.of(false);. This approach d ...

The data type 'string' cannot be assigned to the data type 'undefined'

These are the different types available: export type ButtonProperties = { style?: 'normal' | 'flat' | 'primary'; negative?: boolean; size?: 'small' | 'big'; spinner?: boolean; } export type ...

Error encountered when attempting to utilize Path Aliases in Angular 11.tsconfig

Currently, I am working on a project using Angular 11 and aiming to utilize short imports like import {smthg} from '@common' instead of import {smthg} from '../../../common' However, I keep encountering errors in IDEA: TS2307: Cannot f ...

Having trouble iterating over fields of an interface in TypeScript?

I am currently facing an issue while trying to loop through the keys of an object that contains an interface. TypeScript seems to be unable to recognize the type of the key. interface Resources { food?: number water?: number wood?: number coal?: n ...

Create a function that accepts a class as a parameter and outputs an object of that class

I am working on an instantiator function that generates an instance of a provided class: declare type ClassType = { new (): any }; // known as "ParameterlessConstructor" function createInstance(constructor: ClassType): any { return new constructor(); ...

Issue with extending mongoose.Document properly in NodeJS and TypeScript using a custom interface with mongoose

I recently started learning Typescript and tried to follow this guide to help me along: After following the guide, I implemented the relevant code snippets as shown below: import { Document } from "mongoose"; import { IUser } from "../interfaces/user"; ...

Is there a way in Typescript to filter for the first instance of a unique object in an array of objects?

Having an array of JSON objects like this, the task is to iterate through it and retrieve the first occurrence of 'appname', such as 'app1' or 'app2', and store the entire object for each... myArray[ { ...

Is it possible for transclusion to display content from external sources using *ngIf and <ng-content>?

In my Angular4 Project, I have come across this snippet of code: <div class="divider"></div> <ng-content select=".nav-toggle"></ng-content> Now, I am trying to figure out a way to display the divider only when there is content pr ...

How can I conceal the word "null" within an Angular 2 input field?

Whenever there is a null value in the JSON, it ends up displaying in the input field. How do I go about hiding it so that only the name shows up instead? <div> <input type="hidden" name="roleUserHidden-{{roleIndex}}" #role ...

Guide on validating multiple preselected checkboxes using Angular 8 reactive forms

I have a problem with validating checkboxes in my Angular application. The checkboxes are generated dynamically from an array using ngFor loop, and I want to make sure that at least one checkbox is selected before the form can be submitted. The validatio ...

The issue with zone.js remains unresolved

Since updating to the most recent version of Angular cli, I have encountered an error when trying to run ng serve: ./node_modules/@angular-devkit/build-angular/src/webpack/es5-polyfills.js:106:0-37 - Error: Module not found: Error: Can't resolve &apo ...

Copying properties from object A to a new object B that extends A using TypeScript used to work on older versions of the language, but now it seems to be broken

In my scenario, I have a class B that is an extension of class A. My intention is to duplicate all the properties of class A onto class B, considering that B already has all the properties (and more) present in A. For instance: class TypeA { propX: nu ...

Adding dropdowns to divs in Angular applications

Currently, I am attempting to integrate a dropdown feature into a div element. The HTML code for the dropdown is generated dynamically within the code. When clicking on the dropdown button, it appears functional but unfortunately, the dropdown itself does ...

What is the recommended approach for replacing TypeScript `enum` with a different solution?

In my recent studies, I came across a recommendation to avoid using the built-in enum feature in TypeScript. Instead, the suggestion was to define custom enums as follows: const MyEnum = { name: 'name', email: 'email' } as const; ty ...

Utilizing the Controller with react-hook-form and material-ui to enhance the functionality of the FormControlLabel and

When using Material-ui with react-hook-form, it is recommended to use <Controller along with the render method instead of using "as = {xy-control}". Additionally, avoid mixing controller with inputRef = {register}. Using a single control is not an issue ...

Error: The specified type '{ color: string; loading: true; css: string; size: number; }' cannot be assigned to the type 'IntrinsicAttributes & LoaderSizeMarginProps'

When attempting to build the project, an error occurred: $ yarn run build yarn run v1.22.19 $ next build info - Loaded env from D:\folder_1\my_Project\client\.env.local info - Linting and checking validity of types .Failed to compile. ...

Using Typescript for testing React components: successfully passing an array of objects as props

My current approach involves passing an array of objects to mock component data for testing: const mockPackage = { id: '1232-1234-12321-12321', name: 'Mock Package', price: 8.32, description: 'Mock description', glo ...

Ways to trigger an Angular function once and persist it even after the component is reloaded

Currently, I am learning Angular and have come across a particular issue. As far as I understand, everything placed within the `ngOnInit` method gets executed every time the component reloads. I have a timer function that needs to continue running even aft ...

Attempting to create a TypeScript + React component that can accept multiple types of props, but running into the issue where only the common prop is accessible

I am looking to create a component named Foo that can accept two different sets of props: Foo({a: 'a'}) Foo({a: 'a', b: 'b', c:'c'}) The prop {a: 'a'} is mandatory. These scenarios should be considered i ...