YouTip LogoYouTip

Ts Install

TypeScript Installation | Tutorial

Tutorial -- Learning More Than Just Technology, But Dreams!

TypeScript Tutorial

TypeScript Tutorial TypeScript Introduction TypeScript Installation TypeScript VS Code TypeScript Features TypeScript Basic Syntax TypeScript Basic Structure TypeScript vs JavaScript TypeScript tsconfig.json TypeScript Compiler Options

Type System Basics

TypeScript Basic Types TypeScript Variable Declarations TypeScript Operators TypeScript Conditional Statements TypeScript Loops TypeScript Functions TypeScript Function Overloading TypeScript Arrow Functions TypeScript Iterators TypeScript async/await TypeScript Promise TypeScript Number TypeScript String TypeScript Array TypeScript Map Object TypeScript Enum TypeScript Type Inference TypeScript Type Assertions TypeScript null and undefined TypeScript Symbol TypeScript Special Types TypeScript Set/WeakMap TypeScript Tuple TypeScript Union Types TypeScript Interface TypeScript Class TypeScript Object TypeScript Generics TypeScript Namespace TypeScript Module TypeScript Declaration Files TypeScript Quiz

Advanced

TypeScript Type Alias TypeScript Literal Types TypeScript Abstract Class TypeScript Access Modifiers TypeScript Mixin TypeScript Decorators TypeScript Type Guards TypeScript Optional Chaining TypeScript Utility Types TypeScript Conditional Types TypeScript Mapped Types TypeScript Class Inheritance and Polymorphism TypeScript Error Handling TypeScript Intersection Types TypeScript Template Literal Types TypeScript Migration from JavaScript TypeScript Unit Testing TypeScript infer Keyword TypeScript Indexed Types and keyof Keyword TypeScript Recursive Types TypeScript Covariance and Contravariance TypeScript Path Mapping paths TypeScript Project References References TypeScript Monorepo Configuration TypeScript Design Patterns TypeScript Performance Optimization TypeScript Comprehensive Project Practice TypeScript + Node.js Practice TypeScript + Vue3 Practice TypeScript + React Practice

TypeScript Introduction

TypeScript VS Code

Deep Dive

  • Programming
  • Scripting
  • Web Services
  • Software
  • Scripting Languages
  • Development Tools
  • Computer Science
  • Web Design & Development
  • Programming Languages

TypeScript Installation

This article introduces the installation of the TypeScript environment.

We need to use the npm tool for installation. If you are not familiar with npm, you can refer to our NPM Usage Introduction.

Installing TypeScript with NPM

If the npm tool is already installed in your local environment, you can use the following commands to install it.

Using a domestic mirror:

npm config set registry https://registry.npmmirror.com

Installing TypeScript:

npm install -g typescript

After installation, we can use the tsc command to execute TypeScript-related code. Here is how to check the version number:

$ tsc -v
Version 3.2.2

Then we create a new file named app.ts with the following code:

var message:string = "Hello World"
console.log(message)

We typically use .ts as the file extension for TypeScript code files.

Then execute the following command to convert TypeScript to JavaScript code:

tsc app.ts

TypeScript Compiler

At this point, an app.js file will be generated in the current directory (same directory as app.ts), with the following code:

var message = "Hello World";
console.log(message);

Use the node command to execute the app.js file:

$ node app.js
Hello World

The process of converting TypeScript to JavaScript is illustrated in the following diagram:

TypeScript to JavaScript Process


Introduction to VS Code

Many IDEs support TypeScript plugins, such as: VS Code, Sublime Text 2, WebStorm / PHPStorm, Eclipse, etc.

This chapter mainly introduces VS Code. VS Code is a cross-platform source code editor that can run on Mac OS X, Windows, and Linux, designed for writing modern web and cloud applications, developed by Microsoft.

VS Code Tutorial:

Additionally, Alibaba and ByteDance in China also have AI IDEs developed based on VS Code:

Installing Visual Studio Code on Windows

  1. Download Visual Studio Code.
  2. Double-click the VSCodeSetup.exe icon Setup Icon to install.
  3. After installation, opening Visual Studio Code will show an interface similar to the following:
  4. We can click on the currently edited code file in the left window and select open in command prompt. At this point, we can use the tsc command in the lower right part of the screen to execute TypeScript file code.

VS Code Command Prompt

Installing Visual Studio Code on Mac OS X

For Mac OS X installation and configuration of Visual Studio Code, please refer to: https://code.visualstudio.com/Docs/editor/setup

Installing Visual Studio Code on Linux

For Linux installation and configuration of Visual Studio Code, please refer to: https://code.visualstudio.com/Docs/editor/setup

← Ts TypeJs This β†’