TypeScript技能总结(二)

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

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

class Person {
    //只读属性
    readonly age:number = 18
    constructor(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: number
    y:number
}

class Point2D {
    x: number
    y:number
}

const p: Point = new Point2D()

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

class Point3D{
     x: number
     y: number
     z: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) => void

let 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) => string

let f4: F3
let f5:F4
f4 = f5
f5 = f4

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

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

type F8 = () =>string
type F9 = () => string

let f8: F8
let f9: F9 = f8
f8 = f9

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

type F10 = () => {name:string}
type F11 = () => { name: string, age: number }


let f10: F10
let f11: F11

f10 = f11
//错误演示
f11 = f10

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

interface Person {
    name:string
}

interface Age{
    age:number
}

type IPerson = Person & Age

let obj: IPerson = {
    name: "GAOFENG",
    age: 20,
}

type P = {name:string}
type A = { age: number }

type C = P & A

let 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 & C1

let c: C4 = {
    fn(name:string|number) {
        // return name as string
        return <string>name
    }
}
c.fn('task...')
c.fn(33333)

关注我的个人公众号，获取更多前后端开发经验知识