How to use TypeScript attribute values?

General
1

I’m unsure how to cast Attributes to their actual concrete types when generating TS defs.
For example:

export interface Test extends Schema.Component {
	attributes: {
		title: Attribute.String;
	};
}

const hello = {
   title: "Title", // This doesn't work.
} as Test;

With the implementation above I recieve this error:

Svelte: Conversion of type  { section: StringAttribute; }  to type  Test  may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to  unknown  first. Type 'StringAttribute' is not comparable to type 'string'.

Using as unknown as string everywhere is a bit cumbersome.

Any help would be appreciated.

1 Like
2

I have the exact same problem.

I really want to avoid inline casting all over the place; super silly.

3

"In TypeScript, attribute values are typically used in objects, interfaces, and classes to define structured data. You can assign attribute values to properties using type annotations, ensuring type safety and preventing runtime errors.

For example, if you’re working with an object, you can define attributes like this:

typescript

CopyEdit

type User = {
  name: string;
  age: number;
  isAdmin: boolean;
};

const user: User = {
  name: 'Alice',
  age: 25,
  isAdmin: true
};

If you’re dealing with classes, you can define attributes (also known as properties) inside a class and use access modifiers like public, private, or protected:

typescript

CopyEdit

class Product {
  name: string;
  price: number;

  constructor(name: string, price: number) {
    this.name = name;
    this.price = price;
  }
}

const item = new Product('Laptop', 1200);
console.log(item.name); // Outputs: Laptop

For HTML attributes in TypeScript (especially in React), you can define them using interfaces like this:

tsx

CopyEdit

interface ButtonProps {
  label: string;
  disabled?: boolean;
}

const MyButton: React.FC<ButtonProps> = ({ label, disabled }) => (
  <button disabled={disabled}>{label}</button>
);

Are you working with TypeScript for frontend development (React/Angular) or backend (Node.js)? Let me know if you need a more specific example!"**