YouTip

# TypeScript Tutorial !(#) TypeScript is a superset of JavaScript that supports the ECMAScript 6 standard ((#)). TypeScript is a free and open-source programming language developed by Microsoft. It adds a superset with static type checking on top of JavaScript. The design goal of TypeScript is to develop 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. It is a superset of JavaScript, meaning any valid JavaScript code is also valid TypeScript code. 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. * **Gradual Migration:** Existing JavaScript projects can be migrated to TypeScript incrementally. ### 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. The TypeScript compiler (tsc) performs type checking during compilation. If it finds type errors, it will report them and prevent compilation. After successful compilation, it generates pure JavaScript code that can run in any browser or Node.js environment. * * * ## Language Features TypeScript is an enhanced extension of JavaScript's type system. While maintaining compatibility with the original syntax, it introduces a stronger type system and engineering capabilities. ### Core Enhanced Capabilities (TypeScript Exclusive) | Feature | Description | | --- | --- | | Type Annotation & 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 collection of named constants, improving readability. | | Generics | Supports type reuse, enhancing the flexibility of functions and classes. | | Mixin | Implements a composition pattern for multiple inheritance. | | Namespace | Organizes code structure (older approach, now mostly using modules). | | Tuple | Fixed-length arrays with different types. | | Await | Provides more intuitive asynchronous flow control. | ### Syntax Support from ES2015 (Backward Compatible) TypeScript also supports and compiles down to ECMAScript 2015 core features: | Feature | Description | | --- | --- | | Class | Supports object-oriented programming. | | Module | Supports modular development (import/export). | | Arrow Function (=>) | 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's syntax. Therefore, existing JavaScript code can work with TypeScript without any modifications. TypeScript provides compile-time static type checking through type annotations. TypeScript can handle existing JavaScript code and only compiles the TypeScript parts. !(#) !(#) * * * ## 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 »](#)