What is the correct way to convert a base type value to its extended type in TypeScript?

Question

What is the correct way to convert a base type value to its extended type in TypeScript?

Consider the TypeScript code block below:

type URLEx = URL & {
  custom: string;
};

const url = new URL("http://localhost:3000/foo/var");

const url_x: URLEx = {
  ...url,
  custom: "hello",
};

console.log(url);
// Output properties of original URL object

console.log(url_x);
// Output properties of URL object with additional 'custom' property

Upon running the code, unexpected [Symbol(context)]: URLContext and [Symbol(query)]: URLSearchParams symbols were seen. Why did this happen? How can we transform the url object into url_x without manually specifying all properties so that the resulting output resembles the following?

console.log(url_x);
// {
//   href: 'http://localhost:3000/foo/var',
//   origin: 'http://localhost:3000',
//   protocol: 'http:',
//   username: '',
//   password: '',
//   host: 'localhost:3000',
//   hostname: 'localhost',
//   port: '3000',
//   pathname: '/foo/var',
//   search: '',
//   searchParams: URLSearchParams {},
//   hash: '',
//   custom: 'hello'
// }

typescript

Answer 1

Answer №1

Instances of classes cannot be spread, as classes act as prototypes and object spread only performs shallow-cloning (excluding the prototype). Instead, you can achieve this by:

type URLExtended = URL & {
  custom: string;
};

const urlObject = new URL("http://example.com");
console.log({...urlObject}); // {}

const extendedURL: URLExtended = Object.assign(urlObject, {custom: 'world'})

console.log(extendedURL.hostname); // "example.com"
console.log(extendedURL.custom); // "world"
console.log(urlObject === extendedURL) // true

Check out TS Playground. Note that caution should be exercised when using Object.assign() as it will modify the original urlObject value.

Answer 2

Instances of classes cannot be spread, as classes act as prototypes and object spread only performs shallow-cloning (excluding the prototype). Instead, you can achieve this by:

type URLExtended = URL & {
  custom: string;
};

const urlObject = new URL("http://example.com");
console.log({...urlObject}); // {}

const extendedURL: URLExtended = Object.assign(urlObject, {custom: 'world'})

console.log(extendedURL.hostname); // "example.com"
console.log(extendedURL.custom); // "world"
console.log(urlObject === extendedURL) // true

Check out TS Playground. Note that caution should be exercised when using Object.assign() as it will modify the original urlObject value.

Answer 3

Answer №2

Enhance the capabilities of the URL class:

class URLEx extends URL {
    customProperty: string
    constructor(url: string) {
        super(url);
        this.customProperty = 'hello';
    }
}

const urlx = new URLEx(location.href);

Live example in TypeScript Playground.

Also check out:

Why is the spread operator not usable on a class function?
Understanding Spread syntax (MDN)

The spread syntax can be used in three main ways:
In function arguments list
(myFunction(a, ...iterableObj, b))
In array literals
([1, ...iterableObj, '4', 'five', 6])
In object literals ({ ...obj, key: 'value' })

Answer 4

Enhance the capabilities of the URL class:

class URLEx extends URL {
    customProperty: string
    constructor(url: string) {
        super(url);
        this.customProperty = 'hello';
    }
}

const urlx = new URLEx(location.href);

Live example in TypeScript Playground.

Also check out:

Why is the spread operator not usable on a class function?
Understanding Spread syntax (MDN)

The spread syntax can be used in three main ways:
In function arguments list
(myFunction(a, ...iterableObj, b))
In array literals
([1, ...iterableObj, '4', 'five', 6])
In object literals ({ ...obj, key: 'value' })

Answer 5

Answer №3

If I were to make a recommendation, I would suggest the following composition:

type URLEx = {
  url: URL;
  custom: string;
};

const url = new URL("http://localhost:3000/foo/var");

const url_x: URLEx = {
    url,
    custom: "hello"
};

console.log(url);
console.log(url_x);

The output may vary depending on the URL implementation:

[LOG]: URL: "http://localhost:3000/foo/var"
[LOG]: {
  "url": "http://localhost:3000/foo/var",
  "custom": "hello"
}

Answer 6

If I were to make a recommendation, I would suggest the following composition:

type URLEx = {
  url: URL;
  custom: string;
};

const url = new URL("http://localhost:3000/foo/var");

const url_x: URLEx = {
    url,
    custom: "hello"
};

console.log(url);
console.log(url_x);

The output may vary depending on the URL implementation:

[LOG]: URL: "http://localhost:3000/foo/var"
[LOG]: {
  "url": "http://localhost:3000/foo/var",
  "custom": "hello"
}

What is the correct way to convert a base type value to its extended type in TypeScript?

Answer №1

Answer №2

Answer №3

Similar questions

How can Firebase and Ionic be used to customize the password reset template for sending verification emails and more?

Does the React memo function modify the component's prop type?

The class function in the exported typescript logs that "this" is not defined

An error occurred while trying to access properties of null, specifically the `_rawValidators` property

Styling <Link> component with styled-components: A step-by-step guide

Exploring the functionality of this TypeScript code: What's the distinction between { [key: string]: string }[] and { prop1: string, prop2: string }[]

Using Typescript to replicate Object.defineProperties

Tips for executing forEach on a promise?

Adding connected types to a list using Typescript

When zooming out, Leaflet displays both tile layers

Guide to accessing a nested and potentially optional object property with a default value and specifying its data type

The type 'MenuOptions[]' cannot be assigned to type 'empty[]'

What is the best way to track events in angular-meteor when a user logs in, logs out, or when there is a change in the user

The best approach to effectively integrate TypeScript and Fetch is by following the recommended guidelines

Ways to effectively test public functions in Typescript when using react-testing-library

Send a string to directive via HTML

Overlooking errors in RxJs observables when using Node JS SSE and sharing a subscription

Managing arrays in local storage with Angular 2+

What is the best way to create a universal limitation for a larger collection of a discriminated union?

Guide to making a TreeView in Angular 2 with Typescript