Author: John Au-Yeung

Sometimes, we want to add a private setter with TypeScript.

In this article, we’ll look at how to add a private setter with TypeScript.

How to add a private setter with TypeScript?

To add a private setter with TypeScript, we can use the private keyword.

For instance, we write

class Test {
  _prop: string;
  public get prop(): string {
    return this._prop;
  }

  private get internalProp(): string {
    return this.prop;
  }

  private set internalProp(value: string) {
    this._prop = value;
  }

  private addToProp(valueToAdd: string): void {
    this.internalProp += valueToAdd;
  }
}

to create the internalProp setter that sets the this._prop value to value.

Then we can use the setter as we do in the addToProp by assigning a value to this.internalProp.

Conclusion

To add a private setter with TypeScript, we can use the private keyword.

Sometimes, we want to initialize a multidimensional array with TypeScript.

In this article, we’ll look at how to initialize a multidimensional array with TypeScript.

How to initialize a multidimensional array with TypeScript?

To initialize a multidimensional array with TypeScript, we can use the array fill and map methods.

For instance, we write

const n = 10;
const palindrome: boolean[][] = new Array(n)
  .fill(false)
  .map(() => new Array(n).fill(false));

to create a 10×10 palindrome array that’s filled with false everywhere.

We do that by using Array with n to create an array with length 10.

And then we call fill to fill that with false.

Then we call map with a callback that map the entries in the array to arrays with 10 false entries.

Conclusion

To initialize a multidimensional array with TypeScript, we can use the array fill and map methods.

Sometimes, we want to fix the "TS7053 Element implicitly has an ‘any’ type" error in TypeScript.

In this article, we’ll look at how to fix the "TS7053 Element implicitly has an ‘any’ type" error in TypeScript.

How to fix the "TS7053 Element implicitly has an ‘any’ type" error in TypeScript?

To fix the "TS7053 Element implicitly has an ‘any’ type" error in TypeScript, we can create a type with an index signature that allows any properties to be in the object.

For instance, we write

const myObj: { [index: string]: any } = {};

to set myObj to the { [index: string]: any } type so that the object assigned can have any properties in it.

Conclusion

To fix the "TS7053 Element implicitly has an ‘any’ type" error in TypeScript, we can create a type with an index signature that allows any properties to be in the object.

Sometimes, we want to extend HTML elements in React and TypeScript while preserving props.

In this article, we’ll look at how to extend HTML elements in React and TypeScript while preserving props.

How to extend HTML elements in React and TypeScript while preserving props?

To extend HTML elements in React and TypeScript while preserving props, we can include the React.HTMLProps<HTMLButtonElement> type in our prop type.

For instance, we write

export const Button: React.FC<
  ButtonProps & React.HTMLProps<HTMLButtonElement>
> = ({ ...props, children, icon }) => (
  <StyledButton {...props}>
    {icon && <i className="material-icons">{icon}</i>}
    {children}
  </StyledButton>
);

to set the prop type of the Button component to ButtonProps & React.HTMLProps<HTMLButtonElement>.

ButtonProps is the prop type that we created and React.HTMLProps<HTMLButtonElement> is the prop type of the HTML button element.

We combine then with & so that properties from both interfaces are valid props.

Conclusion

To extend HTML elements in React and TypeScript while preserving props, we can include the React.HTMLProps<HTMLButtonElement> type in our prop type.

Sometimes, we want to use "this" inside a class method with TypeScript.

In this article, we’ll look at how to use "this" inside a class method with TypeScript.

How to use "this" inside a class method with TypeScript?

To use "this" inside a class method with TypeScript, we can use it like we do in JavaScript.

For instance, we write

class Messenger {
  message = "Hello World";

  start() {
    setTimeout(() => alert(this.message), 3000);
  }
}

to use this inside the setTimeout callback, which is an arrow function that is inside the start method.

Therefore, this would still reference the Messenger instance since arrow functions don’t change the scope of this.

And using this in a method at the top level would reference the class instance.

Conclusion

To use "this" inside a class method with TypeScript, we can use it like we do in JavaScript.