PR Checklist

• [x] Addresses an existing open issue: fixes #38
• [x] That issue was marked as accepting prs
• [ ] Steps in CONTRIBUTING.md were taken

Overview

• Broken URL modified.

Bug Report Checklist

• [X] I have searched for related issues and found none that matched my issue.
• [X] This is the appropriate issue form for the bug I would like to report.

Expected

In pages like https://www.learningtypescript.com/from-javascript-to-typescript, Edit this page takes you to URLs like https://github.com/LearningTypeScript/projects/tree/main/src/content/external/projects/from-javascript-to-typescript/README.md. That's a 404.

Actual

They should go cross-repo to URLs like https://github.com/LearningTypeScript/projects/blob/main/projects/from-javascript-to-typescript/README.md.

Additional Info

No response

Bug Report Checklist

• [X] I have searched for related issues and found none that matched my issue.
• [X] This is the appropriate issue form for the bug I would like to report.

Expected

Links on the site should be more readable in dark mode

Actual

The dark-grey-on-black is hard to read:

This same color is used on other text in dark mode, like in the table of contents. White, or another lighter color would do better instead.

Additional Info

Sorry if this isn't really a "bug", but I wasn't sure where else to put it!

PR Checklist

• [x] Addresses an existing open issue: fixes #38
• [x] That issue was marked as accepting prs
• [x] Steps in CONTRIBUTING.md were taken

Overview

Fixes the edit URL to be a join on the main branch -> projects/ plus the computed docsPath.

Feature Request Checklist

• [X] I have searched for related issues and found none that matched my issue.
• [X] This is the appropriate issue form for the feature I would like to request.

Feature

submitting questions concerning a topic in the book via a form or something like that

Additional Info

Don't know if its allowed to ask this here but I just started to read your book, really helpful stuff but I am kinda lost on a particular term.... "signature". Simply what are signatures in typescript? I do know the call, construct and index signatures (ie their syntax their use cases) but I am still confused on the "signature" term. To further clarify my question is there a catch all phrase to explain what a signature is in typescript. I asked this on stackoverflow and the answer was '"signature" is used in TypeScript to mean an entry in an object-like type surrounded by curly braces (but usually not referring to plain properties.) If I have an interface Foo { bar: string; [k: string]: unknown; baz(): void; (x: string): number; new (y: string): Date } then Foo has a bar property, and a string index signature, and a baz method signature, and a call signature, and a construct signature."' Does that make sense🤔?

Bug Report Checklist

• [X] I have searched for related issues and found none that matched my issue.
• [X] This is the appropriate issue form for the bug I would like to report.

Expected

I left a URL in the book like https://learningtypescript.com/objects-and-interfaces (the original name of the chapter). Now the site will have to support redirecting that to https://learningtypescript.com/interfaces in perpetuity. 😂

Actual

No URL exists yet.

Additional Info

This should be doable with a vercel.json. https://vercel.com/docs/cli#project/redirects

Overview

Article code blocks have a "copy" link in their top-right at the moment. It'd be nice to add another button that opens a TS code block in typescriptlang.org/play.

Tooling Report Checklist

• [X] I have pulled the latest main branch of the repository.
• [X] I have searched for related issues and found none that matched my request.
• [X] This is the appropriate issue form for the tooling issue I would like to report.

Expected

The site performance is pretty good as-is. But, it can be better.

Actual

At least the Google Font embed is too much data. And I should check whether that font (and any other resources) should be loaded from the learningtypescript.com domain.

Additional Info

Marking as blocked similar to #15.

Tooling Report Checklist

• [X] I have pulled the latest main branch of the repository.
• [X] I have searched for related issues and found none that matched my request.
• [X] This is the appropriate issue form for the tooling issue I would like to report.

Expected

Once the site is mostly stable, I'll want to do another pass to catch any more UI bugs.

Actual

I know there are at least a few discrepancies...

Additional Info

Marking as blocked until the frontend is more stabilized.

Before You File a Bug Report Please Confirm You Have Done The Following...

• [X] I have pulled the latest main branch of the repository.
• [X] I have searched for related issues and found none that matched my request.
• [X] This is the appropriate issue form for the tooling issue I would like to report.

Expected

Accessibility is not a bolt-on!

Actual

I haven't done a deep audit in a few features. It's mostly accessible now (and I'm checking each PR I send), but I want to fully double-check after most polish is done.

Additional Info

Marking as blocked until the frontend is more stabilized.

It's mentioned in the book. Putting this here to remind myself 🙂

[NOTE]
====
Many JavaScript projects use dedicated transpilers such as Babel (https://babeljs.io) instead of TypeScript's own to transpile source code into runnable JavaScript.
You can find a list of common project starters on https://learning-typescript.com/starters.
====

A question brought up on my Twitch stream today: overriding types of third party libraries if the types aren't made to be extended?

Example: some-library exports an interface MyData, and in your code you need to have an extra property myProperty added to all instances of MyData?

A more specific example: https://github.com/versatica/mediasoup/blob/41e2f52786a61942209512ca5ce20798baad8b96/node/lib/Worker.d.ts#L39

Thanks voltaryx on Twitch for bringing up! 🙌

https://www.typescriptlang.org/tsconfig#exclude

Specifies an array of filenames or patterns that should be skipped when resolving include.

Important: exclude only changes which files are included as a result of the include setting. A file specified by exclude can still become part of your codebase due to an import statement in your code, a types inclusion, a /// <reference directive, or being specified in the files list.

It is not a mechanism that prevents a file from being included in the codebase - it simply changes what the include setting finds.

This gets asked a lot. I should write an article that mentions what's happening and workarounds.

https://discord.com/channels/508357248330760243/942074070860705852/1008777933957120000

I actually don't remember the historical reasons for this is the case, but have the rule memorized...

In general, TypeScript won't let you access properties of a value that aren't defined in all possible types the value might be. So you can't do things like:

declare const value: { a: string } | { b: string };

value.a;
//    ~
// Property 'a' does not exist on type '{ a: string; } | { b: string; }'.
//   Property 'a' does not exist on type '{ b: string; }'.

However, you can do an existence check with the in operator. That will work as a form of type narrowing:

declare const value: { a: string } | { b: string };

if ('a' in value) {
  value.a; // Ok
  // ^? { a: string }
}

https://discord.com/channels/508357248330760243/942074070860705852/1008521509532356649

This is covered in the book, but keeps coming up as something people ask for help with. There's a difference between taking in a keyof typeof type and taking in a type parameter that extends the type.

Example: https://discord.com/channels/508357248330760243/942074070860705852/1008521509532356649

const scratchData = {
  apple: "fruit",
  beet: "vegetable",
} as const;


function getDataFixed(key: keyof typeof scratchData) {
  return scratchData[key];
}

const fromApple = getDataFixed("apple");
//    ^? "fruit" | "vegetable"

function getDataGeneric<Key extends keyof typeof scratchData>(key: Key) {
  return scratchData[key];
}

const fromAppleGeneric = getDataGeneric("apple");
//    ^? "fruit"

Overview

Inspired by this thread: https://twitter.com/rauschma/status/1554533344838311937

I'd like to roughly put the strategies mentioned there in article form:

• css.d.ts
• typed-css-modules