JavaScript 与 TypeScript：二、基础实战教程

JavaScript 转 TypeScript 基础实战教程

第 1 步：环境搭建

首先，确保你安装了 Node.js，然后全局安装 TypeScript 编译器。

npm install -g typescript

创建一个新目录，并初始化一个项目：

mkdir my-ts-project
cd my-ts-project
npm init -y

现在，你可以使用 tsc 命令来编译 .ts 文件了。

第 2 步：基础类型注解

这是最核心的改变。TS 允许你为变量、函数参数、返回值等添加类型注解。

JavaScript 写法：

let age = 25; // JS 中，age 可以是任何类型
function greet(name) {
  return 'Hello, ' + name;
}

TypeScript 写法：

let age: number = 25; // 显式声明为数字类型
let isDone: boolean = false;
let title: string = "优快云 Tutorial";

// 函数参数和返回值类型
function greet(name: string): string { // 参数name是string，返回值也是string
  return 'Hello, ' + name;
}

// 数组类型
let list: number[] = [1, 2, 3];
let names: Array<string> = ['Alice', 'Bob']; // 泛型语法，同上

第 3 步：接口（Interface）定义对象形状

这是处理对象和类的强大工具。

JavaScript 写法：

function printUser(user) {
  console.log(user.name + ' is ' + user.age);
}
// 如果意外传入了没有name属性的对象，只能在运行时报错

TypeScript 写法：

// 先定义“图纸”
interface User {
  name: string;
  age: number;
  isAdmin?: boolean; // 可选属性，表示该属性可以不存在
}

// 使用接口约束参数形状
function printUser(user: User): void { // void 表示没有返回值
  console.log(`${user.name} is ${user.age}`);
}

// 正确调用
printUser({ name: 'Jack', age: 30 });

// 错误调用：编译时就会报错！
// printUser({ name: 'Jack' }); // 错误: 缺少属性 'age'
// printUser({ name: 'Jack', age: 'thirty' }); // 错误: 'age' 应该是 number 类型

第 4 步：类型联合与类型别名

JavaScript 写法：

function handleId(id) {
  // 需要内部逻辑判断 id 是数字还是字符串
}

TypeScript 写法：

// 联合类型
let id: number | string;
id = 123; // OK
id = "ABC123"; // OK
// id = true; // Error

// 类型别名 (Type Alias)
type UserId = number | string;

function handleId(id: UserId): void {
  if (typeof id === 'string') {
    // TS 会智能地缩窄类型为 string，可以安全使用字符串方法
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

第 5 步：函数类型进阶

JavaScript 写法：

const userInput = prompt('Enter something');
// userInput 可能是 string 或 null

TypeScript 写法：

// 使用泛型定义函数类型
function identity<T>(arg: T): T {
  return arg;
}
// 调用时指定类型
let output1 = identity<string>("myString");
let output2 = identity<number>(100); // TS 也能自动推断类型

// 处理可能为 null/undefined 的值
const userInput: string | null = prompt('Enter something');
// 使用非空断言（谨慎使用！确保值一定存在）
const guaranteedInput: string = userInput!; // 添加 ! 断言
// 更安全的做法：类型守卫
if (userInput) {
  // 在这个块中，TS 知道 userInput 是 string
  console.log(userInput.toUpperCase());
}

第 6 步：编译与配置

创建一个 tsconfig.json 文件来配置 TS 编译选项。

tsc --init

这会生成一个详细的配置文件。几个常用选项：

{
  "compilerOptions": {
    "target": "ES6", // 编译成的 JS 版本
    "module": "commonjs", // 模块系统
    "outDir": "./dist", // 输出目录
    "strict": true, // 开启所有严格类型检查（强烈推荐！）
    "esModuleInterop": true // 改善模块兼容性
  },
  "include": ["src/**/*"] // 只编译 src 目录下的文件
}

配置好后，只需运行 tsc，即可自动编译所有文件。