When it comes to TypeScript, we have the ability to declare partial types. But what happens when we need to check if a property is within the keys of a type? Let's explore.
interface Car {
Brand: string;
Model: string;
}
type KeyofCar = keyof Car; // Brand, Model
if('Brand' is in KeyofCar) {
something...
} // This is just pseudocode and won't work as intended
Is there a solution to this problem?
It seems like you already have the knowledge that 'Brand' is part of the Car object at compile time. So, why would you need to check for it?
If the type is not fully known, perhaps in a type argument scenario, then attempting something like this could be considered...
function<T>(foo: T) {
// This won't work since 'keyof' doesn't exist in runtime environments
if('bar' in keyof T) {
// do something...
}
}
Instead of comparing against keyof T, try a different approach like below...
interface Car {
Brand: string;
Model: string;
}
interface Bus {
Passengers: number;
Color: string;
}
function(foo: Car | Bus) {
if('Brand' in foo) {
// It's a Car
} else {
// It's a Bus
}
}
If working with keys is your goal, consider this alternative...
type CarKey = keyof Car;
const carKeys: CarKey[] = ['Brand', 'Model'];
function(key: string) {
if(carKeys.includes(key)) {
// perform action
}
}
To ensure you have all keys covered, here's a more thorough method...
type CarKey = keyof Car;
const carKeys = Object.keys({
Brand: null,
Model: null
} satisfies Record<CarKey, null>) as Array<keyof Car>;
function isKeyOfCar(key: string): key is CarKey {
return carKeys.includes(key);
}
This way, any future changes to the Car type will prompt updates to these key checks.
Currently, there is no built-in way in Typescript to validate certain properties at runtime. However, a potential workaround involves creating a Record object and utilizing its keys for validation.
interface Animal {
Species: string;
Habitat: string;
}
const animalRecord: Record<keyof Animal, boolean> = {
Species: true,
Habitat: true
}
if (animalRecord['Species']) {
do something...
}
The use of a Record is essential as any changes made to the interface must also be reflected in the Record declaration to prevent compilation errors. This approach helps maintain consistency in property checks as the underlying interface evolves.
const CheckProperty<T extends {[key:string]:any}, PropertyName extends string> = T[PropertyName] ? true : false;
//Example
const HasProperty = CheckProperty<{name:string; age:number},"age">;
//HasProperty is true
In my array, I want to prioritize specific items to always appear at the top. The API response looks like this: const itemInventorylocationTypes = [ { itemInventorylocationId: '00d3898b-c6f8-43eb-9470-70a11cecbbd7', itemInvent ...
I am attempting to interact with a REST api using jQuery's ajax feature. My goal is to return the Promise<Customer> object, but I am encountering an error stating that the property finally is missing. It used to work before, so I assume there h ...
I am working on a dropdown template with Vue.js and have encountered some challenges. Here is the basic structure of my dropdown: <select v-model="selectedClient" class="stat-select text-u-c"> <option disabled value="">Please select a Client ...
After running this code, I noticed that instead of values, I am receiving the object names. export class PrescriberComponent implements OnInit { constructor() { } people = [ {id: 1, forename: 'John', surname: 'Doe'}, {id: 2, f ...
If you're looking for the source code of the project, you can find it at https://github.com/Yaojian/Ionic-TypeScript-Starter/. I decided to create a Visual Studio project by forking https://github.com/Justin-Credible/Ionic-TypeScript-Starter/ and fol ...
I have a collection of methods (some synchronous and some asynchronous) that I wish to process sequentially using bluebird.each. Here's a simplified example: import bluebird from 'bluebird'; const delay = (ms: number) => new Promise((res ...
Is it possible to make a Vue directive as an ES6 Class? I have been attempting to do so, but it doesn't seem to be working correctly. Here is my code snippet: import { DirectiveOptions } from 'vue'; interface WfmCarriageDirectiveModel { ...
Currently experimenting with Deno projects and looking for a way to transpile TypeScript into JavaScript to execute in the browser (given that TS is not supported directly). In my previous experience with NodeJS, I relied on installing the tsc compiler via ...
Incorporating jQuery.dataTables into my Angular 7 project was a success. I installed all the necessary node modules, configured them accordingly, and added the required files to the angular.json file. Everything functioned perfectly after the initial launc ...
I need to extract and combine two values from an Interface: export interface CurrenciesList { currency: string; country: string; } The initial mapping looks like this: this.optionValues["currency"] = value.map(i => ({ id: i.currency, name: i.curr ...
I'm grappling with adapting this code to function properly in TypeScript type ScrollProps = { autoHide: boolean autoHideTimeout: number autoHideDuration: number } const renderThumb = ({ style, ...props}) => { const thumbStyle = { borde ...
.segment-button-indicator { -ms-flex-item-align: end; align-self: flex-end; width: 100%; height: 2px; background-color: var(--indicator-color); opacity: 1; } I am a beginner in hybrid app development and ...
Ensuring data type correctness when creating a Prisma model named 'bid' is crucial. With auto-generated prisma types available, understanding the naming convention and selecting the appropriate type can be confusing. The bid schema looks like th ...
I am working with an array of objects, where each object contains two properties: {key:count} When configuring my chart, I need to set the data source in this format: {meta: "unknown", value: [the count of unknown]}, {meta: "male", value: [the count of ...
While working with @Input() data coming from the parent component, I am utilizing ngOnChanges to detect any changes. However, it seems that the method only triggers once. Even though the current value is updated, the previous value remains undefined. Below ...
[Updated on 16th July 2019] I'm feeling perplexed at the moment. I am diving into a .NET Core 3.x Web Application and my aim is to incorporate: jQuery TypeScript I've managed to get TypeScript up and running, but I'm facing an issue where ...
I have a scenario where an event is triggered every 10 seconds. After subscribing to the event on the receiving end, I need to figure out how to send data back to the class responsible for emitting the event. constructor(@Inject(ABC.XYZ) private events: ...
Can you help me specify that type B in the code sample below should comprise of elements from interface A? The key "id" is mandatory, while both "key" and "value" are optional. interface A { id: string; key: string; value: string | number; } /** ...
Is there a way to dynamically change the background color or text color of the entire website when a user clicks on a color from one component to another? I know I need to use the Output decorator, but how can I implement this? style.component.html <di ...
I am experiencing an issue with connecting to an API on localhost:5000. The API works perfectly when called from Postman or the browser, but it does not work when called inside Next.js getserverside props: mport { useEffect,useState } from "react"; i ...