Convert Figma logo to code with AI

microsoft logoTypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

100,112
12,366
100,112
5,705

Top Related Projects

22,079

Adds static typing to JavaScript to improve developer productivity and code quality.

43,160

🐠 Babel is a compiler for writing next generation JavaScript.

Unfancy JavaScript

A strongly-typed language that compiles to JavaScript

Compiler for Elm, a functional language for reliable webapps.

A TypeScript-like language for WebAssembly.

Quick Overview

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional static typing, classes, and modules to JavaScript, enabling developers to write more robust and maintainable code for large-scale applications.

Pros

  • Strong typing system that helps catch errors early in development
  • Enhanced IDE support with better code completion and refactoring tools
  • Improved code readability and maintainability for large projects
  • Seamless integration with existing JavaScript code and libraries

Cons

  • Additional compilation step required before running the code
  • Learning curve for developers new to static typing
  • Potential for overuse of types, leading to unnecessary complexity
  • Slightly longer development time due to type annotations

Code Examples

  1. Basic type annotations:
let name: string = "John";
let age: number = 30;
let isStudent: boolean = false;
  1. Interface definition:
interface Person {
  name: string;
  age: number;
  greet(): void;
}

const john: Person = {
  name: "John",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
  1. Generic function:
function reverseArray<T>(array: T[]): T[] {
  return array.reverse();
}

const numbers = reverseArray([1, 2, 3, 4, 5]);
const strings = reverseArray(["a", "b", "c", "d"]);

Getting Started

To start using TypeScript:

  1. Install TypeScript globally:
npm install -g typescript
  1. Create a new TypeScript file (e.g., app.ts):
function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

greet("TypeScript");
  1. Compile the TypeScript file:
tsc app.ts
  1. Run the compiled JavaScript file:
node app.js

Competitor Comparisons

22,079

Adds static typing to JavaScript to improve developer productivity and code quality.

Pros of Flow

  • Faster type checking due to its incremental nature
  • More permissive type system, allowing for easier adoption in existing projects
  • Better integration with React and other Facebook technologies

Cons of Flow

  • Smaller community and ecosystem compared to TypeScript
  • Less frequent updates and slower development pace
  • Limited IDE support outside of specific editors like VSCode with Flow extension

Code Comparison

TypeScript:

interface Person {
  name: string;
  age: number;
}

function greet(person: Person): string {
  return `Hello, ${person.name}!`;
}

Flow:

// @flow
type Person = {
  name: string,
  age: number,
};

function greet(person: Person): string {
  return `Hello, ${person.name}!`;
}

Both TypeScript and Flow aim to add static typing to JavaScript, but they have different approaches and trade-offs. TypeScript offers a more comprehensive type system and better tooling support, while Flow provides faster type checking and easier integration with existing JavaScript projects. The choice between the two often depends on specific project requirements and team preferences.

43,160

🐠 Babel is a compiler for writing next generation JavaScript.

Pros of Babel

  • Broader language support: Babel can transpile various JavaScript versions and syntaxes, not limited to TypeScript
  • More flexible configuration options for customizing the build process
  • Extensive plugin ecosystem for additional transformations and optimizations

Cons of Babel

  • Lacks built-in type checking, requiring additional tools for TypeScript support
  • May have slightly slower compilation times for large projects
  • Requires more setup and configuration for TypeScript projects

Code Comparison

TypeScript:

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

const greet = (user: User): string => {
  return `Hello, ${user.name}!`;
};

Babel (with TypeScript plugin):

const greet = (user) => {
  return `Hello, ${user.name}!`;
};

Note: Babel removes type annotations during transpilation, while TypeScript preserves them for type checking.

Both TypeScript and Babel are powerful tools for modern JavaScript development. TypeScript offers native support for static typing and advanced language features, while Babel provides a more flexible approach to transpilation with broader language support. The choice between them depends on project requirements, team preferences, and existing tooling infrastructure.

Unfancy JavaScript

Pros of CoffeeScript

  • Concise syntax with fewer keystrokes and less boilerplate
  • Ruby-like syntax that some developers find more readable
  • Built-in features like existential operator and destructuring assignment

Cons of CoffeeScript

  • Smaller community and ecosystem compared to TypeScript
  • Less robust tooling and IDE support
  • Lack of static typing, which can lead to harder-to-catch errors

Code Comparison

CoffeeScript:

square = (x) -> x * x
list = [1, 2, 3, 4, 5]
squares = (square num for num in list)

TypeScript:

const square = (x: number): number => x * x;
const list: number[] = [1, 2, 3, 4, 5];
const squares: number[] = list.map(square);

Key Differences

  • TypeScript provides optional static typing, while CoffeeScript is dynamically typed
  • CoffeeScript compiles to JavaScript, while TypeScript is a superset of JavaScript
  • TypeScript has better integration with modern JavaScript ecosystems and frameworks
  • CoffeeScript focuses on syntactic sugar and brevity, while TypeScript emphasizes type safety and tooling

Community and Adoption

  • TypeScript has a larger and more active community
  • TypeScript is widely used in enterprise environments and large-scale applications
  • CoffeeScript's popularity has declined in recent years, while TypeScript continues to grow

A strongly-typed language that compiles to JavaScript

Pros of PureScript

  • Stronger type system with features like higher-kinded types and row polymorphism
  • Pure functional programming paradigm, leading to more predictable and easier-to-reason-about code
  • Better support for algebraic data types and pattern matching

Cons of PureScript

  • Smaller ecosystem and community compared to TypeScript
  • Steeper learning curve, especially for developers coming from JavaScript
  • Less tooling support and integration with existing JavaScript libraries

Code Comparison

TypeScript:

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

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

PureScript:

type User = { name :: String, age :: Int }

greet :: User -> String
greet user = "Hello, " <> user.name <> "!"

Summary

PureScript offers a more rigorous functional programming experience with advanced type system features, while TypeScript provides a more familiar environment for JavaScript developers with a larger ecosystem. The choice between the two depends on project requirements, team expertise, and desired programming paradigm.

Compiler for Elm, a functional language for reliable webapps.

Pros of Elm compiler

  • Enforces a pure functional programming paradigm, leading to more predictable and maintainable code
  • Built-in error handling and "no runtime exceptions" guarantee
  • Smaller learning curve for developers new to functional programming

Cons of Elm compiler

  • Limited ecosystem and fewer third-party libraries compared to TypeScript
  • Less flexibility in language features and syntax
  • Primarily focused on front-end web development, while TypeScript is more versatile

Code Comparison

Elm:

type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment -> model + 1
    Decrement -> model - 1

TypeScript:

type Action = 'INCREMENT' | 'DECREMENT';

function reducer(state: number, action: Action): number {
  switch (action) {
    case 'INCREMENT': return state + 1;
    case 'DECREMENT': return state - 1;
  }
}

Both examples show a simple state update function, demonstrating how each language handles type definitions and pattern matching. Elm's syntax is more concise and uses custom types, while TypeScript leverages union types and a more familiar JavaScript-like syntax.

A TypeScript-like language for WebAssembly.

Pros of AssemblyScript

  • Compiles to WebAssembly, offering near-native performance
  • Smaller runtime and faster startup times
  • Easier integration with low-level systems and existing C/C++ codebases

Cons of AssemblyScript

  • Smaller ecosystem and community compared to TypeScript
  • Limited browser API support and DOM manipulation capabilities
  • Steeper learning curve for developers not familiar with low-level programming

Code Comparison

TypeScript:

function fibonacci(n: number): number {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

AssemblyScript:

export function fibonacci(n: i32): i32 {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

The code examples are similar, but AssemblyScript uses WebAssembly-specific integer types like i32 instead of JavaScript's number type. AssemblyScript also requires explicit export of functions to be accessible from JavaScript.

AssemblyScript is ideal for performance-critical applications and scenarios where WebAssembly's capabilities are needed. TypeScript remains the go-to choice for general-purpose web development and larger-scale applications due to its extensive ecosystem and broader language features.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

TypeScript

GitHub Actions CI npm version Downloads OpenSSF Scorecard

TypeScript is a language for application-scale JavaScript. TypeScript adds optional types to JavaScript that support tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to readable, standards-based JavaScript. Try it out at the playground, and stay up to date via our blog and Twitter account.

Find others who are using TypeScript at our community page.

Installing

For the latest stable version:

npm install -D typescript

For our nightly builds:

npm install -D typescript@next

Contribute

There are many ways to contribute to TypeScript.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Documentation

Roadmap

For details on our planned features and future direction, please refer to our roadmap.

NPM DownloadsLast 30 Days