Author: John Au-Yeung

Sometimes, we want to fix the ‘React.SFC is now deprecated’ warning with React and TypeScript.

In this article, we’ll look at how to fix the ‘React.SFC is now deprecated’ warning with React and TypeScript.

How to fix the ‘React.SFC is now deprecated’ warning with React and TypeScript?

To fix the ‘React.SFC is now deprecated’ warning with React and TypeScript, we should replace with React.FunctionComponent or React.FC.

For instance, we write

const Example: React.FunctionComponent<IExample> = ({ propsType }) => {
  //...
};

to create the Example component of type React.FunctionComponent<IExample> where IExample is an interface with the props’ types.

We can shorten that to

const Example: React.FC<IExample> = ({ propsType }) => {
  //...
};

Conclusion

To fix the ‘React.SFC is now deprecated’ warning with React and TypeScript, we should replace with React.FunctionComponent or React.FC.

Sometimes, we want to lint an entire folder using TypeScript TSLint.

In this article, we’ll look at how to lint an entire folder using TypeScript TSLint.

How to lint an entire folder using TypeScript TSLint?

To lint an entire folder using TypeScript TSLint, we can run tslint with the pattern of the path of the files that we want to lint.

For instance, we run

tslint src/**/*.ts{,x}

to lint all ts and tsx files in any folder in the src folder or its subfolders with tsline.

Conclusion

To lint an entire folder using TypeScript TSLint, we can run tslint with the pattern of the path of the files that we want to lint.

Sometimes, we want to generate TypeScript declaration files from JavaScript code.

In this article, we’ll look at how to generate TypeScript declaration files from JavaScript code.

How to generate TypeScript declaration files from JavaScript code?

To generate TypeScript declaration files from JavaScript code, we can use the dts-gen module.

To install it, we run

npm install -g dts-gen

Then we install the module that we want to generate types from.

For instance, if we want to generate types for yargs, we run

npm install -g yargs

Then we run

dts-gen -m yargs

to generate the type file for yargs.

We should get the yargs.d.ts file in our project folder.

Conclusion

To generate TypeScript declaration files from JavaScript code, we can use the dts-gen module.

Sometimes, we want to fix the "Property ‘replaceAll’ does not exist on type ‘string’" error with TypeScript.

In this article, we’ll look at how to fix the "Property ‘replaceAll’ does not exist on type ‘string’" error with TypeScript.

How to fix the "Property ‘replaceAll’ does not exist on type ‘string’" error with TypeScript?

To fix the "Property ‘replaceAll’ does not exist on type ‘string’" error with TypeScript, we should add "ES2021.String" into the compilerOptions.lib array.

To do this, we write

{
  //..,
  "compilerOptions": {
    //...,
    "lib": [
      //...,
      "ES2021.String"
    ]
  }
}

to add "ES2021.String" into compilerOptions.lib in tsconfig.json.

Then the TypeScript compiler will know that the string replaceAll method is available for use in our TypeScript project.

Conclusion

To fix the "Property ‘replaceAll’ does not exist on type ‘string’" error with TypeScript, we should add "ES2021.String" into the compilerOptions.lib array.

Sometimes, we want to fix the "Exceeds maximum line length of 120" TypeScript TSLint error.

In this article, we’ll look at how to fix the "Exceeds maximum line length of 120" TypeScript TSLint error.

How to fix the "Exceeds maximum line length of 120" TypeScript TSLint error?

To fix the "Exceeds maximum line length of 120" TypeScript TSLint error, we can add the // tslint:disable-next-line:max-line-length comment before the line that causes the error.

For instance, we write

// tslint:disable-next-line:max-line-length
import { PersonsSingleAccountComponent } from "../persons-information/fragments/persons-single-account/persons-single-account-bookings/persons-single-account-bookings.component";

to add // tslint:disable-next-line:max-line-length before the line that’s longer than 120 character to disable the TSLint max-line-length check on the line.

Conclusion

To fix the "Exceeds maximum line length of 120" TypeScript TSLint error, we can add the // tslint:disable-next-line:max-line-length comment before the line that causes the error.