TypeScript

TypeScript is a strongly typed programming language that builds on JavaScript. It adds optional static typing, interfaces, generics, and other modern features that compile to plain JavaScript.

Usage

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "typescript"
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "typescript"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "typescript"
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "typescript"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "template": "typescript"
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "template": "typescript"
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "template": "typescript"
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes
  template="typescript"></live-codes>

<script type="module">
  import "livecodes/web-components";
</script>

The compiled JavaScript output can be viewed in the compiled code viewer.

Module Imports

npm modules can be imported as described in the section about module resolution, including bare module imports and importing from different CDNs.

Editor Support

The code editor provides rich IntelliSense for TypeScript, including autocomplete, parameter hints, hover information, and inline errors. This also works in JavaScript, JSX, TSX, and other languages that use the TypeScript-based editor.

Automatic Types for npm Modules — LiveCodes automatically loads type definitions for imported npm modules, providing autocomplete and type checking without manual configuration.

TypeScript TwoSlash — The editor supports TypeScript TwoSlash, useful for debugging, sharing, and teaching TypeScript. Use // ^? to see inferred types and // @errors: to annotate expected errors inline.

Custom Types — For modules without published types, provide custom type definitions using the types property in custom settings:

Custom Settings

{
  "types": {
    "my-module": "https://cdn.jsdelivr.net/npm/[email protected]/types/index.d.ts"
  }
}

See IntelliSense documentation for full details.

Language Info

Name

typescript

Aliases

ts

Extensions

.ts, .mts, .typescript

Editor

script

Compiler

TypeScript compiler

Version

typescript: v5.9.3

Code Formatting

Using Prettier.

Custom Settings

Custom settings added to the property typescript are passed as compiler options to ts.transpile. Please check the TypeScript documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings

{
  "typescript": {
    "target": "es2020",
    "strictNullChecks": true
  }
}

Starter Template

https://livecodes.io/?template=typescript

Links

• TypeScript
• TypeScript Handbook