首页手记 TypeScript 高级知识入门教程

TypeScript 高级知识入门教程

标签：

算法与数据结构 Typescript

概述

本文详细解析了TS高级知识，包括联合类型、字面量类型、映射类型、条件类型、高阶类型和索引类型等复杂类型的应用。文章还介绍了模板字符串、类型保护、接口扩展与泛型运用等多种高级特性，并通过实战案例展示了如何利用这些知识解决实际问题。最后，文章提供了复习知识点和实践项目的建议，帮助读者巩固所学内容。

TypeScript 高级知识入门教程

TypeScript 高级类型概念解析

联合类型与字面量类型

在 TypeScript 中，联合类型允许一个变量可以持有多种类型中的任意一种。这种灵活性可以使得代码更加简洁和易读，但同时也会带来一定的复杂性，需要开发者谨慎处理。

联合类型的定义与使用

定义联合类型的语法如下：

let value: string | number;

这段代码定义了一个变量 value，它可以是字符串或数字。例如：

let value: string | number;
value = 'Hello'; // 这是合法的
value = 123;     // 这也是合法的
// value = true; // 这会报错，因为布尔类型不在联合类型中

联合类型的真正力量在于它允许你使用多种类型进行复杂逻辑处理。

字面量类型

字面量类型是一种特殊的类型，它只允许变量取特定的预定义值。这在需要严格控制某些变量的值时非常有用。

type Color = 'red' | 'green' | 'blue';

let color: Color;
color = 'red'; // 这是合法的
color = 'yellow'; // 这会报错，因为 'yellow' 不在字面量类型中

这里定义了一个 Color 类型，它只能是 'red'、'green'、'blue' 之一。

映射类型与条件类型

映射类型

映射类型允许我们基于现有类型生成一个新的类型，其中每个属性的类型都被某种方式修改。映射类型通常用于生成新的对象类型，比如将所有属性从可选变为必需，或从不可选变为可选。

interface Person {
  name: string;
  age: number;
  isStudent?: boolean;
}

type RequiredPerson = {
  [P in keyof Person]-?: Person[P];
};

let person: RequiredPerson = {
  name: 'Alice',
  age: 30,
  isStudent: true
};

这段代码将 Person 类型中的所有属性都变成了必需的。

条件类型

条件类型允许我们在定义类型时使用条件逻辑，这使得类型系统变得更加灵活。条件类型通常用于在不同类型之间进行选择。

type IsArray<T> = T extends Array<infer U> ? true : false;

let arr: any[] = [1, 2, 3];
let notArr: number = 123;

type isArray = IsArray<typeof arr>;
type isNotArray = IsArray<typeof notArr>;

console.log(isArray); // true
console.log(isNotArray); // false

这里定义了一个 IsArray 类型，它可以判断传入的值是否为数组类型。

高阶类型和索引类型

高阶类型

高阶类型允许我们定义类型工厂，这些工厂可以生成新的类型。这在定义泛型时尤为有用。

type MyTypeFactory<T> = {
  value: T;
  length: number;
};

let strInfo: MyTypeFactory<string>;
strInfo = { value: 'Hello', length: 5 };

let numInfo: MyTypeFactory<number>;
numInfo = { value: 123, length: 3 };

这里定义了一个 MyTypeFactory 类型，它接收一个泛型参数 T，并根据这个参数生成一个新的类型。

索引类型

索引类型允许我们访问对象的属性类型。这通常用于定义类型时，需要考虑对象键的类型。

type KeyOfType<T, K> = {
  [P in keyof T]: P extends K ? T[P] : never;
};

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

type NameOrAge = KeyOfType<User, 'name' | 'age'>;
// NameOrAge 类型为 { name: string; age: number; }

这里定义了一个 KeyOfType 类型，它接收两个参数 T 和 K，并返回一个新的类型，其中只有 K 中的键对应的值被保留。

TypeScript 高级特性详解

模板字符串与模板字面量

模板字符串允许我们在字符串中嵌入表达式，使得生成复杂字符串更加方便。

let name = 'Alice';
let age = 30;
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // 输出 "Hello, my name is Alice and I am 30 years old."

模板字面量则是用于类型系统中，它允许我们在生成类型时嵌入表达式。

type Name = string;
type Greeting = `Hello, my name is ${Name} and I am ${number} years old.`;

类型保护与区分类型

类型保护是一种机制，用来检查一个值是否属于某个特定类型。这在需要对不同类型的值进行不同处理时非常有用。

function isString(value: any): value is string {
  return typeof value === 'string';
}

function processValue(value: any) {
  if (isString(value)) {
    console.log(value.toUpperCase());
  } else {
    console.log(value);
  }
}

processValue('Hello'); // 输出 "HELLO"
processValue(123);     // 输出 123

这里定义了一个 isString 函数，它检查传入的值是否为字符串。

接口扩展与泛型运用

接口扩展

接口可以扩展其他接口，从而继承其所有属性和方法。

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

let dog: Dog = { name: 'Rex', breed: 'German Shepherd' };

这里定义了一个 Animal 接口和一个 Dog 接口，Dog 接口继承了 Animal 接口的所有属性。

泛型运用

泛型允许我们在定义类型时使用类型参数，这使得代码更加通用和复用。

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

let output = identity<string>('Hello');
console.log(output); // 输出 "Hello"

这里定义了一个 identity 函数，它接收一个泛型参数 T，并返回相同类型的值。

实战案例：利用高级知识解决问题

类型断言提升代码健壮性

类型断言允许我们在运行时检查变量的类型，从而提升代码的健壮性。

let someValue: any = 'Hello';
let someString: string = (someValue as string).toUpperCase();
console.log(someString); // 输出 "HELLO"

这里使用类型断言将 someValue 从 any 类型断言为 string 类型，然后调用 toUpperCase 方法。

泛型函数提高代码复用率

泛型函数允许我们在函数中使用类型参数，从而提高代码的复用率。

function createArray<T>(length: number, value: T): T[] {
  let result: T[] = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}

let stringArray = createArray<string>(5, 'Hello'); // 创建一个包含5个 "Hello" 的数组
let numberArray = createArray<number>(3, 123);      // 创建一个包含3个 123 的数组

这里定义了一个 createArray 函数，它接收一个类型参数 T，并创建一个包含指定数量的指定值的数组。

利用高级类型优化复杂数据结构

高级类型可以帮助我们优化复杂的数据结构，使得代码更加清晰和易读。

type User = {
  name: string;
  address: Address;
};

type Address = {
  street: string;
  city: string;
  zipCode: string;
};

let user: User = {
  name: 'Alice',
  address: {
    street: '123 Main St',
    city: 'New York',
    zipCode: '10001'
  }
};

这里定义了两个嵌套类型 User 和 Address，使得用户数据结构更加清晰和易于维护。

映射类型与条件类型的实战案例

映射类型的实战案例

interface User {
  name: string;
  email: string;
}

type PickUser<T extends User, K extends keyof User> = {
  [P in K]: T[P];
};

let user: User = {
  name: 'Alice',
  email: 'alice@example.com',
};

let pickName = PickUser<User, 'name'>(user);
console.log(pickName); // { name: 'Alice' }

条件类型的实战案例

type IsString<T> = T extends string ? true : false;

let str: string = 'Hello';
let num: number = 123;

type isString = IsString<typeof str>;
type isNumber = IsString<typeof num>;

console.log(isString); // true
console.log(isNumber); // false

常见错误及解决方法

解析类型检查错误并修正

类型检查错误通常出现在 TypeScript 编译时，需要根据错误信息进行修正。

function add(a: number, b: string): number {
  return a + b; // 这里会报错，因为不能将字符串和数字相加
}

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

let result = addFixed(1, 2); // 输出 3

这里修正了 add 函数的类型错误，使其参数类型一致。

解决编译错误及运行时问题

编译错误通常出现在 TypeScript 编译时，需要根据错误信息进行修正。运行时错误则需要在代码运行时进行调试。

function divide(a: number, b: number): number {
  if (b === 0) {
    throw new Error('Cannot divide by zero');
  }
  return a / b;
}

try {
  let result = divide(10, 0); // 这里会抛出一个错误
} catch (error) {
  console.error(error.message); // 输出 "Cannot divide by zero"
}

这里在 divide 函数中增加了错误检查，避免了运行时的除零错误。

复习所学知识点

复习联合类型、字面量类型、映射类型、条件类型、高阶类型和索引类型等知识点，加深理解。

实践项目以加深理解

实践项目包括类型断言、泛型函数、高级类型优化数据结构等。通过实际项目加深对 TypeScript 高级特性的理解。

资源推荐与进阶学习路径

提供后续学习建议与方向

建议深入学习 TypeScript 的高级特性和库开发，以及与其他前端技术的结合。持续关注社区动态和新技术发展。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕勒3428872

手记
篇

粉丝

13

获赞与收藏

51

关注作者，订阅最新文章

阅读免费教程

TypeScript 入门教程

38个小节 93594 666

后端通用面试教程

41个小节 30936 346

网络编程入门教程

20个小节 12729 240

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


TypeScript 高级知识入门教程

联合类型与字面量类型

联合类型的定义与使用

字面量类型

映射类型与条件类型

映射类型

条件类型

高阶类型和索引类型

高阶类型

索引类型

模板字符串与模板字面量

类型保护与区分类型

接口扩展与泛型运用

接口扩展

泛型运用

类型断言提升代码健壮性

泛型函数提高代码复用率

利用高级类型优化复杂数据结构

映射类型与条件类型的实战案例

映射类型的实战案例

条件类型的实战案例

解析类型检查错误并修正

解决编译错误及运行时问题

更多常见错误示例

复习所学知识点

实践项目以加深理解

推荐学习资料与工具

提供后续学习建议与方向

阅读免费教程

热搜

最近搜索清空

TypeScript 高级知识入门教程

联合类型与字面量类型

联合类型的定义与使用

字面量类型

映射类型与条件类型

映射类型

条件类型

高阶类型和索引类型

高阶类型

索引类型

模板字符串与模板字面量

类型保护与区分类型

接口扩展与泛型运用

接口扩展

泛型运用

类型断言提升代码健壮性

泛型函数提高代码复用率

利用高级类型优化复杂数据结构

映射类型与条件类型的实战案例

映射类型的实战案例

条件类型的实战案例

解析类型检查错误并修正

解决编译错误及运行时问题

更多常见错误示例

复习所学知识点

实践项目以加深理解

推荐学习资料与工具

提供后续学习建议与方向

阅读免费教程