环境准备

1. 安装Node.js和npm

TypeScript是一个JavaScript的超集，它通过工具编译成纯JavaScript。因此，首先需要在你的开发环境中安装Node.js和npm（Node.js包管理器）。

  • Windows系统：可以从Node.js官网下载并安装。
  • macOS系统：可以使用Homebrew命令 brew install node 进行安装。
  • Linux系统：可以使用包管理器安装，例如在Ubuntu上可以使用 sudo apt-get install nodejs npm -y。

2. 安装TypeScript

安装TypeScript可以通过npm全局安装，命令如下：

npm install -g typescript

安装完成后，可以在命令行中运行 tsc -v 来检查TypeScript版本。

3. 初始化npm项目

在准备好的目录下，通过以下命令创建一个新的npm项目：

npm init -y

这会创建一个名为 package.json 的文件，记录了项目的依赖、脚本等信息。

配置TypeScript

1. 创建tsconfig.json

TypeScript的编译配置文件是 tsconfig.json，它位于项目根目录。

  • 使用命令 tsc --init 自动生成一个基础配置文件。
  • 根据项目需求调整配置，例如：
{
  "compilerOptions": {
    "target": "es5",        // 指定ECMAScript目标版本
    "module": "commonjs",    // 指定模块代码生成方式
    "outDir": "./dist",      // 指定输出目录
    "rootDir": "./src",      // 指定源代码目录
    "strict": true,          // 启用所有严格类型检查选项
    "esModuleInterop": true, // 允许默认导入非ES模块
    "skipLibCheck": true,    // 跳过所有声明文件（*.d.ts）的类型检查
    "forceConsistentCasingInFileNames": true // 确保文件名的大小写一致
  },
  "include": [
    "src/**/*" // 包含要编译的文件
  ],
  "exclude": [
    "node_modules", // 排除不需要编译的文件夹
    "**/*.spec.ts"  // 排除测试文件
  ]
}

2. 编写TypeScript代码

在 src 目录下创建TypeScript文件，例如 app.ts：

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

console.log(greet("World"));

编译与运行

1. 编译TypeScript

在命令行中运行以下命令编译TypeScript文件：

tsc

编译完成后，会在 dist 目录下生成对应的JavaScript文件。

2. 运行JavaScript代码

在编译成功后，可以使用Node.js运行生成的JavaScript文件：

node dist/app.js

3. 脚本自动化

在 package.json 文件中添加一个 scripts 字段来自动化编译过程：

"scripts": {
  "build": "tsc",
  "start": "node dist/app.js"
}

然后，可以使用以下命令编译并运行项目：

npm run build
npm start

代码实践

1. 使用模块

TypeScript支持ES6模块，你可以通过 import 和 export 关键字来导入和导出模块。

// src/module.ts
export function add(a: number, b: number): number {
  return a + b;
}

// src/app.ts
import { add } from './module';
console.log(add(1, 2));

2. 接口与类型

TypeScript允许你定义接口和类型，以增强代码的类型安全。

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

function greet(person: Person): void {
  console.log(`Hello, ${person.name}!`);
}

greet({ name: "Alice", age: 30 });

3. 类型守卫

类型守卫可以帮助你在运行时确定变量的类型。

function isString(value: any): value is string {
  return typeof value === "string";
}

function isNumber(value: any): value is number {
  return typeof value === "number";
}

const value = "123";

if (isString(value)) {
  console.log(value.toUpperCase()); // 123
} else if (isNumber(value)) {
  console.log(value.toFixed(2)); // 123.00
}

4. 编译选项

TypeScript提供了丰富的编译选项，可以帮助你更好地控制编译过程。

// src/config.ts
export const API_URL = "https://api.example.com";

// src/app.ts
console.log(API_URL);

在 tsconfig.json 中配置 outDir 和 rootDir，然后编译项目：

tsc

编译完成后，会在 dist 目录下生成对应的JavaScript文件。

总结

通过以上步骤，你可以轻松地搭建一个高效的TypeScript项目。从环境准备到代码实践，一步步教你如何使用TypeScript进行开发。希望这篇攻略能够帮助你快速上手TypeScript，并构建出高质量的代码。