轻松上手 TypeScript：项目搭建全攻略，从环境配置到代码编写一步到位

环境搭建篇

选择合适的开发环境

在进行 TypeScript 项目搭建之前，首先需要选择一个合适的开发环境。目前市面上比较流行的开发环境有 Visual Studio Code、WebStorm、Atom 等。下面以 Visual Studio Code 为例进行说明。

安装 Visual Studio Code

访问 Visual Studio Code 官网：https://code.visualstudio.com/
下载与你的操作系统相匹配的版本。
双击安装程序，按照提示完成安装。

安装 TypeScript

打开 Visual Studio Code。
点击左下角的扩展图标。
在搜索框中输入 TypeScript。
选择第一个结果，点击安装。
安装完成后，重启 Visual Studio Code。

配置 TypeScript 环境

打开项目文件夹。
点击 File -> Preferences -> Settings。
在搜索框中输入 TypeScript。
找到 TypeScript: Configure Tsconfig.json 选项，点击进入。
点击 Create a tsconfig.json file，Visual Studio Code 会自动生成一个 tsconfig.json 文件。

安装 Node.js 和 npm

TypeScript 项目通常需要 Node.js 和 npm 来进行编译和运行。以下是安装步骤：

访问 Node.js 官网：https://nodejs.org/
下载与你的操作系统相匹配的版本。
双击安装程序，按照提示完成安装。
打开命令行工具（如 Windows 的 PowerShell 或 Linux 的终端），输入 node -v 和 npm -v，检查是否成功安装。

项目搭建篇

创建项目目录

src：存放 TypeScript 代码。
dist：存放编译后的 JavaScript 代码。
node_modules：存放项目依赖。

初始化项目

打开命令行工具。
切换到项目根目录。
执行以下命令初始化项目：

npm init -y

创建 TypeScript 文件

在 src 目录下创建一个名为 index.ts 的 TypeScript 文件，并编写以下代码：

function sayHello(name: string): string {
  return `Hello, ${name}!`;
}

console.log(sayHello('TypeScript'));

编译 TypeScript 代码

打开命令行工具。
切换到项目根目录。
执行以下命令编译 TypeScript 代码：

tsc

编译完成后，dist 目录下会生成一个名为 index.js 的文件。

代码编写篇

变量和函数

在 TypeScript 中，变量的声明方式有三种：var、let 和 const。其中，let 和 const 用于声明块级作用域的变量，var 用于声明函数级作用域的变量。

// var 声明
var age: number = 18;

// let 声明
let score: number = 90;

// const 声明
const PI: number = 3.14159;

函数的声明方式也有两种：函数表达式和函数声明。

// 函数表达式
const sayHello = (name: string): string => {
  return `Hello, ${name}!`;
};

// 函数声明
function add(a: number, b: number): number {
  return a + b;
}

接口和类

TypeScript 中的接口用于定义对象的形状，类则用于实现接口。

// 接口
interface Person {
  name: string;
  age: number;
}

// 类
class Student implements Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

类型别名和高级类型

TypeScript 支持类型别名和高级类型，用于简化代码和提高可读性。

// 类型别名
type StringArray = string[];

// 高级类型
type StringOrNumber = string | number;

项目运行篇

启动项目

打开命令行工具。
切换到项目根目录。
执行以下命令启动项目：

node dist/index.js

在控制台中，你会看到以下输出：

Hello, TypeScript!

至此，你已经成功搭建了一个 TypeScript 项目，并编写了简单的 TypeScript 代码。希望这篇教程能帮助你轻松上手 TypeScript。