Online TypeScript Editor and Compiler - Web Development with Types

Start by creating TypeScript components with .tsx extension:

// Define props interface
interface Props {
  name: string;
  age: number;
  onClick?: () => void;
}

// Functional component with types
const MyComponent: React.FC<Props> = ({ name, age, onClick }) => {
  return (
    <div onClick={onClick}>
      {name} is {age} years old
    </div>
  );
};

// Next.js page with props
export const getServerSideProps: GetServerSideProps<Props> = async () => {
  return {
    props: {
      name: 'John',
      age: 30
    }
  };
};

Our editor supports TypeScript React development with live preview and error checking.

Generics allow you to write flexible, reusable code:

// Generic function
function getArray<T>(items: T[]): T[] {
  return new Array<T>().concat(items);
}

// Generic interface
interface Container<T> {
  value: T;
  getValue(): T;
}

// Using generics
let numbers = getArray<number>([1, 2, 3]);
let strings = getArray<string>(['a', 'b', 'c']);

// Generic constraints
interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

Practice implementing generics in our TypeScript playground with real-time type checking.

Here's how to work with async operations safely:

// Define response type
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

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

// Async function with type safety
async function getUser(id: number): Promise<ApiResponse<User>> {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  } catch (error) {
    throw error instanceof Error
      ? error
      : new Error('An unknown error occurred');
  }
}

Test async code in our editor with built-in error handling and debugging.

Here are the key differences with examples:

// Interface can be extended
interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

// Interface declaration merging
interface Car {
  brand: string;
}
interface Car {
  model: string;
} // Both properties are merged

// Type aliases with unions and intersections
type Pet = Dog | Cat;
type DogWithCollar = Dog & { collarColor: string };

// Tuple types
type Coordinates = [number, number];

Experiment with both in our TypeScript playground to understand their use cases.

Learn to use decorators for class enhancement:

// Enable in tsconfig.json:
// { "experimentalDecorators": true }

// Method decorator
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 with decorator
class Example {
  @log
  greet(name: string) {
    return `Hello, ${name}`;
  }
}

const example = new Example();
example.greet('TypeScript'); // Logs decorator output

Try implementing decorators in our editor with real-time compilation feedback.

Type-safe DOM manipulation examples:

// Type-safe query selectors
const button = document.querySelector<HTMLButtonElement>('.submit-btn');
const form = document.querySelector<HTMLFormElement>('#myForm');

// Event handling with type checking
button?.addEventListener('click', (event: MouseEvent) => {
  event.preventDefault();
  const target = event.currentTarget as HTMLButtonElement;
  target.disabled = true;
});

// Form handling with types
form?.addEventListener('submit', (event: SubmitEvent) => {
  event.preventDefault();
  const formData = new FormData(event.target as HTMLFormElement);
  const email = formData.get('email') as string;
});

// Custom element types
interface CustomInput extends HTMLInputElement {
  customValue: string;
}

Our editor provides immediate feedback on DOM type errors.