Learning TypeScript

a man with a mustache wearing a cowboy hat and vest is sitting in a bowling alley . Alt: The Big Lebowsi scene: Sam Elliot a mustache wearing a cowboy hat and vest is sitting in a bowling alley, tipping his hat and smiling at the viewer.

h/t @johnnyreilly.com for suggesting an article on this very important question!

What is TypeScript? | Learning TypeScript What 'TypeScript' refers to, as both a programming language and set of tools, along with why so many developers use them.

New Learning TypeScript article: What is TypeScript?

This one starts from the beginning: when you say "TypeScript", you might mean one of four entities. Let's look at what TypeScript really is, along with common reasons to try them out. 🧠

www.learningtypescript.com/articles/wha...

TypeScript types can run DOOM YouTube video by Michigan TypeScript

DOOM can truly run anywhere. A new champion for the most extreme example of TypeScript's type system has ripped and torn its way onto our tracker. 😤

www.learningtypescript.com/articles/ext...

www.youtube.com/watch?v=0mCs...

Comment Directives | Learning TypeScript // @ts-expect-error, // @ts-ignore, and other comments that direct how TypeScript's type checking works.

Comment directives are a "necessary evil" for static analysis tools such as TypeScript.

If you'd like to learn more, see the blog post at the top of this thread: www.learningtypescript.com/articles/com...

Got your own TypeScript Qs? Ask and I'll be happy to answer. 💙

Thanks for reading!

11/11

Finally, answering an FAQ: different tools use different comment directives. TypeScript doesn't recognize Biome's, ESLint's, Prettier, etc. ESLint doesn't recognize // ts-expect-error, ts-ignore, etc.

typescript-eslint.io/troubleshoot...

10/🧵

Code screenshot: declare function process(data: number): void; // @ts-expect-error // ❌ Include a description after the "@ts-expect-error" directive // to explain why the @ts-expect - error is necessary. // The description must be 3 characters or longer. process("abc"); // @ts-expect-error -- 🤷 // ❌ Include a description after the "@ts-expect-error" directive // to explain why the @ts-expect - error is necessary. // The description must be 3 characters or longer. process("abc"); // @ts-expect-error -- Pending 'process' being fixed to take in string. process("abc"); // No lint or type error ✅

You can also lint for comment directives!

@typescript-eslint.io's `@typescript-eslint/ban-ts-comment` reports if you:
* use a ts-ignore or ts-nocheck directive
* forget to attach an explanation >3 characters on a ts-expect-error directive

Use linting to enforce and teach best practices. 🧠

9/🧵

I wrote an article on @typescriptlang.org's comment directives! It explains:

* What they are
* When you do (or don't) want them
* Best practices - of course including @typescript-eslint.io

First @learningtypescript.com article for the new year, *and* for the newly created account! 🐣

Code screenshot: declare function process(data: number): void; // @ts-expect-error -- Pending 'process' being fixed to take in string. process("abc"); // No type error ✅

Let's talk about some best practices around comment directives. There's more than just "prefer ts-expect-error".

First, put explanations with your comment directives. These will help future developers understand why you had to use them - and show that they're not to be used willy-nilly.

8/🧵

Code screenshot: // index.js // @ts-check /** @type {string} */ let value; value = 123; // ❌ Type 'number' is not assignable to type 'string'.

On a brighter note, the `// @ts-check` comment directive *enables* type checking for a file. This can be handy if you're running TypeScript on JavaScript source files and haven't been able to enable checkJs: true yet.

7/🧵

Code screenshot: // @ts-nocheck let value: string; value = 123; value = true; value = { a: 'b' }; // Look, no errors! 😱

The `// @ts-nocheck` comment directive completely disables type checking for an entire file. Even more so than the per-line directives, you should almost never use this. ⛔️

But, it can be handy if you don't have the time to convert a large existing file to TypeScript.

6/🧵

Code screenshot: // TODO: data is actually type string; we'll switch this soon declare function process(data: number): void;   process("abc"); // ❌ Argument of type 'string' is not assignable to parameter of type 'number'. // @ts-ignore process("abc"); // No type error ✅ // @ts-ignore // No type error 🤷 let value: string = "abc";

`// @ts-ignore` is the same as `// @ts-expect-error`, but is allowed to exist and not do anything. This can be useful if you're testing across multiple TypeScript versions or running into other tooling edge case.

5/🧵

Code screenshot: // TODO: data is actually type string; we'll switch this soon declare function process(data: number): void;   process("abc"); // ❌ Argument of type 'string' is not assignable to parameter of type 'number'. // @ts-expect-error process("abc"); // No type error ✅ // @ts-expect-error // ❌ Unused '@ts-expect-error' directive. let value: string = "abc";

If you absolutely must disable type checking for a line, almost always prefer `// @ts-expect-error`. It:

* Disables type checking on a line
* Reports a type error if the comment isn't suppressing any

Being told when a comment directive can be removed helps with long-term code cleanliness.

4/🧵

Most of the time, you don't want "disable type checking" comment directives. Type checking is good! Avoiding type errors is good!

Sometimes the type checker can be wrong. Types can be incorrect, or there can be a bug or missing feature.

If an `any` isn't enough, a comment directive might be.

3/🧵

Code screenshot: // @ts-expect-error let value: number = "oops!";

A comment directive is a comment that directs (changes) how a tool operates within a file. TypeScript includes several that can change type checking behavior for a file or on a specific line.

The most common are `@ts-expect-error` & `@ts-ignore`, which disable type checking for a line.

2/🧵

Comment Directives | Learning TypeScript // @ts-expect-error, // @ts-ignore, and other comments that direct how TypeScript's type checking works.

📝 New Learning TypeScript article: Comment Directives

Comment directives allow changing how tools analyze your code. Many of TypeScript's allow disabling type checking - which might seem counterintuitive. Why would you want that?

Let's explore `@ts-expect-error`, `@ts-ignore`, and more!

1/🧵

Hello, world!