韩国最牛的设计网站大全多语言版本网站

韩国最牛的设计网站大全,多语言版本网站,网站开发展示,河源网站搭建费用一、基础类型#xff08;必掌握#xff09; 1. 原生基础类型类型说明示例代码string字符串let name: string 张三;number数字#xff08;整数/浮点数#xff09;let age: number 25; const pi 3.14;boolean布尔值let isDone: boolean true;null空值let n: …一、基础类型必掌握1. 原生基础类型类型说明示例代码string字符串let name: string 张三;number数字整数/浮点数let age: number 25; const pi 3.14;boolean布尔值let isDone: boolean true;null空值let n: null null;undefined未定义let u: undefined undefined;symbol唯一值ES6const id: symbol Symbol(id);bigint大整数ES11let bigNum: bigint 100n;2. TS 新增基础类型类型说明示例代码any任意类型关闭类型校验少用let val: any 123; val abc;unknown安全版 any需类型守卫let unk: unknown hi; if (typeof unk string) unk.length;void无返回值函数用function log(): void { console.log(日志); }never永无返回值报错/无限循环function throwErr(): never { throw new Error(错了); }3. 数组类型3种写法// 1. 类型[]最常用letnumArr:number[][1,2,3];// 2. Array类型泛型letstrArr:Arraystring[a,b,c];// 3. 联合类型数组letmixArr:(number|string)[][1,a];4. 元组类型固定长度类型// 声明[类型1, 类型2, ...]letuser:[string,number][张三,25];let[userName,userAge]user;// 解构赋值类型自动匹配二、进阶类型项目核心1. 联合类型|多类型选其一typeStatussuccess|error|loading;// 字面量联合常用letstatus:Statussuccess;// 类型守卫避免调用方法报错functionformat(val:number|string){if(typeofvalstring)returnval.toUpperCase();returnval.toFixed(2);}2. 交叉类型合并多类型typePerson{name:string;age:number};typeJob{job:string;salary:number};typePersonWithJobPersonJob;// 同时拥有两个类型的属性constuser:PersonWithJob{name:张三,age:25,job:前端,salary:20000};3. 类型别名type复用类型// 基础类型复用typeStrstring;// 复杂类型复用typeUser{id:number;name:string;age?:number;// 可选属性readonlyphone:string;// 只读属性};// 函数类型复用typeFn(a:number,b:number)number;constadd:Fn(x,y)xy;4. 接口interface描述结构继承// 基础接口interfacePerson{name:string;age?:number;// 可选属性[key:string]:any;// 任意属性}// 接口继承核心优势interfaceStudentextendsPerson{studentId:number;study():void;// 方法声明}conststudent:Student{name:李四,studentId:1001,study(){}};5.type vs interface核心区别维度typeinterface核心用途任意类型别名基础/联合/交叉对象/类结构描述侧重继承继承用交叉类型支持extends继承重复定义报错不支持合并自动合并属性独有支持类型所有类型主要支持对象/类/函数6. 函数类型约束参数返回值// 1. 直接声明functionadd(a:number,b:number):number{returnab;}// 2. 可选参数放必选后functiongreet(name:string,age?:number){}// 3. 默认参数functionfn(a:number10,b:number){}// 4. 剩余参数functionsum(...nums:number[]):number{returnnums.reduce((a,b)ab,0);}7. 泛型T动态类型复用1基础泛型函数// T 泛型参数动态接收类型functionidentityT(val:T):T{returnval;}// 调用自动推导类型conststridentity(abc);// string 类型constnumidentitynumber(123);// 显式指定类型2泛型约束extends限制范围interfaceHasLength{length:number;}// T 必须包含 length 属性functiongetLengthTextendsHasLength(val:T):number{returnval.length;}getLength(abc);// 合法字符串有 length3泛型接口/类型别名// 泛型类型别名通用对象typeObjT{[key:string]:T};constnumObj:Objnumber{a:1,b:2};// 泛型接口通用函数interfaceFnT,U{(param:T):U;}constnumToStr:Fnnumber,string(num)num.toString();三、核心工具类型直接复用1. 映射类型基于已有类型生成新类型工具类型作用示例基于type User { id: number; name: string }PartialT所有属性改为可选PartialUser→ { id?: number; name?: string }RequiredT所有属性改为必选RequiredPartialUser→ 还原 User 类型ReadonlyT所有属性改为只读ReadonlyUser→ { readonly id: number; … }PickT, K挑选 T 中 K 属性PickUser, id→ { id: number }OmitT, K排除 T 中 K 属性OmitUser, name→ { id: number }RecordK, T生成键 K、值 T 的对象类型Recordstring, User→ { [key: string]: User }2. 泛型工具类型类型提取/转换工具类型作用示例ExcludeT, U从 T 排除能赋值给 U 的类型Exclude“a”ExtractT, U从 T 提取能赋值给 U 的类型Extract“a”ReturnTypeT提取函数返回值类型ReturnType()number→ numberConstructorParametersT提取构造函数参数类型ConstructorParametersDateConstructor→ [number四、类型守卫缩小类型范围1. 常用类型守卫方式方式适用场景示例代码typeof基础类型string/number等if (typeof val string) {}instanceof引用类型数组/类实例if (val instanceof Array) {}in对象是否含某个属性if (name in val) {}自定义类型守卫复杂类型判断function isUser(val: any): val is User { return id in val; }2. 高级类型收窄// 真值收窄排除 falsy 值functionprint(msg:string|null){if(msg)console.log(msg.length);// msg 收窄为 string}// 相等收窄 判断typeDirup|down;functionmove(dir:Dir){if(dirup){}// dir 收窄为 up}五、枚举enum命名常量集合1. 数字枚举支持自增反向映射enumStatusCode{Success200,// 初始值Error400,Loading// 自增 401}console.log(StatusCode.Success);// 200console.log(StatusCode[200]);// Success反向映射2. 字符串枚举无自增无反向映射enumUserStatus{Active已激活,Frozen已冻结}constuser{status:UserStatus.Active};// 语义清晰避免魔法值六、类与 TS面向对象类型约束1. 类的基础类型classPerson{// 属性类型声明name:string;readonlygender:string;// 只读属性// 构造函数constructor(name:string,gender:string){this.namename;this.gendergender;}// 方法类型sayHello():string{returnHello${this.name};}}2. 访问修饰符权限控制修饰符访问范围类内/子类/外部示例public全范围默认public name: string;private仅类内private age: number;protected类内子类protected job: string;3. 抽象类abstract不能实例化abstractclassAnimal{abstractmakeSound():void;// 抽象方法子类必须实现eat(){console.log(吃东西);}// 普通方法}classDogextendsAnimal{makeSound(){console.log(汪汪叫);}// 实现抽象方法}// const animal new Animal(); // 报错抽象类不能实例化七、关键配置tsconfig.json1. 核心必配项{compilerOptions:{target:ES2020,// 编译后 JS 版本module:ESNext,// 模块规范前端/ CommonJSNodeoutDir:./dist,// 输出目录rootDir:./src,// 源码目录strict:true,// 开启严格模式核心esModuleInterop:true,// 兼容 CommonJS/ESMmoduleResolution:Bundler,// 模块解析前端用 BundlerskipLibCheck:true,// 跳过第三方库类型检查提效baseUrl:./,// 基础路径paths:{/*:[src/*]}// 路径别名 指向 src},include:[./src/**/*],// 编译范围exclude:[node_modules]// 排除目录}八、常见问题解决方案1. null 不能赋值给其他类型// 方案1联合类型推荐letmsg:string|nullnull;// 方案2非空断言确定非 nullconstinputdocument.getElementById(input)!;// 方案3可选链短路避免报错user?.name?.length;2. 找不到模块声明文件// 方案1安装社区类型优先npm install types/xxx-D// 方案2手动声明模块src/types/index.d.tsdeclaremodulexxx{exportfunctionfn():void;}3. 类属性未初始化classPerson{age:number18;// 方案1直接初始化name:string;constructor(name:string){this.namename;// 方案2构造函数赋值}}九、最佳实践禁用any用unknown替代配合类型守卫优先类型推导变量赋值时让 TS 自动推导减少冗余开启严格模式strict: true提前发现 bug类型复用重复类型抽离为type/interface路径别名用简化导入提升代码可读性。这份速查表覆盖了 TS 开发的核心知识点可直接作为日常开发的参考手册快速定位所需语法和解决方案~