企业官网建设流程全解析

黄页网站大全,软件搭建,软件商城免费下载app,广州网站建设公司乐云seoTypeScript TypeScript 由微软开发#xff0c;是 JavaScript 的超集#xff0c;浏览器暂不支持直接运行 TS#xff0c;需编译为 JS 执行。 一、类型声明 1. 基础变量/常量声明 // 语法#xff1a;let/const 标识符: 类型 赋值 let str: string this is a string是 JavaScript 的超集浏览器暂不支持直接运行 TS需编译为 JS 执行。一、类型声明1. 基础变量/常量声明// 语法let/const 标识符: 类型 赋值letstr:stringthis is a string;// 变量constPI:number3.14159;// 常量2. 函数及返回值声明// 语法function 函数名(参数1:类型, 参数2:类型): 返回值类型 {方法体}functioncount(a:number,b:number):number{returnab;}3. 字面量类型// 字面量类型限制变量只能赋值为指定字面量letb:hellohello;// 正确声明方式// b 1; // 报错不能将类型“number”分配给类型“hello”二、核心数据类型TS 包含 JS 全部数据类型新增了更严格的类型约束和专属类型string/number/boolean基础类型小写String/Number/Boolean包装对象大写极少直接使用1. any任意类型放弃类型检查可赋值给任意类型变量leta:any;// 显式声明anyletb;// 隐式推断为anyafalse;astr;letbo:booleana;// 不报错2. unknown类型安全的any需类型校验/断言后才能赋值给其他类型leta:unknown;a99;athis is str;// 方式1类型判断letstr1:string;if(typeofastring){str1a;}// 方式2类型断言两种写法letstr2:stringaasstring;letstr3:stringstringa;3. never/voidnever表示永远不会有返回值如抛出异常的函数void表示无返回值更常用4. 对象类型// 基础对象声明letperson:{name:string;age:number;};// 可选属性 任意属性letperson4:{name:string;age?:number;// 可选属性[key:string]:any;// 任意属性};person4{name:tom,age:123,gender:male};// 合法5. 函数类型声明letcount:(a:number,b:number)number;count(x:number,y:number){returnxy;};6. 数组类型letarr1:string[];// 方式1基础写法letarr2:Arraynumber;// 方式2泛型写法arr1[Hello,World];arr2[1,2,3,4,5];7. 元组Tuple固定长度和类型的数组letarr1:[string,number];// 长度2类型依次为string、numberletarr2:[number,boolean];letarr3:[string,number,boolean,...string[]];// 扩展元组前3个固定后续为string8. 枚举EnumenumDirection{Up01,Down02,Left03,Right04}// 枚举访问console.log(Direction.Right);// 4console.log(Direction[0x04]);// Right// 枚举使用示例functionwalk(dir:Direction){switch(dir){caseDirection.Up:console.log(向上移动);break;caseDirection.Down:console.log(向下移动);break;}}walk(Direction.Down);// 输出向下移动三、类型组合1. 联合类型或 |变量可以是多个类型中的一种letnumOrStr:number|string;numOrStr123;numOrStrabc;2. 交叉类型且 组合多个类型的属性typeName{name:string};typeAge{age:number};typePersonNameAge;// 同时包含name和ageletp:Person{name:张三,age:20};四、类Class1. 基础类与继承classPerson{name:string;age:number;constructor(name:string,age:number){this.namename;this.ageage;}speak():void{console.log(姓名${this.name}年龄${this.age});}}classStudentextendsPerson{publicgrade:string;// 公共属性默认publicprivatesex:stringboy;// 私有属性仅类内部访问readonlyidCard:string;// 只读属性仅声明/构造函数初始化constructor(name:string,age:number,grade:string,idCard?:string){super(name,age);// 必须调用父类构造函数this.gradegrade;this.idCardidCard||0000000000;// 只读属性可在构造函数赋值}// 重写父类方法需加overrideoverridespeak():void{super.speak();// 调用父类方法console.log(年级${this.grade});}privateshowSex(){console.log(this.sex);// 私有方法仅内部调用}}2. 访问修饰符public公共默认任意位置访问private私有仅类内部访问protected受保护类内部 子类访问readonly只读仅声明/构造函数初始化3. 抽象类包含抽象方法无实现只能被继承不能实例化abstractclassPackage{publicweight:number;publicunitPrice:number0.5;constructor(weight:number,unitPrice?:number){this.weightweight;if(unitPrice)this.unitPriceunitPrice;}// 抽象方法子类必须实现abstractcalculate():number;// 普通方法publicgetWeight():number{returnthis.weight;}}// 子类实现抽象方法classStandardPackageextendsPackage{calculate():number{returnthis.weight*this.unitPrice;}}constpacknewStandardPackage(10,2);console.log(pack.calculate());// 20五、泛型复用性强的类型约束支持任意类型的类型安全// 1. 泛型函数functionlogDataT(data:T):void{console.log(data);}logDatastring(hello);// 指定类型logData(123);// 自动推断number// 2. 多泛型参数functionlogData2T,X(data1:T,data2:X):void{console.log(${data1}${data2});}// 3. 泛型接口interfaceIPersonT{name:string;age:number;extraInfo:T;// 动态类型}// 4. 泛型类classStudentT{constructor(publicname:string,publicage:number,publicextraInfo:T){}}// 使用示例typeJobInfo{title:string;company:string};letp:IPersonJobInfo{name:张三,age:20,extraInfo:{title:工程师,company:XX公司}};六、类型文件.d.ts类型声明文件用于声明类型无具体实现types/xxx第三方库的类型声明包如types/nodetypes/xxx是社区提供的第三方库类型包安装后直接用无需额外配置.d.ts是自定义类型声明文件用于补充类型、复用类型只声明不实现关键配置确保tsconfig.json的typeRoots和include包含.d.ts文件目录TS 会自动识别。1. 基础格式.d.ts 文件只声明类型不写具体实现// 示例src/types/user.d.ts自定义类型文件// 1. 声明基础类型typeUserIdstring|number;// 2. 声明接口interfaceUser{id:UserId;name:string;age?:number;isAdmin:boolean;}// 3. 声明函数类型declarefunctiongetUserById(id:UserId):User|null;// 4. 声明模块为无类型的 JS 模块补充类型declaremodulemy-custom-js-lib{exportfunctionsayHello(name:string):void;exportconstversion:string;}2. 在 TS 代码中使用 .d.ts 中的类型无需手动 importTypeScript 会自动扫描项目中的 .d.ts 文件需确保 tsconfig.json 配置正确// 示例src/index.ts// 直接使用 user.d.ts 中声明的类型constuser:User{id:1001,name:张三,isAdmin:false};// 使用声明的函数类型constgetUser:typeofgetUserById(id){returnid1001?user:null;};// 使用声明的模块import{sayHello,version}frommy-custom-js-lib;sayHello(user.name);// 类型提示参数必须是 stringconsole.log(version);// 类型提示version 是 string3. 为本地 JS 文件补充类型实战场景有一个 JS 文件 src/utils/format.js没有类型定义// src/utils/format.jsexportfunctionformatDate(date){returndate.toLocaleDateString();}创建对应的 .d.ts 文件补充类型// src/utils/format.d.tsdeclaremodule./format.js{exportfunctionformatDate(date:Date):string;}然后在 TS 中使用import{formatDate}from./utils/format.js;// 类型校验参数必须是 Date 类型返回值是 stringconsttodayformatDate(newDate());console.log(today);