Learning TypeScript with Existing Code Transition
Currently, I am delving into the world of TypeScript and in the process of converting my CoffeeScript code to TypeScript (specifically Lit Web Component).
Confusion on Translation Process
I'm encountering an obstacle in understanding how this particular line should be converted to TypeScript:
render: ->
className = if (@props.firstProp) in @props.secondProp then "buttons buttons-active" else "buttons"
This code snippet essentially adjusts the appearance of a toggle button. When a specific property exists, it triggers a custom button class and upon clicking, applies the active styling.
Desired Outcome
My goal is to click on the switch and alter its CSS styling while also toggling the condition between true and false. If the condition is true, apply the
container-style-light button button-activecontainer-style-light button.
@customElement('toggle-button')
export class ToggleButton extends ElementLit {
static styles = css`
button { border-width: 1px;
border-style: solid;
width: 50px;
min-width: 50px;
height: 50px;
border-radius: 25px;
font-size: 0.9rem;
margin: 0;
padding: 0;
}container-style-light button {
border-color: var(--highlight);
color: var(--highlight);
background-color: var(--background);
}
container-style-light button button-active {
background-color: var(--highlight);
color: var(--foreground);
}
@property()
condition = true;
constructor() {
super();
this.disabled = false;
this.displayName = `${this.condition}`
}
render() {
return html`
<style>${ToggleButton.styles}</style>
<label>
<button type="button"
?disabled="${this.disabled}"
@click=${this.onClick}>
${this.displayName}
</button>
</label>`;
}
private onClick(_e: Event) {
//change the styling of the .button to button-active, set condition to true
//if clicked on again, revert to the .button styling, set condition to false
}
}
I would appreciate guidance on the simplest method to accomplish this in TypeScript, as there are multiple components awaiting translation.