ts知识点整理

typescript: 强类型语言;面向对象的语言;开发时就能提示报错信息 

// 基本数据类型:string、number、boolean、null、undefined、symbol、void、bigint
let flag:boolean = false
let str:string = 15

// 联合类型
let id :string | number;

// 任意类型
let s :any = '1'

// 引用数据类型object:array:数组、tuple:元组、enum:枚举
//数组类型定义
let arr:number[] = [1,2,3,4,5]
let arr:string[] = ['1','2']
let arr:any[] = [1,2,'3', true,{id:1}]
//泛型 <T> T表示变量 任何类型
//泛型(Generics)是指在定义函数、接口、类的时候,不预先指定具体类型
let arr:Array<number | string> = [1,2,'3']
function f<T>(x:T,y:T):T[] {
    return [x,y]
}
f<number>(2,3)
f<number|string>(2,'3')
//元组:数组合并了相同类型的对象,而元组(Tuple)合并了不同类型的对象。
let xcatliu: [string, number] = ['Xcat Liu', 25]
//枚举:枚举我们可以定义一些带名字的常量
enum type {
    man,
    woman=0
}
console.log(type.man); // 0

//对象类型类型定义
//接口(Interfaces)可用于对 对象形状 进行描述
interface IPerson {
    name?:string; // name可有可无
    age:number;
    sex:string;
    [propName:string]:any; // 任意属性
}
let zx:IPerson = { // 对象object受到接口的约束
    name:'zx',
    age:12,
    sex:'man',
    obj: {id:1}
}
// 函数类型定义 输入类型 输出类型
function f(x:number,y?:number):number[] {
    return [x,y]
}
f(1,3) f(1)

<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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值