第一个 TypeScript 程序

让我们动手编写第一个 TypeScript 程序，体验 TypeScript 的基本用法。

创建项目

mkdir hello-ts
cd hello-ts
npm init -y
npm install typescript --save-dev
npx tsc --init

编写代码

创建 src/index.ts 文件：

function greet(name: string): string {
  return `你好，${name}！`
}

const message: string = greet("TypeScript")
console.log(message)

编译运行

编译 TypeScript

npx tsc

编译后生成 dist/index.js：

function greet(name) {
    return "\u4F60\u597D\uFF0C".concat(name, "\uFF01");
}
var message = greet("TypeScript");
console.log(message);

运行 JavaScript

node dist/index.js

输出：

你好，TypeScript！

类型体验

让我们体验 TypeScript 的类型检查功能。

基本类型

let name: string = "张三"
let age: number = 25
let isActive: boolean = true

console.log(name, age, isActive)

数组类型

let numbers: number[] = [1, 2, 3, 4, 5]
let names: Array<string> = ["张三", "李四", "王五"]

console.log(numbers, names)

对象类型

interface User {
  id: number
  name: string
  email: string
}

const user: User = {
  id: 1,
  name: "张三",
  email: "zhangsan@example.com"
}

console.log(user)

函数类型

function add(a: number, b: number): number {
  return a + b
}

const result = add(10, 20)
console.log(`10 + 20 = ${result}`)

错误示例

尝试以下代码，观察 TypeScript 的类型检查：

let count: number = 10

count = "二十"  // 错误：不能将 string 赋值给 number

function multiply(a: number, b: number): number {
  return a * b
}

multiply("2", "3")  // 错误：参数类型不匹配

完整示例

创建一个简单的计算器程序：

type Operation = "add" | "subtract" | "multiply" | "divide"

function calculate(a: number, b: number, operation: Operation): number {
  switch (operation) {
    case "add":
      return a + b
    case "subtract":
      return a - b
    case "multiply":
      return a * b
    case "divide":
      if (b === 0) {
        throw new Error("除数不能为零")
      }
      return a / b
  }
}

console.log("10 + 5 =", calculate(10, 5, "add"))
console.log("10 - 5 =", calculate(10, 5, "subtract"))
console.log("10 × 5 =", calculate(10, 5, "multiply"))
console.log("10 ÷ 5 =", calculate(10, 5, "divide"))

使用类

class Calculator {
  private result: number = 0

  add(value: number): this {
    this.result += value
    return this
  }

  subtract(value: number): this {
    this.result -= value
    return this
  }

  multiply(value: number): this {
    this.result *= value
    return this
  }

  getResult(): number {
    return this.result
  }

  reset(): this {
    this.result = 0
    return this
  }
}

const calc = new Calculator()
const finalResult = calc
  .add(10)
  .multiply(2)
  .subtract(5)
  .getResult()

console.log(`计算结果: ${finalResult}`)

泛型初探

function getFirst<T>(arr: T[]): T | undefined {
  return arr[0]
}

const firstNumber = getFirst([1, 2, 3])
const firstString = getFirst(["a", "b", "c"])

console.log(firstNumber)
console.log(firstString)

开发技巧

类型推断

TypeScript 可以自动推断类型：

let name = "张三"      // 自动推断为 string
let age = 25           // 自动推断为 number
let items = [1, 2, 3]  // 自动推断为 number[]

联合类型

let id: string | number

id = 123
id = "abc"

类型别名

type ID = string | number
type Point = {
  x: number
  y: number
}

let userId: ID = 123
let position: Point = { x: 10, y: 20 }