6

Lately, I have seen various questions that use TypeScript in Stack Snippets. They look like this:

There is a problem with my code. Instead of doing x, it does y. Here is my code:

function doSomething(input: string) {
  // Do something
  console.log("function");
}

doSomething("something");

 

When compiled into JavaScript, no errors are thrown.

Obviously, we can see a few problems here.

  1. If there are other errors, we might not be able to see them.
  2. We can't see what the asker is trying to do.
  3. We can't see the issue that they are having.

What can we do about this?

2
  • 1
    Not much, I guess. Just edit them into proper snippets or, if the question is TypeScript-specific, convert those to simple code blocks. Also, don't forget the official Playground. Copy-pasting the code there and adding a link to the question (+converting to code block) is a good way to solve this.
    – 0Valt
    Commented Aug 21, 2022 at 22:18
  • If the problem is with the logic, and not the typings, then TypeScript is very likely irrelevant, and OP has simply failed to reduce the question to a MCVE. If the question also contains a Stack Snippet with TypeScript code, OP has also failed to check the preview to see that TypeScript isn't understood there (which is the right approach, IMO). Commented Aug 21, 2022 at 22:44

2 Answers 2

7

You have two options. One of them is to make a feature request for TypeScript support for Stack Snippets.
Pros: If the feature is added, when new people add TypeScript in Stack Snippets, the code will run correctly.
Cons: They probably won't add the feature. Why? Similar feature requests like this one have been declined. Why? here's a quote from the question:

Stack Overflow is not for hosting and iterating on large complex examples, the kind where SASS is really useful, and the kind that JSFiddle helps you produce. The purpose of Stack Overflow's snippets is to host minimal reproducible examples to support your question, not to host large, complicated examples that allow groups to iteratively work on them.

More or less the same with TypeScript. So maybe it's not the best idea to create a feature request...

The other option is to edit their post. So this:

There is a problem with my code. Instead of doing x, it does y. Here is my code:

function doSomething(input: string) {
  // Do something
  console.log("function", input);
}

doSomething("something");

Would turn into this:

There is a problem with my code. Instead of doing x, it does y. Here is my code:

function doSomething(input: string)
{
    // Do something
    console.log("function", input);
}

doSomething("something");

When compiled into JavaScript:

"use strict";
function doSomething(input) {
    // Do something
    console.log("function", input);
}
doSomething("something");

Run it here

The key part is displaying the TypeScript code in a code block. A code block containing the compiled JavaScript is nice, as well as a place where you can run the code (perhaps an online IDE)

4

I think this answer includes some excellent suggestions: always include your actual code in a code block/snippet in the post: the use of Stack Overflow should (ideally) not depend on the availability of external resources. Linking to the same code in the TypeScript Playground is recommended because of its rich interactive experience powered by IntelliSense and the TS Language Server: even with its limitations, it's a fantastic reproduction tool.

I want to provide an additional option: by including just a little boilerplate in a snippet: linking to a hosted transpiler script (e.g. @babel/standalone), you can actually include just the TypeScript source directly in a <script> tag in the snippet HTML, and the compilation will happen client side, eliminating the need to include both source and compiled code in the post body, while still getting snippet output. Here's an example of what I mean:


TS Playground

<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="typescript">

function add (numbers: number[]): number {
  let sum = 0;
  for (const n of numbers) sum += n;
  return sum;
}

const sum = add([1, 2, 3, 4]);
console.log(sum); // 10

</script>

Even if unpkg (or other external transpiler script resource server) stops responding one day, the TS source code is still embedded in the post body.

This, of course, simply strips types from the source, so it won't include compiler-related diagnostic emits (they are styled in the playground as wavy underlines with tooltip-style information appearing in reaction to hovering):

typescript-playground-intellisense-diagnostic-tooltip-hover-quick-info

To get that information in the snippet, you'd need to link and use the actual TypeScript compiler JS API, and those emits would need be visible somewhere in order to be useful in the post context. The snippet editor's virtual console is not really suited to display those kinds of messages, so I think type-stripping in a code snippet + linking to the TS Playground is a reasonable compromise to avoid a serious amount of boilerplate in every post (and a terrible first-load experience — unpkg reports the typescriptServices.js script as being ~10.5 MB in size). You can (and, ideally, should) also include any compiler diagnostic messages in additional static code blocks in the post body, like this:

const sum = add(1, 2, 3, 4); /*
                   ~~~~~~~
Expected 1 arguments, but got 4.(2554) */

// Oops, that should have been a single array argument instead of serial numbers

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .