TypeScript Installation | Tutorial
Tutorial -- Learning More Than Just Technology, But Dreams!
- Home
- HTML
- JavaScript
- CSS
- Vue
- React
- Python3
- Java
- C
- C++
- C#
- AI
- Go
- SQL
- Linux
- VS Code
- Bootstrap
- Git
- Local Bookmarks
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
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
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:
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:
- Alibaba Qoder: https://qoder.com/
- ByteDance Trae: https://www.trae.com.cn/
Installing Visual Studio Code on Windows
- Download Visual Studio Code.
- Double-click the VSCodeSetup.exe icon
to install.
- After installation, opening Visual Studio Code will show an interface similar to the following:
- 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.
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
YouTip