TypeScript Without Transpilation (2021)

https://incrementalelm.com/typescript-without-transpilation/

by berlam • 3 years ago

44 43 3 years ago

JSDoc can get you pretty far, but it can be clumsy sometimes. There’s a [TC39 proposal](https://github.com/tc39/proposal-type-annotations) to allow types to live in JS code and be treated as comments (similar with Python types today)

actionfromafar• 3 years ago

Could that improve execution performance?

norman784• 3 years ago

AFAIK that's not a goal for this proposal.

zdragnar2• 3 years ago

No. First paragraph of the proposal:

This proposal aims to enable developers to add type annotations to their JavaScript code, allowing those annotations to be checked by a type checker that is external to JavaScript. At runtime, a JavaScript engine ignores them, treating the types as comments.

The problem is handling errors. If the engine does a full analysis of every code path to ensure the types aren't violated, there's a startup penalty - this includes every time a dynamic import is used, which could interfere with the user as they interact with the page. I'm not entirely sure that such an analysis would be entirely possible- there are many ways to add layers of indirection to JavaScript code.

If the engine doesn't do a full analysis up front but instead checks every time a type is used, you end up with, at best, roughly the same performance characteristics that current JIT engines already have.

alexlur2• 3 years ago

Runtime type checks usually decrease the performance.

franky472• 3 years ago

Sorry for being that guy, but this should probably be called "typechecking without transpilation".

What ends up being written is not TypeScript syntax (which does require transpilation to run).

JSDoc is awesome for incremental adoption though, I've migrated a few codebases this way without too much pain.

antihero• 3 years ago

Is there some command you can run to rewrite all the JSDoc as actual TypeScript?

alexlur2• 3 years ago

Programmatically yes: https://github.com/microsoft/TypeScript/blob/28cd1fbd13b8d09...

You just need to call this from somewhere like ts-morph.

bandergirl• 3 years ago

Not TypeScript the language, but TypeScript the typechecker program. “Typescript without transpilation” is still perfectly accurate.

fenomas3• 3 years ago

Vouched. This is the point of the thing - the typechecking benefits come from running `tsc` on your code (or VSCode will do it for you in the background and show you linter errors if you have typescript installed somewhere it knows about).

Incidentally I've been doing my JS projects this way for 2-3 years and I really dig it.

franky472• 3 years ago

That's my one grief with tsc: it does too many different things.

- Type checking

- Transpiling to multiple formats (CJS/ESM, JSX and the like)

- Generating declaration files (.d.ts)

While there are modern alternatives for transpiling, much faster than tsc (esbuild, swc), typechecking and declaration generation are still very slow operations.

jchanimal2• 3 years ago

Does anyone know if I have a TypeScript project, is there an automated process to turn it into this format this article describes? Eject for TS, I guess.

iraldir• 3 years ago

GPT-4 would probably do a good job at that if the code is not sensitive

Firmwarrior• 3 years ago

Is there some way to load an entire large project into gpt4? Or do you mean to have it translate one file at a time without context?

gsuuon• 3 years ago

You can probably do this with the typescript compiler API https://github.com/microsoft/TypeScript/wiki/Using-the-Compi...

jchanimal2• 3 years ago

Kinda seems like the dreamiest build target.

graftak2• 3 years ago

Typescript is a superset of Js/tsdocs so you’ll probably get a long way but at some point the types will be dumbed down.

afavour• 3 years ago

I've found a happy medium to be annotating functions etc with JSDoc style comments but keeping interfaces etc. in a .d.ts file. The Typescript compiler is able to import it from a .js file just fine.

toastercat• 3 years ago

This is the way.

syspec• 3 years ago

Agree, any complex types just get placed in their own `.d.ts` file, and import that into JSDoc comments

  /// Top of file usually
  /**
   * @typedef {import('./typedefs/MyThing')} MyThing
   */
  
  /// Later
  
  /**
   * @param {MyThing} x
   */
  function(x) {
    //
  }

fenomas3• 3 years ago

Worth noting that you can also do this from plain .js files.

    /** @param { import('./foo.js').SomeType } arg */
    function doThing(arg) {
        // ...
    }

The thing being imported can be a JS thing like an exported class, or a JSDoc type that's defined with @typedef.

eyelidlessness2• 3 years ago

The one frustrating thing is that you can’t just use .d.ts files in a project to define the full types for their corresponding .js module, without importing each type def individually. And assigning imported type defs to classes is severely limited and confusing. It’s a shame, because the same structure/approach ~just works for packages installed under node_modules.

hliyan• 3 years ago

I thought this was going to be a project like ts-node [1]

[1] https://github.com/TypeStrong/ts-node

Ciantic• 3 years ago

I'm using this setup at the moment, mostly because I work on legacy code base that has no good types yet.

Typically you would do jsconfig.json though, which is same as tsconfig.json but allowJs is already set. Mostly stylistic change, but some tooling might benefit for having jsconfig instead of tsconfig.

WorldMaker3• 3 years ago

Yeah, all three settings this article mentions at the top are correctly defaulted when using a jsconfig.json file instead of a tsconfig.json file: allowJs, checkJs, and noEmit.

Additionally, I don't know about other editors but I know that VS Code subtly adjusts some workspace detail defaults based on the presence of jsconfig.json over tsconfig.json.

It's slightly more than just a stylistic change, but yeah there's no "wrong answer" if you prefer tsconfig.json to jsconfig.json, especially if you think there may be a subset of files you wind up preferring TS syntax and want to transpile/type-strip in the future (dropping the "noEmit"). (If for some reason you need to do a bunch of generics, for instance, that's a lot easier with type-stripping from TS syntax than trying to squeeze in JSDoc. Also, maybe you'll bump into a situation where TS downleveling is helpful, for a while I had projects that needed downlevelIteration to support certain IE/Safari versions and letting TS downlevel that was a lot easier and cleaner than the Babel-based alternatives.)

tantalor2• 3 years ago

Confused about the mentions of Elm. What does this have to do with Elm?

KnobbleMcKnees• 3 years ago

I'm more confused because I thought the first rule of Elm was that you'll never meet anyone that uses it

hombre_fatal• 3 years ago

It's an Elm blog. It starts off with saying that even when writing Elm, you still have to drop in to Javascript.

tantalor2• 3 years ago

Okay... that's not saying much though? Why even mention it? I don't know anything about Elm but this looks like a blog post about JS, not Elm, but it's talking about Elm right from the start as if that's an important distinction to make here.

It's like those recipe blogs that have to give you their life story before telling you how to make a meatball. Just get to the damn point and skip the bullshit, please.

oefrha• 3 years ago

// @ts-check works until you need to do an assertion, a cast, a predicate, pass an explicit type to a generic method, etc., then it gets very annoying. I only ever use it if I’m writing a single self-contained and relatively short script and can’t be bothered with a build step.

stevebmark• 3 years ago

JSDoc comments are definitely not the “best of both worlds,” they are a limited and verbose subset of typing. I would only use them for specific reasons, like I’m in a hostile ecosystem that dogmatically doesn’t want any build steps (like WebGL/WebGPU engines).

graftak2• 3 years ago

It’s also really nice to have annotations describing what a function or object does, consuming a library is considerately worse without them, as they often prevent the need for looking up documentation, and they can even link to the right documentation page (although that is very rare).

When I write them I don’t annotate types though, that’s already done by typescript, and editors like vscode even gives you type hints in a js file if it detects d.ts files in the source.

mickael-kerjean• 3 years ago

Right on time as I've been trying to add some type safety onto my OSS project. Does anyone have some extra info on how to best leverage JSDoc to write safe(r) JS code?

throw_m239339• 3 years ago

This is exactly how I use typescript, as a linter and static type analyzer for javascript. Unfortunately, typescript support for JSdoc is quite basic. So that method has its limit. But I'm not committing any typescript code.

Someone here just suggested to import type definition files with JS doc annotations, and that's actually a good idea.

eyelidlessness2• 3 years ago

Some of the limitations listed are wrong:

The main limitation is that you don't have access to some TypeScript-specific syntax.
* as, also known as type assertions (or casts)

You generally shouldn’t (as the article notes), but you can:

  const foo = /** @type {Bar} */ ({
    something: {
      satisfying: 'Bar',
    },
  });

Note: the parentheses are necessary, they are the JS/JSDoc mechanism for type casts.

This also works for `as const`, which is often better when you can use readonly types:

  const foo = /** @type {const} */ ({
    something: 'else',
  });
  // { readonly something: 'else' }

Better still, the satisfies operator also works (its JSDoc support lagged a bit though):

  /** @satisfies {Bar} */
  const foo = …;

This will infer the type of `foo` and check it for assignability to `Bar`.

* is, also known as type predicates

This definitely works:

  /**
   * @param {unknown} value
   * @return {value is Foo}
   */
  const isFoo = (value) => …

You can also define the guard as a standalone/assignable type:

  /**
   * @callback IsFoo
   * @param {unknown} value
   * @return {value is Foo}
   */

The @callback tag is ~equivalent to a type alias for a function signature.

Also useful, if needed, the @template tag which is roughly equivalent to TS type parameters (generics) which you can use, for example, to assign generic type guards:

  /**
   * @template T
   * @callback IsT
   * @param {unknown} value
   * @return {value is T}
   */

  /** @type {IsT<Foo>} */
  const isFoo = (value) => …

[Disclaimer: typed this comment on my phone from memory, apologies for any typos or mistakes!]

TypeScript Without Transpilation (2021)

Related Stories