5 posts tagged with "TypeScript"

For cleaner tsc (TypeScript compiler) output: pipe its output into my package tidy-tsc:

npm i -g tidy-tsc

npx tsc | tidyt
npx tsc -b | tidyt # etc.

# in one of my packages
npm run compile | tidyt

| tidyt cleans up the tsc output so instead of seeing tons of logs for every single file's errors like this:

src/file.ts:9:18 - error TS2304: Cannot find name 'missingValue'.
9 const value = missingValue;
                ~~~~~~~~~~~~
src/file.ts:18:15 - error TS7006: Parameter 'char' implicitly has an 'any' type.
18         .map((char, index) => (index % 2 ? char.toUpperCase() : char.toLowerCase()))
                 ~~~~
src/file.ts:18:21 - error TS7006: Parameter 'index' implicitly has an 'any' type.
18         .map((char, index) => (index % 2 ? char.toUpperCase() : char.toLowerCase()))
                       ~~~~~
Found 3 errors.

All you see is this:

Failed files (1):

src/file.ts

It's really hard to get new Worker() from node:worker_threads to work when running code via tsx. I finally got an example working. Here's how to do it:

import {Worker} from 'node:worker_threads';

const workerPath = import.meta.resolve('./sample-worker.js');
const worker = import.meta.filename.endsWith('.ts')
    ? new Worker(
          `import('tsx/esm/api').then(({ register }) => { register(); import('${workerPath}') })`,
          {
              eval: true,
          },
      )
    : new Worker(workerPath);

• PickDeep is a utility type that expands TypeScript's built-in Pick utility type to pick keys in nested objects.
• PickSelection is a utility type that accomplishes the same thing but with a different interface: using selection sets (similar to GraphQL selection or Prisma's selection interface).

While both are still supported, PickSelection is now the recommended utility type. This blog post will explain why.

If you're using TypeScript and ESLint in VS Code, wip files or legacy files can quickly explode into a sea of red squiggles, making it hard to know where to start or track what's going on.

I like to hone in on type errors first, since they're typically more critical (as in, type errors will often completely crash your code). I keep those as scary red squiggles and tone ESLint down a bit by changing all its squiggles to just (orange) warnings.

This is easy to do with a quick edit to your user settings JSON file (accessed via the >Preferences: Open User Settings (JSON) command in VS Code):

"eslint.rules.customizations": [
    { "rule": "*", "severity": "warn" },
]

Use {@link VarName} in JSDoc comments when referencing variables or types to get:

• "Rename Symbol" support in VS Code
• "Go to Definition" support in VS Code
• "Find All References" support in VS Code
• generated doc links to the original reference (in packages like typedoc)

I assume that all the features in VS Code are driven by the TypeScript Language Server and thus are applicable to any editor that utilizes that same language server.