TypeScript 安装使用教程

一、TypeScript 简介

TypeScript 是由微软开发的开源编程语言，是 JavaScript 的超集，添加了静态类型、接口、枚举、类等特性，使开发大型应用更安全、可维护、可扩展。最终会被编译为标准的 JavaScript 代码在浏览器或 Node.js 中运行。

二、安装前提条件

• 已安装 Node.js（推荐使用 LTS 版本）

node -v
npm -v

如未安装，请访问 https://nodejs.org/ 下载并安装。

三、安装 TypeScript

3.1 全局安装（适合命令行使用）

npm install -g typescript

验证安装是否成功：

tsc -v

3.2 项目中安装（推荐）

在项目中执行：

npm install typescript --save-dev

四、编写第一个 TypeScript 程序

4.1 新建文件

创建 hello.ts 文件：

let message: string = "Hello, TypeScript!";
console.log(message);

4.2 编译为 JavaScript

tsc hello.ts

生成 hello.js：

var message = "Hello, TypeScript!";
console.log(message);

运行：

node hello.js

五、初始化 tsconfig.json

使用配置文件管理项目编译设置：

tsc --init

生成 tsconfig.json 文件，可配置目标版本、模块系统、路径别名等。

六、TypeScript 特性示例

6.1 类型注解

let num: number = 123;
let str: string = "abc";
let isReady: boolean = true;

6.2 接口（Interface）

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

let user: Person = {
  name: "小奇",
  age: 30
};

6.3 类（Class）

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  speak() {
    console.log(this.name + " 发出声音");
  }
}

6.4 枚举（Enum）

enum Color { Red, Green, Blue }
let c: Color = Color.Green;

七、在 Web 项目中使用 TypeScript

7.1 安装依赖

npm install typescript --save-dev

7.2 配置构建工具（如 Webpack 或 Vite）

• 使用 ts-loader 或 esbuild
• 配置 tsconfig.json
• 配合 React 可用 .tsx 文件

八、常见问题

Q1: 编译失败或找不到命令？

• 检查是否正确安装 TypeScript
• 使用 npx tsc 可避免找不到全局命令

Q2: tsconfig 配置无效？

• 确保使用 tsc 时位于项目根目录
• 或指定配置路径：tsc -p ./config/tsconfig.json

九、推荐工具和资源

编辑器插件

• VS Code：推荐使用，内置 TypeScript 支持
• 插件：TSLint、Prettier、Path Intellisense

学习资源

• TypeScript 官网
• TypeScript 中文文档
• 菜鸟教程 TypeScript

本文由“小奇Java面试”原创发布，转载请注明出处。

可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。