当前位置：首页 > news >正文

TypeScript技能总结(二)

news 2025/6/24 10:42:39

typescript是js的超集，目前很多前端框架都开始使用它来作为项目的维护管理的工具，还在不断地更新，添加新功能中，我们学习它，才能更好的在的项目中运用它，发挥它的最大功效

//readonly 只能修饰属性，不能修饰方法
//readonly修饰的属性，必须手动添加明确的类型，否则就是字面量类型

class Person {//只读属性readonly age:number = 18constructor(age:number) {this.age = age}//错误展示// readonly setAge() {//     // this.age = 20// }
}

//接口或者{}表示的对象类型,里面的属性也是可以用readonly来修饰的

interface IPerson{readonly name:string
}let obj: IPerson = {name:'JACK'
}obj.name = 'rose'

//类型兼容性
//分为结构化类型系统和标明类型系统
//TS采用的是结构化类型系统，也叫duck typing(鸭子类型)
//类型检查关注的是值所具有的形式
//也就是在结构类型系统中，如果两个类型对象具有相同的形状，则认为他们属于同一类型

class Point {x: numbery:number
}class Point2D {x: numbery:number
}const p: Point = new Point2D()

//如果在表明类型系统中（c#,java）则两个类型不是同的

class Point3D{x: numbery: numberz:number
}const p1: Point = new Point3D()
const p2: Point = new Point()//错误演示
const p3: Point3D = new Point()

//Point3D 至少与Point相同，则Ponit兼容Point3D

//所以成员多的Ponit3D可以赋值给成员少的Ponit

//接口之间的兼容性，类似于class

//函数之间的兼容性比较复杂
//参数个数，参数多的的兼容参数少的，即参数少的可以赋值给参数多的
//参数类型,相同位置的参数类型要相同（原始类型）或兼容（对象类型）
//返回值类型

type F1 = (a: number) => void
type F2 = (a: number, b: number) => voidlet f1: F1
let f2: F2 = f1//错误演示,参数多的不能付给参数少的
let f3: F1 = f2//参数多的兼容少的，少的可以赋值给多的
const arr = [1,2,3,4,5]const a1 = arr.map((el) => el)const a2 = arr.map(() => console.log('1111111'))type F3 = (a: number) => string
type F4 = (a: number) => stringlet f4: F3
let f5:F4
f4 = f5
f5 = f4

//技巧:将对象拆开，把每个属性看做一个个参数，参数少的就可以赋值给参数多的

//返回值类型
//如果返回值类型是基本类型，相同则互相兼容

type F8 = () =>string
type F9 = () => stringlet f8: F8
let f9: F9 = f8
f8 = f9

//若果是对象类型，则成员多的可以赋值给少的

type F10 = () => {name:string}
type F11 = () => { name: string, age: number }let f10: F10
let f11: F11f10 = f11
//错误演示
f11 = f10

//交叉类型
//类似于接口继承，用于组合多个类型为一个类型（常用语对象类型）
//是新类型同时具备了多个类型的属性类型

interface Person {name:string
}interface Age{age:number
}type IPerson = Person & Agelet obj: IPerson = {name: "GAOFENG",age: 20,
}type P = {name:string}
type A = { age: number }type C = P & Alet obj2: C = {name: 'gaogeng',age:30
}

//交叉类型和接口继承的对比

//相同点:都可以实现对象类型的组合
//不同点：实现继承时，处理同名类型冲突的方式不一样
//接口继承会报错，交叉类型没有错误

interface A1 {fn:(a:string) => string
}
interface B1 extends A1 {fn:(a:number) => string
}interface C1 {fn:(a:number) => string
}type C4 = A1 & C1let c: C4 = {fn(name:string|number) {// return name as stringreturn <string>name}
}
c.fn('task...')
c.fn(33333)