TypeScript基础类型与接口入门

20XX/XX/XXTypeScript基础类型与接口入门汇报人:XXXCONTENTS目录01

课程开篇介绍02

TypeScript基础类型语法03

基础类型示例演示与练习04

TypeScript接口语法讲解05

接口示例演示与练习06

综合实战小项目课程开篇介绍01课程学习目标

掌握TypeScript核心基础类型熟练运用string、number、boolean等基础类型，能精准标注变量类型，规避JS类型模糊问题。

精通TypeScript接口设计与使用学会定义对象、函数接口，借鉴React组件Props接口规范，提升代码的可维护性。

实现TypeScript与JavaScript的兼容开发掌握类型断言、可选链等语法，能在现有JS项目中平滑引入TS，实现混合开发。前置知识要求掌握JavaScript基础语法需熟悉变量定义、函数声明、条件判断等内容，能独立编写简单的JavaScript交互脚本。了解前端开发基本流程知晓HTML、CSS与JavaScript的协作模式，有搭建简单静态网页的实践经验。具备面向对象编程思维理解类、对象、继承等核心概念，可借助JavaScript实现基础的面向对象功能。TypeScript基础类型语法02布尔类型声明通过letisDone:boolean=false;语法声明布尔类型，明确变量只能存储true或false值。数字类型声明使用letnum:number=6;定义数字类型，可存储整数、浮点数甚至十六进制数值。字符串类型声明通过letstr:string="TypeScript";声明字符串类型，支持单引号、双引号及模板字符串。原始类型声明语法数组与元组类型语法

数组类型的两种声明方式可通过「类型[]」或「Array<类型>」声明，比如`number[]`与`Array<string>`分别定义数值、字符串数组。

元组类型的固定长度约束元组需指定固定数量与类型的元素，例如`[string,number]`可定义姓名加年龄的固定结构数据。

数组与元组的只读修饰添加`readonly`关键字可创建只读数组或元组，像`readonlynumber[]`能避免数组元素被修改。枚举类型语法数字枚举定义与使用数字枚举默认从0开始递增，如enumDirection{Up,Down}，可直接通过Direction.Up调用对应数值。字符串枚举的语法规则字符串枚举需为每个成员赋值字符串，如enumGender{Male="男",Female="女"}，提升可读性。异构枚举的特殊用法异构枚举允许混合数字与字符串成员，如enumStatus{Success=200,Error="FAIL"}，适配特殊场景需求。任意类型（any）的语法与应用场景当不确定变量类型时可声明为any，比如接收用户输入的动态内容，能跳过TypeScript类型检查。空值类型（null）的语法与使用限制表示变量值为空，仅能赋值为null，常用于明确标记无有效数据的场景，如查询无结果时返回。未定义类型（undefined）的语法与特性表示变量未被赋值，仅能赋值为undefined，可用于函数可选参数的默认未传入状态。任意类型与空值类型类型推论与类型断言

基础类型推论规则TypeScript会根据变量初始值自动推断类型，如letnum=10会被推断为number类型。

上下文类型推论场景当变量作为函数参数时，TS会根据函数签名推断参数类型，如回调函数参数的类型推断。

尖括号语法类型断言使用<类型>值的语法断言类型，如<number>('123')可将字符串断言为数字类型。

as语法类型断言用值as类型的方式断言，如('123'asnumber)，是TSX语法中唯一支持的断言方式。基础类型示例演示与练习03基础类型用法示例

布尔类型场景化运用在电商购物车中，用布尔类型标识商品是否选中，如`constisChecked:boolean=true`来标记状态。

数字类型精准赋值在金融系统里，用数字类型定义账户余额，如`constaccountBalance:number=5890.50`确保数值准确性。

字符串类型灵活拼接在用户信息展示中，用字符串类型拼接姓名与身份，如`constuserInfo:string="姓名："+"张三"`。入门小练习

数值类型场景实操模拟电商商品定价，用number类型定义单价、库存数，计算商品总价并输出结果。

字符串类型拼接练习模拟用户信息展示，用string类型存储姓名、手机号，拼接成完整个人简介内容。

布尔类型逻辑判断模拟登录验证场景，用boolean类型标记账号状态，判断是否允许用户进入系统。TypeScript接口语法讲解04interface关键字声明接口使用interface关键字声明接口，定义对象的属性和类型，如interfaceUser{name:string;age:number}。接口属性的类型指定接口可为属性指定基础类型，比如定义Product接口时，将price属性设为number类型。可选属性的语法设置在属性名后加?定义可选属性，如interfacePerson{name:string;phone?:string}，灵活适配对象结构。接口的基本定义语法可选属性与只读属性可选属性的定义与使用在接口中给属性名加“?”即可定义可选属性，比如定义用户接口时，可将“age”设为可选属性适配不同场景。只读属性的声明与特性在属性名前加“readonly”声明只读属性，像接口中“id”设为只读后，初始化后便无法被重新赋值。可选与只读属性的组合应用可同时结合两种属性，比如定义商品接口时，“discount”设为可选，“productId”设为只读，兼顾灵活与安全。函数类型接口定义函数参数与返回值类型通过接口明确函数入参类型与返回值类型，比如规定接收两个number类型参数并返回number的加法函数。可选参数与默认值设定在接口中用?标记可选参数，还可给参数设置默认值，例如定义带可选姓名参数的用户信息输出函数。剩余参数的类型约束利用接口约束函数剩余参数的类型，比如限定剩余参数为string数组，用于批量处理字符串的拼接函数。可索引类型接口数字索引类型定义以数组为典型场景，通过`number`类型索引约束元素类型，比如定义`{[index:number]:string}`限定数组元素为字符串。字符串索引类型定义针对对象场景，用`string`类型索引约束属性值类型，例如`{[key:string]:number}`要求对象属性值均为数字。索引类型的兼容性规则数字索引可兼容字符串索引，反之则不行，比如允许数字索引返回值是字符串索引返回值的子类型。单接口继承基础写法通过extends关键字实现单继承，如interfaceAnimal{name:string}，interfaceDogextendsAnimal{breed:string}。多接口继承组合写法同时继承多个接口，用逗号分隔，比如interfaceA{a:number}，interfaceBextendsA,C{b:string}。继承后重写属性写法继承可重写父接口属性类型，如interfaceParent{id:number}，interfaceChildextendsParent{id:string}。接口继承写法接口示例演示与练习05接口用法示例

对象类型接口定义通过定义User接口约束用户对象结构，指定name为字符串、age为数字，确保数据格式规范。

可选属性接口应用定义Config接口，将background设为可选属性，适配不同配置需求，比如部分组件无需背景设置。

只读属性接口使用定义Point接口，把x、y设为只读属性，用于固定坐标点，防止后续代码意外修改坐标值。入门小练习定义用户信息接口并赋值要求定义包含姓名、年龄、邮箱的用户接口，创建符合接口的对象，比如模拟创建用户"张三"的信息。编写商品信息校验函数基于商品接口（含名称、价格、库存），编写函数校验传入对象是否符合接口规范，例如校验手机商品信息。设计数组接口并遍历输出定义包含指定类型元素的数组接口，比如书籍ID数组，编写代码遍历输出数组内的所有元素。综合实战小项目06梳理核心功能需求梳理待办清单项目的核心功能，明确需支持增删改查及状态标记，为类型设计锚定方向。定义基础数据类型根据功能需求，设计Task基础类型，包含id、content、status等字段，对应待办项核心属性。设计接口约束数据结构创建TaskList接口约束待办列表数组，同时定义UpdateTask接口规范更新操作的入参格式。需求分析与类型设计接口结构定义

用户信息接口定义可定义包含姓名、手机号、邮箱等字段的用户接口，如某电商平台的用户注册信息校验模型。

商品信息接口定义可构建含商品ID、名称、价格、库存等字段的商品接口，适配电商商品展示系统的数据规范。

订单信息接口定义可设计包含订单号、用户ID、商品列表、总价的订单接口，匹配外卖平台的订单数据流转逻辑。代码编写实现

基础类型变量定义定义字符串、数字等基础类型变量，比如用letusername:string="TypeScript新手"来明确变量类型。

接口结构编写创建用户信息接口，规定name为字符串、age为数字，确保数据结构规范统一。

类型约束下的函数实现编写接收用户接口参数的函数，限定参数类型，比如functionprintUser(user:User){}避免类型错误。