当前位置： 首页 > news >正文

TypeScript 课程总结笔记

news 2025/11/3 9:21:40

目录

一、TypeScript 简介

二、核心特性

三、基础语法

1. 字符串(String)

2. 数字(Number)

3. 布尔值(Boolean)

4. 数组(Array)

5. 元组(Tuple)

6. 函数声明

7. 函数重载

8. 基础接口

9. 高级接口特性

 10.Void 和 Never

11.Null 和 Undefined

四、高级特性

4.1泛型

4.2装饰器

4.3联合类型与交叉类型

五、ts对比js

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

代码兼容性

二、核心区别对比

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

JavaScript (动态类型)

TypeScript (静态类型)

2. 开发体验对比

JavaScript

TypeScript

三、TypeScript 的核心优势

1. 类型安全与错误预防

2. 更好的代码维护性

大型项目中的优势

六、总结

一、TypeScript 简介

        TypeScript 是 JavaScript 的超集，由微软开发并开源。它为 JavaScript 添加了静态类型系统，使得代码更加健壮、可维护。TypeScript 最终会被编译为纯 JavaScript，因此可以在任何支持 JavaScript 的环境中运行。

二、核心特性

  • 静态类型检查：TypeScript 允许在开发阶段进行类型检查，避免运行时错误。
  • 类型推断：TypeScript 能根据赋值自动推断变量类型，减少显式类型注解的需求。
  • 接口和类：支持面向对象编程，提供接口、类、继承等特性。
  • 泛型：允许编写灵活且类型安全的代码。
  • 模块化：支持 ES6 模块语法，便于代码组织。

三、基础语法

// 变量类型注解
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 {@loggreet() {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 开发从"写时快乐，维护痛苦"转变为"写时严谨，长期受益"的可持续发展模式。

http://www.dtcms.com/a/561512.html

相关文章：

  • 建设电影网站如何赚钱做企业内部网站要多久
  • OpenCV音视频编解码器详解
  • RV1126 NO.36：OPENCV的at函数遍历图像像素
  • .NET Reflector反编绎，如何移除DLL中的一个公开属性
  • Zookeeper监听机制
  • 四川淘宝网站建设方案视觉设计专业
  • ArrayList 与 LinkedList 的区别
  • 商丘做网站多少钱企业邮箱后缀
  • 数据结构期中复习个人笔记
  • 做断桥铝最知名的网站怎么用ps做网站超链接
  • linux系统网站建设资格证网站怎么做
  • 325建筑人才网招聘seo关键词推广怎么做
  • git命令的规范
  • 人形机器辅助设备
  • 深圳找网站建设公司沈阳男科医院哪家好哪个医院正规
  • 目标检测算法与原理（二）：Tensorflow实现迁移学习
  • 用 Flink CDC 将 MySQL 实时同步到 Doris
  • win7家用电脑做网站服务器网站开发实习报告
  • 鲸鱼算法详细原理，公式，应用案例-鲸鱼算法优化扩展卡尔曼滤波EKF
  • 「PPG信号处理——（4）基于PPG-ECG 多模态生理信号预处理与特征提取方法研究」2025年11月2日
  • 【Kotlin内联函数】
  • （论文速读）YOLA:学习照明不变特征的低光目标检测
  • 太原网站建设方案开发开源之家
  • 系统思考修炼之旅
  • 网站 默认首页网站域名ip地址查询
  • 矩阵系统哪个好？2025年全方位选型指南与品牌深度解析
  • 合肥瑶海区网站建设方案陇南网站建设
  • 怎么做vip视频网站dedecms 网站还原
  • 网站关键词标签php 网站源代码
  • 本地仓库如何同时绑定多个远程仓库