第一个TypeScript程序 #

一、创建项目 #

1.1 创建项目目录 #

bash 
mkdir typescript-hello
cd typescript-hello

1.2 初始化项目 #

bash 
npm init -y

1.3 安装TypeScript #

bash 
npm install typescript --save-dev

1.4 创建配置文件 #

bash 
npx tsc --init

修改tsconfig.json：

json 
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

1.5 创建源代码目录 #

bash 
mkdir src

二、Hello World程序 #

2.1 创建TypeScript文件 #

创建src/index.ts：

typescript 
const message: string = 'Hello, TypeScript!';
console.log(message);

2.2 编译TypeScript #

bash 
npx tsc

这将生成dist/index.js文件：

javascript 
"use strict";
const message = 'Hello, TypeScript!';
console.log(message);

2.3 运行JavaScript #

bash 
node dist/index.js

输出：

text 
Hello, TypeScript!

三、添加类型检查 #

3.1 函数类型 #

修改src/index.ts：

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

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

3.2 类型错误示例 #

尝试传入错误类型：

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

const message: string = greet(123);
console.log(message);

编译时会报错：

text 
src/index.ts:5:28 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

四、使用接口 #

4.1 定义接口 #

typescript 
interface User {
    name: string;
    age: number;
}

function greetUser(user: User): string {
    return `Hello, ${user.name}! You are ${user.age} years old.`;
}

const user: User = {
    name: 'TypeScript',
    age: 12
};

console.log(greetUser(user));

4.2 可选属性 #

typescript 
interface User {
    name: string;
    age: number;
    email?: string;
}

function greetUser(user: User): string {
    let message = `Hello, ${user.name}! You are ${user.age} years old.`;
    if (user.email) {
        message += ` Email: ${user.email}`;
    }
    return message;
}

const user1: User = { name: 'Alice', age: 25 };
const user2: User = { name: 'Bob', age: 30, email: 'bob@example.com' };

console.log(greetUser(user1));
console.log(greetUser(user2));

五、使用类 #

5.1 定义类 #

typescript 
class Greeter {
    private name: string;
    
    constructor(name: string) {
        this.name = name;
    }
    
    public greet(): string {
        return `Hello, ${this.name}!`;
    }
}

const greeter = new Greeter('TypeScript');
console.log(greeter.greet());

5.2 类继承 #

typescript 
class Animal {
    constructor(protected name: string) {}
    
    public speak(): void {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }
    
    public speak(): void {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Max');
dog.speak();

六、使用泛型 #

6.1 泛型函数 #

typescript 
function identity<T>(arg: T): T {
    return arg;
}

const str = identity<string>('Hello');
const num = identity<number>(123);

console.log(str);
console.log(num);

6.2 泛型接口 #

typescript 
interface Box<T> {
    value: T;
}

const stringBox: Box<string> = { value: 'Hello' };
const numberBox: Box<number> = { value: 123 };

console.log(stringBox.value);
console.log(numberBox.value);

七、使用模块 #

7.1 创建模块 #

创建src/utils/math.ts：

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

export function subtract(a: number, b: number): number {
    return a - b;
}

export const PI = 3.14159;

7.2 导入模块 #

修改src/index.ts：

typescript 
import { add, subtract, PI } from './utils/math';

console.log(`1 + 2 = ${add(1, 2)}`);
console.log(`5 - 3 = ${subtract(5, 3)}`);
console.log(`PI = ${PI}`);

7.3 默认导出 #

创建src/utils/logger.ts：

typescript 
export default class Logger {
    public log(message: string): void {
        console.log(`[LOG] ${message}`);
    }
    
    public error(message: string): void {
        console.error(`[ERROR] ${message}`);
    }
}

使用：

typescript 
import Logger from './utils/logger';

const logger = new Logger();
logger.log('Hello, TypeScript!');

八、异步编程 #

8.1 Promise #

typescript 
function delay(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function main(): Promise<void> {
    console.log('Start');
    await delay(1000);
    console.log('End');
}

main();

8.2 异步函数 #

typescript 
interface User {
    id: number;
    name: string;
}

async function fetchUser(id: number): Promise<User> {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
    return response.json();
}

async function main(): Promise<void> {
    const user = await fetchUser(1);
    console.log(user);
}

main();

九、配置npm脚本 #

9.1 添加脚本 #

修改package.json：

json 
{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "tsc --watch"
  }
}

9.2 运行脚本 #

bash 
npm run build
npm start
npm run dev

十、使用ts-node开发 #

10.1 安装ts-node #

bash 
npm install ts-node --save-dev

10.2 直接运行TypeScript #

bash 
npx ts-node src/index.ts

10.3 添加脚本 #

json 
{
  "scripts": {
    "dev:ts": "ts-node src/index.ts"
  }
}

十一、项目完整结构 #

text 
typescript-hello/
├── src/
│   ├── index.ts
│   └── utils/
│       ├── math.ts
│       └── logger.ts
├── dist/
│   ├── index.js
│   └── utils/
│       ├── math.js
│       └── logger.js
├── node_modules/
├── package.json
├── package-lock.json
└── tsconfig.json

十二、总结 #

本章我们完成了第一个TypeScript程序，学习了：

  1. 项目创建：初始化项目、安装依赖、配置TypeScript
  2. 基本语法：类型注解、接口、类
  3. 模块化：导入导出、默认导出
  4. 异步编程：Promise、async/await
  5. 开发流程：编译、运行、开发模式

下一步，我们将深入学习TypeScript的基础语法。

最后更新：2026-03-26