Typescript with ESLint in a WordPress Project

Hey friends, I’m glad you’re here! If you’re looking to get into WordPress block development, and you want to follow WordPress coding standards while using Typescript and ESLint, but aren’t sure how to set this up in your project, this post is for you! I’m going to show you exactly how to set up Typescript with ESLInt in In WordPress.

This post assumes you also want to set up React to work with Typescript in your WordPress project but doesn’t cover installing React.

Want to set up Typescript without React? This article will still work for you! If you want to learn how to set up React in a WordPress project check out this post on creating a Plugin Sidebar with React and Material UI.

Estimated reading time: 5 minutes

If you haven’t checked out our guide on setting up a WordPress development project from scratch please don’t miss this must see article that covers everything from linting and formatting to webpack bundling and more!

Installing Typescript

Whether you’re going to use React or not, setting Typescript up in your project is a great way to prevent common Javascript errors while making your code easier to collaborate on.

Install typescript with NPM:

npm install typescript --save-dev

Install typescript with yarn:

yarn add typescript -D

Updating your eslint configuration

If you haven’t followed our guide on configuring eslint and prettier, check it out here. Once you set that up, extending your configuration to work with Typescript is a breeze.

Install the typescript/eslint configuration

To ensure you can use the WordPress eslint and typescript configuration together, you’ll need to install typescript at the version below to prevent issues with peer dependencies.

With NPM:

npm install typescript@^4.3.5 --save-dev

With yarn:

yarn add typescript@^4.3.5 -D

Install ts-loader to work with webpack

Typescript won’t build properly if you don’t set it up with the proper build tool. Enter ts-loader for the win!

With NPM:

npm install ts-loader --save-dev

With yarn:

yarn add ts-loader -D

Update your Javascript file extensions to Typescript

For any non-React Javascript files, go ahead and update these file extensions from .js to .ts. Below is an example file that’s been updated from .js to .ts:

If your JS already has variables and functions in use, you should start getting warnings or notifications about missing type declarations. If you’re completely new to Typescript, check out their documentation here.

Want to set up Stylelint and Prettier to work with SCSS in your WordPress project? We cover all you need to know right here.

Configure Typescript for your project.

To ensure you’re getting all of the benefits of coding with typescript, you’ll want to add a tsconfig.json file in your root project folder. This basically ensures that you will be able to see the typescript errors while you’re coding and not just at build time.

For a simple setup just add the following to this file:

{
	"compilerOptions": {
		"baseUrl": "./src",
		"target": "es6",
		"lib": ["dom", "dom.iterable", "es6"],
		"outDir": "./dist/js",
		"noImplicitAny": true,
		"jsx": "react",
		"allowJs": true,
		"moduleResolution": "node"
},
	"include": ["src"],
	"exclude": ["node_modules"]
}

• Note that this configuration assumes all of your Typescript (formerly Javascript) files are located in your .src/ directory.
• We don’t want typescript to bother type checking our node_modules folder so we’ve added that to the exclude property.
• The target here is set to es6, which is a good baseline setting if you like using modern Javascript but don’t want to use the latest and greatest. Learn more about the target options here.
• The lib options ensure that your Javascript code, which runs in the browser, will have the features you would expect it to. Here’s some more information on the lib property.
• We’re also setting typescript up to work with our Webpack build process as well as React. But you can leave out the jsx property if you won’t be using React.

Update webpack configuration

You won’t be able to build your typescript into javascript files until you update your webpack configuration. Let’s open up our webpack.config.js file and make some changes.

In the image below, you can see the before and after where we’ve changed our entry file from index.js to index.ts. We’ve also updated the following:

• index.js to index.ts
• added a resolve property with the extensions key and tsx, ts, js, and jsx extenstions. (If you aren’t adding React to your project, just skip the jsx and tsx extensions)
• updated the javascript use key to ts-loader
• updated our js test module to /\.(js|jsx|ts|tsx)$/

If you now run your build script npx webpack you should get warnings pertaining to Typescript. Did you not get any warnings? Good job you fixed your Typescript issues!

If you want to test whether you’ve got this set up properly by forcing an error, in your index.ts file add the following code:

const returnString = (w: number) => {
	if (!w) {
		return;
	}
	return w;
};

// eslint-disable-next-line no-console
console.log(returnString('String'));

You should be getting a warning now when you try to run npx webpack that says:

TS2345: Argument of type ‘string’ is not assignable to parameter of type ‘number’.

Now if you change the w: number to w: string, which is the type our function is being called with, you can run your build script and everything will work!

Update your .eslintrc file

In your .eslintrc file add the following to your “extends” property:

"plugin:@typescript-eslint/recommended"

If you’ve followed the eslint/prettier guide then your .eslintrc file should look like this:

{
    "extends": [ 
		"plugin:@wordpress/eslint-plugin/recommended-with-formatting", 
		"plugin:prettier/recommended",
		"plugin:@typescript-eslint/recommended"
	]
}

Fixing configuration issues:

"ignorePatterns": ["webpack.config.js"]

"ignorePatterns": ["webpack.config.js", "dist"]

Conclusion

Now hopefully you’ve learned how to set up Typescript and ESLint in your WordPress project. Happy coding!