TypeScript 课程总结笔记

// 变量类型注解
let name: string = "John";
let age: number = 30;
let isActive: boolean = true;

// 数组和元组
let numbers: number[] = [1, 2, 3];
let tuple: [string, number] = ["John", 30];

// 函数类型
function greet(name: string): string {
  return `Hello, ${name}!`;
}

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

const person: Person = {
  name: "John",
  age: 30
};

1. 字符串(String)

let name: string = "John";
let message: string = `Hello, ${name}!`; // 模板字符串

// 特点：
// - 支持单引号、双引号、模板字符串
// - 自动类型推断：let greeting = "Hello" // 自动推断为 string

2. 数字(Number)

let age: number = 30;
let price: number = 99.99;
let binary: number = 0b1010;    // 二进制
let octal: number = 0o744;      // 八进制
let hex: number = 0xf00d;       // 十六进制

// 特点：
// - 不区分整数和浮点数
// - 支持各种进制表示法
// - 包含 NaN, Infinity

3. 布尔值(Boolean)

let isActive: boolean = true;
let isLoading: boolean = false;

// 特点：
// - 只有 true 和 false 两个值
// - 不能使用 0/1 或 "true"/"false"

4. 数组(Array)

// 两种声明方式
let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ["a", "b", "c"];

// 只读数组
let readonlyNumbers: readonly number[] = [1, 2, 3];
// readonlyNumbers.push(4); // ❌ 错误：只读数组不能修改

// 特点：
// - 类型统一：数组内所有元素类型相同
// - 支持泛型语法：Array<T>
// - 可设置为只读：readonly T[]

5. 元组(Tuple)

// 固定长度和类型的数组
let tuple: [string, number] = ["John", 30];
let point: [number, number, number] = [10, 20, 30];

// 可选元素的元组
let optionalTuple: [string, number?] = ["hello"]; // 第二个元素可选

// 剩余元素的元组
let restTuple: [string, ...number[]] = ["hello", 1, 2, 3];

// 特点：
// - 固定长度和特定位置类型
// - 支持可选元素(?)
// - 支持剩余元素(...)
// - 常用于函数返回多个值

6. 函数声明

// 基础函数类型
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// 箭头函数
const greetArrow: (name: string) => string = (name) => {
  return `Hello, ${name}!`;
};

// 可选参数和默认参数
function createUser(name: string, age?: number, country: string = "China"): void {
  console.log(`${name}, ${age}, ${country}`);
}

7. 函数重载

// 重载签名
function processInput(input: string): string;
function processInput(input: number): number;

// 实现签名
function processInput(input: string | number): string | number {
  if (typeof input === "string") {
    return input.toUpperCase();
  } else {
    return input * 2;
  }
}

// 使用
const result1 = processInput("hello"); // string
const result2 = processInput(10);      // number

8. 基础接口

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

const person: Person = {
  name: "John",
  age: 30
};

// 可选属性
interface Config {
  url: string;
  timeout?: number;  // 可选
  retry?: boolean;   // 可选
}

9. 高级接口特性

// 只读属性
interface Point {
  readonly x: number;
  readonly y: number;
}

// 索引签名
interface StringArray {
  [index: number]: string;
}

// 函数类型接口
interface SearchFunc {
  (source: string, subString: string): boolean;
}

10.Void 和 Never

// void - 没有返回值
function logMessage(message: string): void {
  console.log(message);
}

// never - 永远不会返回
function throwError(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {
    // 无限循环
  }
}

11.Null 和 Undefined

let u: undefined = undefined;
let n: null = null;

// 严格模式下需要显式声明
let maybeString: string | undefined = undefined;
let maybeNumber: number | null = null;

四、高级特性

4.1泛型

泛型允许在定义函数、接口或类时不预先指定具体类型，而是在使用时动态指定。

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

let output = identity<string>("hello");

4.2装饰器

function log(target: any, key: string) {
  console.log(`${key} was called`);
}

class MyClass {
  @log
  greet() {
    console.log("Hello!");
  }
}

4.3联合类型与交叉类型

type StringOrNumber = string | number;
type NameAndAge = { name: string } & { age: number };

五、ts对比js

一、核心关系：超集与子集

代码兼容性

// 所有合法的 JavaScript 代码都是合法的 TypeScript 代码
// ✅ JavaScript 代码在 TypeScript 中完全兼容

// JavaScript
function greet(name) {
    return "Hello, " + name;
}

// TypeScript (完全兼容上面的 JS 代码)
function greet(name: string): string {
    return "Hello, " + name;
}

二、核心区别对比

1. 类型系统：最大的不同

JavaScript (动态类型)

// 运行时才会发现错误
let user = { name: "John", age: 30 };
user.nmae = "Mike";  // ❌ 拼写错误，但运行时才会报错
console.log(user.nmae); // undefined

// 变量类型可以随意改变
let data = "hello";
data = 42;        // ✅ 允许
data = true;      // ✅ 允许
data = { key: "value" }; // ✅ 允许

TypeScript (静态类型)

// 编译时就能发现错误
interface User {
    name: string;
    age: number;
}

let user: User = { name: "John", age: 30 };
user.nmae = "Mike";  // ❌ 编译时错误：属性 'nmae' 不存在

// 类型安全
let data: string = "hello";
data = 42;        // ❌ 编译错误：不能将 number 分配给 string

2. 开发体验对比

JavaScript

// 需要运行时测试才能发现问题
function calculateTotal(price, quantity) {
    return price * quantity;  // 如果传入字符串，会得到 NaN
}

// 调用时可能出错
calculateTotal("10", "5");  // 返回 "105" (字符串拼接)
calculateTotal(10, 5);      // 返回 50

TypeScript

// 编译时类型检查
function calculateTotal(price: number, quantity: number): number {
    return price * quantity;
}

// 调用时类型安全
calculateTotal("10", "5");  // ❌ 编译错误：参数类型不匹配
calculateTotal(10, 5);      // ✅ 正确

三、TypeScript 的核心优势

1. 类型安全与错误预防

// 接口定义 - 明确的契约
interface Product {
    id: number;
    name: string;
    price: number;
    inStock: boolean;
}

// 函数使用接口 - 编译时验证
function displayProduct(product: Product): void {
    console.log(`${product.name}: $${product.price}`);
    // product.nme ❌ 拼写错误立即报错
}

// 自动补全和智能提示
const product: Product = {
    id: 1,
    name: "Laptop",
    price: 999,
    inStock: true
    // 如果缺少 required 属性，编译时报错
};

2. 更好的代码维护性

大型项目中的优势

// 清晰的 API 契约
interface UserService {
    getUser(id: number): Promise<User>;
    createUser(user: Omit<User, 'id'>): Promise<User>;
    updateUser(id: number, updates: Partial<User>): Promise<User>;
}

// 实现必须符合接口
class UserServiceImpl implements UserService {
    async getUser(id: number): Promise<User> {
        // 实现细节
    }
    // 如果缺少方法或签名不匹配，编译错误
}

六、总结

TypeScript 是 JavaScript 的超集，在保留 JavaScript 所有特性的基础上，引入了强大的静态类型系统。它不是一门全新的语言，而是为 JavaScript 添加了类型安全和开发效率的工具层。

核心优势

1.类型安全

2. 开发效率提升

3. 可维护性

1.核心特性体系

1. 基础类型系统

原始类型：string、number、boolean 等基础构建块
数组和元组：处理集合数据的类型安全方案
函数类型：确保函数输入输出的类型正确性

2. 高级类型特性

接口(Interface)：定义对象形状的主要工具，支持继承和声明合并
类型别名(Type Alias)：处理复杂类型操作和联合类型
泛型(Generics)：创建可重用、类型安全的组件
联合类型与交叉类型：提供灵活而精确的类型组合能力

3. 类型操作能力

类型推断：自动推导变量类型，减少冗余注解
类型守卫：运行时类型检查与编译时类型收窄
映射类型：基于现有类型创建新类型
条件类型：根据条件动态决定类型

TypeScript 已经成为现代前端开发的事实标准，随着生态系统的不断完善和开发者社区的持续贡献，它在 Web 开发、Node.js 服务端、移动开发等领域的应用将更加广泛。掌握 TypeScript 不仅是学习一门工具，更是培养类型思维——这种思维方式将在整个编程生涯中持续创造价值。

TypeScript 让 JavaScript 开发从"写时快乐，维护痛苦"转变为"写时严谨，长期受益"的可持续发展模式。

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

一文看懂BeltDrivenEnder3版本与变体：V3.6/V3.7、单Z双Z、V轮与导轨到底怎么选？

你是否受够了 Ender 3 原厂 Z 轴丝杆的弯曲、抖动与错位问题？**BeltDrivenEnder3** 是一款火爆开源社区的皮带驱动 Ender 3 改装项目（Belt Driven Z Mod），它用皮带传动替代传统丝杆，彻底解决 X 轴右侧悬垂、Z 轴层纹等老毛病，且**无需刷固件**。不过，面对 V3.6/V3.7 版本、单Z/双Z、V轮/MGN 导轨等一大堆变体，新手往往一头雾水。

AI Agent技术社区

RapidSMS 测试完整指南：脚本化测试与测试工具链从零实战

RapidSMS 是一个用 Python 构建短信应用的开源框架，而 **RapidSMS 测试** 则是保证消息路由、应用处理逻辑稳定可靠的关键一环。本文面向新手，完整介绍 RapidSMS 的脚本化测试（Scripted Testing）与内置测试工具链（Test Harness），从环境准备、编写第一个测试用例到运行整个测试套件，带你从零实战、快速上手。[![RapidSMS 测试架构图

AI Agent技术社区

Mountify 是什么？用 OverlayFS 实现全局模块挂载的开源神器完整解析

**Mountify** 是一款基于 **OverlayFS** 实现**全局模块挂载**的开源神器，它同时兼容 KernelSU、APatch 与 Magisk，能让你的系统模块以一种更隐蔽、更接近 OEM 原厂的方式"整体叠加上去"。本文将从原理、安装、配置到进阶玩法，为你带来一份面向新手的完整解析。## 一、Mountify 是什么？先看它的核心定位简单来说，Mountify 是一个