Advertisement ยท 728 ร— 90

Posts by Learning TypeScript

Preview
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!

1 year ago 2 1 0 0
Preview
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...

1 year ago 10 3 1 0
TypeScript types can run DOOM
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...

1 year ago 8 1 0 0
Preview
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

1 year ago 5 1 0 0

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/๐Ÿงต

1 year ago 1 0 1 0
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 โœ…

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/๐Ÿงต

1 year ago 1 0 1 0

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! ๐Ÿฃ

1 year ago 13 2 3 0
Code screenshot:
declare function process(data: number): void;

// @ts-expect-error -- Pending 'process' being fixed to take in string.
process("abc"); // No type error โœ…

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/๐Ÿงต

1 year ago 2 0 1 0
Code screenshot:
// index.js
// @ts-check

/** @type {string} */
let value;

value = 123;
// โŒ Type 'number' is not assignable to type 'string'.

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/๐Ÿงต

1 year ago 2 0 1 0
Code screenshot:
// @ts-nocheck

let value: string;

value = 123;
value = true;
value = { a: 'b' };

// Look, no errors! ๐Ÿ˜ฑ

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/๐Ÿงต

1 year ago 1 0 1 0
Advertisement
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";

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/๐Ÿงต

1 year ago 1 0 1 0
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";

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/๐Ÿงต

1 year ago 1 0 1 0

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/๐Ÿงต

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

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/๐Ÿงต

1 year ago 2 0 1 0
Preview
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/๐Ÿงต

1 year ago 3 0 1 1

Hello, world!

1 year ago 1 1 0 0