Skip to main content
LiveCodes provides complete TypeScript support with the official TypeScript compiler, including full type checking, IntelliSense, and JSX support.

​
Configuration

Language Name: typescript
File Extensions: .ts, .mts, .typescript
Editor: Script editor
Compiler: TypeScript official compiler
Target: ES2020 by default

​
Features

​
Static Type Checking

Full TypeScript type system: 
interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

function greetUser(user: User): string {
  return `Hello, ${user.name}!`;
}

const user: User = {
  id: 1,
  name: 'John Doe',
  email: '[email protected]',
  role: 'admin',
};

console.log(greetUser(user));

​
Generics

Type-safe generic functions and classes: 
function map<T, U>(array: T[], fn: (item: T) => U): U[] {
  return array.map(fn);
}

const numbers = [1, 2, 3, 4, 5];
const doubled = map(numbers, (n) => n * 2);
// Type inferred as number[]

class Container<T> {
  constructor(private value: T) {}
  
  getValue(): T {
    return this.value;
  }
  
  map<U>(fn: (value: T) => U): Container<U> {
    return new Container(fn(this.value));
  }
}

const container = new Container(42);
const stringContainer = container.map(n => n.toString());
// Type inferred as Container<string>

​
Advanced Types

Union types, intersections, and mapped types: 
// Union types
type Status = 'pending' | 'success' | 'error';

// Intersection types
type Named = { name: string };
type Aged = { age: number };
type Person = Named & Aged;

// Mapped types
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

// Conditional types
type IsString<T> = T extends string ? 'yes' : 'no';

// Utility types
type PartialUser = Partial<User>;
type RequiredUser = Required<User>;
type UserKeys = keyof User;

​
Type Inference

Powerful type inference: 
// Inferred as number
const count = 42;

// Inferred as string[]
const names = ['Alice', 'Bob', 'Charlie'];

// Inferred from return type
function add(a: number, b: number) {
  return a + b; // Inferred as number
}

// Inferred from array methods
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // number[]

​
JSX Support

TypeScript with JSX (TSX): 
interface Props {
  title: string;
  count: number;
  onIncrement: () => void;
}

function Counter({ title, count, onIncrement }: Props) {
  return (
    <div>
      <h2>{title}</h2>
      <p>Count: {count}</p>
      <button onClick={onIncrement}>Increment</button>
    </div>
  );
}
For TSX files, use the .tsx extension or select “TSX” as the language.

​
Enums

Numeric and string enums: 
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}

function move(direction: Direction) {
  console.log(`Moving ${direction}`);
}

move(Direction.Up);

// Numeric enums
enum Status {
  Pending,
  Active,
  Completed,
}

​
Decorators

Experimental decorator support: 
function log(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${key} with`, args);
    return original.apply(this, args);
  };
  return descriptor;
}

class Calculator {
  @log
  add(a: number, b: number): number {
    return a + b;
  }
}

​
Compiler Options

Configure TypeScript compiler via customSettings: 
{
  "customSettings": {
    "typescript": {
      "target": "es2020",
      "jsx": "react",
      "strict": true,
      "esModuleInterop": true,
      "allowUmdGlobalAccess": true
    }
  }
}

​
Default Options

LiveCodes uses these TypeScript compiler options by default: 
{
  target: 'es2020',
  jsx: 'react',
  allowUmdGlobalAccess: true,
  esModuleInterop: true,
}

​
Supported Compiler Options

{
  "strict": true,
  "noImplicitAny": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "noUnusedLocals": true,
  "noUnusedParameters": true,
}

​
Editor Support

​
IntelliSense

Full IntelliSense support powered by TypeScript Language Service:
  • Autocomplete: Type-aware suggestions
  • Parameter hints: Function signature help
  • Quick info: Hover for type information
  • Error checking: Real-time type errors
  • Go to definition: Navigate to type definitions
  • Refactoring: Rename symbols, extract functions

​
Monaco Editor

TypeScript support via Monaco: 
// Hover over any symbol for type info
const users: User[] = [];

// Ctrl+Space for autocomplete
users.map

// Compiler options
{
  "editorSupport": {
    "compilerOptions": {
      "checkJs": true,
      "strictNullChecks": true
    }
  }
}

​
Type Definitions

Automatic type definitions from DefinitelyTyped: 
import React from 'react';
import _ from 'lodash';
import axios from 'axios';

// Types automatically loaded from @types packages
const users = await axios.get<User[]>('/api/users');
_.groupBy(users.data, 'role');

​
Import External Packages

Import with full type support: 
import { z } from 'zod';
import type { User } from './types';

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
});

type ValidatedUser = z.infer<typeof UserSchema>;

const user: ValidatedUser = UserSchema.parse({
  id: 1,
  name: 'John',
  email: '[email protected]',
});

​
Type-Only Imports

Import types without runtime overhead: 
import type { User, Post } from './types';
import type React from 'react';

const user: User = {
  id: 1,
  name: 'Alice',
  email: '[email protected]',
};

​
Example Projects

​
Typed API Client

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

class ApiClient {
  constructor(private baseUrl: string) {}
  
  async get<T>(endpoint: string): Promise<ApiResponse<T>> {
    const response = await fetch(`${this.baseUrl}${endpoint}`);
    const data = await response.json();
    return {
      data,
      status: response.status,
      message: response.ok ? 'Success' : 'Error',
    };
  }
}

interface User {
  id: number;
  name: string;
  email: string;
}

const client = new ApiClient('https://jsonplaceholder.typicode.com');
const result = await client.get<User[]>('/users');

console.log(result.data);

​
Generic State Management

class Store<T> {
  private state: T;
  private listeners: Array<(state: T) => void> = [];
  
  constructor(initialState: T) {
    this.state = initialState;
  }
  
  getState(): T {
    return this.state;
  }
  
  setState(updater: (state: T) => T): void {
    this.state = updater(this.state);
    this.listeners.forEach(listener => listener(this.state));
  }
  
  subscribe(listener: (state: T) => void): () => void {
    this.listeners.push(listener);
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);
    };
  }
}

interface AppState {
  count: number;
  user: User | null;
}

const store = new Store<AppState>({
  count: 0,
  user: null,
});

store.subscribe(state => {
  console.log('State changed:', state);
});

store.setState(state => ({
  ...state,
  count: state.count + 1,
}));

​
Code Formatting

Automatic formatting with Prettier using babel-ts parser: 
// Format with Ctrl+Shift+F or Cmd+Shift+F
interface User{id:number;name:string;}

// Formats to:
interface User {
  id: number;
  name: string;
}

​
Best Practices

Use strict type checking for better type safety:
{
  "customSettings": {
    "typescript": {
      "strict": true
    }
  }
}
Let TypeScript infer types when obvious:
// Good - type inferred
const count = 42;
const names = ['Alice', 'Bob'];

// Unnecessary explicit type
const count: number = 42;
Use interfaces for object shapes:
// Good
interface User {
  name: string;
  age: number;
}

// For unions/primitives, use type
type Status = 'pending' | 'active';
Create literal types with const assertions:
const colors = ['red', 'blue', 'green'] as const;
type Color = typeof colors[number]; // 'red' | 'blue' | 'green'

​
Limitations

No TSConfig.json: Configuration is set via customSettings in the project config, not via tsconfig.json.
TypeScript compilation happens in the browser. Very large projects may experience slower compilation times.

JavaScript

Plain JavaScript without type checking

React TSX

TypeScript with React JSX

Flow

Alternative static type checker

Babel

Advanced JavaScript transformations

Build docs developers (and LLMs) love

Get started for freeTalk to us