👋, I’m Josh
Open Source Maintainer
I focus on static analysis tooling around JavaScript & TypeScript.
Most notably, TypeScript-ESLint.
Author, Learning TypeScript (O’Reilly).
@JoshuaKGoldberg /.com
😡
@JoshuaKGoldberg /.com
“We don’t know what types code is but we’re very proud of Josh and are sure it will be a lovely book.”
😡
- Frances and Mark Goldberg
@JoshuaKGoldberg /.com
Releasing the Refactor
Coding can be falsely intimidating.
changing contexts
bad explanations
@JoshuaKGoldberg /.com
Static analysis�(tooling that analyzes your code without running it)
doesn’t have to be intimidating.
@JoshuaKGoldberg /.com
Static analysis�(tooling that analyzes your code without running it)
is awesome.
@JoshuaKGoldberg /.com
Statically Detecting React App Bugs with TypeScript and ESLint
Josh Goldberg
@JoshuaKGoldberg /.com
TypeScript 💙 ESLint
A match made in static analysis heaven.
@JoshuaKGoldberg /.com
ESLint sees only the raw syntax of your code.
TypeScript understands what that code means.
@JoshuaKGoldberg /.com
Is This Safe?
function MyButton({ action, children }) {
const onClick = async () => {
console.log("Starting...");
await action();
console.log("Done.");
};
� return (
<button onClick={onClick}>
{children}
</button>
);
}
🤔
🤔
🤔
🤔
🤔
🤔
🤔
🤔
🤔
🤔
@JoshuaKGoldberg /.com
Type Checking!
TypeScript parses your full project to understand potential object types.
These types are available as an API for ESLint rules via the typescript-eslint plugin.
@JoshuaKGoldberg /.com
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"]
}
npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
@JoshuaKGoldberg /.com
{
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"]
}
npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
@JoshuaKGoldberg /.com
{
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"plugins": ["@typescript-eslint"]
}
npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
@JoshuaKGoldberg /.com
github.com/JoshuaKGoldberg/�typescript-eslint-react-demo
typescript-eslint-react-demo.vercel.app
@JoshuaKGoldberg /.com
await-thenable
@typescript-eslint/
typescript-eslint.io/rules/await-thenable
“If the await keyword is used on a value that is not a Thenable, the value is directly resolved immediately. While doing so is valid JavaScript, it is often a programmer error."�
@JoshuaKGoldberg /.com
no-floating-promises
@typescript-eslint/
typescript-eslint.io/rules/no-floating-promises
“A "floating" Promise is one that is created without any code set up to handle any errors it might throw. Floating Promises can cause several issues, such as improperly sequenced operations, ignored Promise rejections, and more.”
@JoshuaKGoldberg /.com
no-misused-promises
@typescript-eslint/
typescript-eslint.io/rules/no-misused-promises
“This rule forbids providing Promises to logical locations such as if statements in places where the TypeScript compiler allows them but they are not handled properly.”
@JoshuaKGoldberg /.com
Fin
@JoshuaKGoldberg /.com
Resources
@JoshuaKGoldberg /.com
Support Me 💙
learningtypescript.com��github.com/sponsors/�JoshuaKGoldberg
@JoshuaKGoldberg /.com
Support Us 💜
typescript-eslint.io
�open-collective.com/�typescript-eslint
@JoshuaKGoldberg /.com
Thank you!�💖
@JoshuaKGoldberg /.com