TypeScript Tutorial

TypeScript is a superset of JavaScript, supporting the ECMAScript 6 standard (ES6 Tutorial）。

TypeScript is a free and open-source programming language developed by Microsoft. It is a superset of JavaScript with added static type checking.

TypeScript is designed for developing large-scale applications. It can be compiled into pure JavaScript, and the compiled JavaScript can run in any browser.

Why Choose TypeScript

TypeScript is an open-source programming language developed by Microsoft, and it is a superset of JavaScript.

TypeScript greatly enhances the JavaScript development experience by adding optional static types, interfaces, enums, and other features.

Main Advantages of TypeScript

  • Static type checking:Catch type errors at compile time, reducing runtime errors
  • Powerful IDE support:Intelligent code completion, navigation, and refactoring
  • Better code readability:Types themselves are the best documentation
  • Modern JavaScript features:Supports ES6+ syntax such as arrow functions, modules, classes, etc.
  • Progressive migration:You can gradually migrate existing JavaScript projects to TypeScript

How TypeScript Works

TypeScript cannot run directly in the browser; it needs to be compiled into JavaScript first. This compilation process checks for type errors and converts TypeScript-specific syntax into pure JavaScript.

SVG Diagram: TypeScript Compilation Process Background TypeScript file .ts file Arrow 1 TypeScript Compiler TypeScript Compiler (tsc) Arrow 2 JavaScript file .js file Browser/Node.js Browser/Node.js Compile Arrow Arrow Marker Definition Type Checking Icon ✓

The TypeScript compiler (tsc) performs type checking during the compilation process. If it finds type errors, it will report them and stop compilation. After successful compilation, pure JavaScript code is generated, which can run in any browser or Node.js environment.

Language Features

TypeScript is a type-enhanced extension of JavaScript. While maintaining compatibility with the original syntax, it introduces a stronger type system and engineering capabilities.

Core Enhanced Capabilities (Unique to TypeScript)

Feature Description
Type Annotations & Compile-time Checking Catch type errors during development, improving code reliability
Type Inference No need to explicitly declare types; the compiler can infer them automatically
Type Erasure Removes type information after compilation, outputting pure JavaScript
Interface Used to define object structures, enhancing code constraints
Enum Provides a set of named constants, improving readability
Generics Supports type reuse, enhancing the flexibility of functions and classes
Mixin Implements the composition pattern for multiple inheritance
Namespace Organizes code structure (old approach, modules are now commonly used)
Tuple Fixed-length arrays with different types
Async (Await) Provides more intuitive async flow control

Syntax Support from ES2015 (Backward Compatible)

TypeScript also supports and compiles down the core features of ECMAScript 2015:

Feature Description
Class Object-oriented programming support
Module Supports modular development (import/export)
Arrow Functions (=>) A more concise function syntax, binding lexical scope
Optional Parameters Function parameters can be omitted
Default Parameters Provides default values for parameters

Differences Between JavaScript and TypeScript

TypeScript is a superset of JavaScript that extends JavaScript syntax. Therefore, existing JavaScript code can work with TypeScript without any modification. TypeScript provides compile-time static type checking through type annotations.

TypeScript can handle existing JavaScript code and only compiles the TypeScript code within it.

First TypeScript Example

In the following example, we use TypeScript to output Hello World!:

Example

const hello : string = "Hello World!" console.log(hello)

Try it Yourself »
Other Extensions