[TS]学习总结

总结

TS8种基础类型

string、number、boolean、undefined、null、object、bigint、symbol

特俗类型:

void、never、any、unknown

  • void:用于函数没有返回值

  • never:用于函数抛出异常或函数内部死循环

  • any:任意类型

  • unknown:不知道什么类型

Array和函数类型定义:
let list:number[] = [1,2,3]
let list:string[] = ['a,'b','c']
let list:Array<number> = [1,2,3]
function add(x:number,y:number):number{
    return x+y;
}
元组、交叉类型、联合类型
//元组
let list:[number,string,boolean] = [1,'jack',true]

// 交叉类型
type User = { name: string }
type AgeType = { age: number }
let jack: User & AgeType = { name:'jack', age: 30 }

// 联合类型
let num:string | number = '1'
接口5种场景
interface Person {
    name: string;
    age?: number;
    [k:string]: string | number;
}


interface User extends Person{
    gender: 'male'
}
泛型使用
function identity<T>(num:T):T{
    return num;
}

identity<number>(10);
keyof、typeof、in使用
  • keyof 获取对象键

  • typeof 获取对象类型

  • in指定属性需要在某一个key中

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

type Keys = keyof Person; // Keys会得到:'name' | 'age'



const user = { name: 'jack', age: 30 }
type UserType = typeof user; // 会返回一个user类型,包含name和age


type UserType2 = {
    [k in Keys]: string;
}
// UserType2会约束属性必须包含name和age
TS学习方法
  • 每一个语法都要手写出来,理解没有偏差。

  • 项目当中反复使用。

  • 工作当中举一反三、活学活用。

<think>嗯,用户之前已经问过如何快速入门TypeScript,现在又要求做一个知识点总结。我需要先回顾之前的回答,确保内容不重复,同时更系统性地整理核心知识点。 用户可能是已经通过快速入门指南学习了一段时间,现在需要巩固知识,或者想要一个结构化的复习资料。这时候,知识点总结应该比入门指南更全面,覆盖更基础到进阶的内容,帮助用户查漏补缺。 首先,要确定用户的需求层次。他们可能已经掌握了基础,现在需要更深入的理解,或者希望有一个参考手册。因此,总结需要分模块,逻辑清晰,便于查阅。同时,需要包含示例代码,帮助用户理解每个概念的应用。 接下来,我需要整理TypeScript的主要知识点,包括类型系统、高级类型、函数与类、模块与命名空间、配置与工程化等。每个部分需要简明扼要,重点突出,避免冗长。比如类型系统中,基本类型、联合类型、类型别名、接口和类型推断都是基础,必须涵盖。 同时,要考虑到用户可能在实际开发中遇到的问题,比如泛型的使用、装饰器的配置、第三方库的类型声明等。这些实战技巧对用户来说非常实用,应该作为独立的部分详细说明。 另外,用户可能对配置文件和工具链不太熟悉,所以需要解释tsconfig.json的关键配置项,以及如何与构建工具和框架集成。这部分内容可以帮助用户优化项目设置,提高开发效率。 最后,要推荐一些进阶内容和资源,帮助用户继续深入学习。比如Utility Types、类型守卫、声明合并等高级主题,以及官方文档和社区资源,这些都能帮助用户扩展知识面。 在组织内容时,要确保每个知识点都有对应的代码示例,使用正确的LaTeX格式,符合之前的系统指令。同时,结构要清晰,使用标题和子标题分层,便于用户快速找到所需信息。 需要检查是否有遗漏的重要概念,比如枚举、类型断言、模块解析策略等。这些内容虽然可能属于进阶部分,但在总结中也应简要提及,确保全面性。 最后,总结部分要强调实践的重要性,鼓励用户通过项目应用所学知识,加深理解。同时,提醒常见错误和调试技巧,帮助用户避免常见陷阱,提高开发效率。</think>以下是 TypeScript 核心知识点的系统性总结,分模块整理关键概念和示例: --- ### 一、类型系统(Type System) #### 1. 基础类型 ```typescript let str: string = "hello"; // 字符串 let num: number = 42; // 数字 let bool: boolean = true; // 布尔 let arr: number[] = [1, 2, 3]; // 数组 let tuple: [string, number] = ["Alice", 30]; // 元组 let anyVal: any = "任意类型"; // 任意类型 ``` #### 2. 联合类型与类型别名 ```typescript type ID = string | number; // 联合类型 type Point = { x: number, y: number }; // 类型别名 ``` #### 3. 接口(Interface) ```typescript interface User { name: string; age?: number; // 可选属性 readonly id: number; // 只读属性 [prop: string]: any; // 索引签名 } const user: User = { id: 1, name: "Bob" }; ``` #### 4. 类型推断与断言 ```typescript let inferredStr = "自动推断为string"; // 类型推断 let val: any = "this is a string"; let strLength: number = (val as string).length; // 类型断言 ``` --- ### 二、高级类型 #### 1. 泛型(Generics) ```typescript function identity<T>(arg: T): T { return arg; } interface GenericArray<T> { data: T[]; } const numArray: GenericArray<number> = { data: [1, 2, 3] }; ``` #### 2. 工具类型(Utility Types) ```typescript type PartialUser = Partial<User>; // 所有属性变为可选 type ReadonlyUser = Readonly<User>; // 所有属性变为只读 type NameOnly = Pick<User, "name">; // 选取特定属性 type WithoutId = Omit<User, "id">; // 排除特定属性 ``` #### 3. 条件类型与映射类型 ```typescript type IsString<T> = T extends string ? true : false; type KeysToNumbers<T> = { [K in keyof T]: number }; ``` --- ### 三、函数与类 #### 1. 函数类型 ```typescript type AddFunc = (a: number, b: number) => number; const add: AddFunc = (a, b) => a + b; ``` #### 2. 类与修饰符 ```typescript class Animal { private name: string; // 私有属性 protected age: number; // 受保护属性 public constructor(name: string) { this.name = name; } static className = "Animal"; // 静态属性 } ``` #### 3. 抽象类与接口实现 ```typescript abstract class Shape { abstract area(): number; // 抽象方法 } class Circle implements Shape { radius: number; area() { return Math.PI * this.radius ** 2; } } ``` --- ### 四、模块与命名空间 #### 1. ES模块 ```typescript // math.ts export function sum(a: number, b: number) { return a + b; } // main.ts import { sum } from './math'; ``` #### 2. 命名空间(Namespace) ```typescript namespace Geometry { export interface Point { x: number, y: number } export class Circle { /*...*/ } } const point: Geometry.Point = { x: 0, y: 0 }; ``` --- ### 五、工程化配置 #### 1. `tsconfig.json` 关键配置 ```json { "compilerOptions": { "target": "ES6", // 编译目标 "module": "CommonJS", // 模块系统 "strict": true, // 严格模式 "outDir": "./dist", // 输出目录 "esModuleInterop": true // 兼容CommonJS/ES模块 } } ``` #### 2. 类型声明文件(.d.ts) ```typescript // global.d.ts declare module "*.png" { const path: string; export default path; } declare const __VERSION__: string; // 声明全局变量 ``` --- ### 六、常见模式与技巧 #### 1. 类型守卫 ```typescript function isString(val: any): val is string { return typeof val === "string"; } ``` #### 2. 索引类型与 keyof ```typescript function getProperty<T, K extends keyof T>(obj:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小李科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值