ts学习笔记六:接口使用

// interface 描述对象的形状和结构,可以给数据增添类型 而且方便复用
// type的方式 通过别名来重新定义类型 

// interface 可以被类实现 和继承 , type没有功能
// type 可以使用联合类型  interface 不能使用联合类型 


let school = { // 接口默认的功能是规范类型的
    name: 'zf',
    age: 12
}
// type ISschool = ; // 类型反推 就是根据代码推导出一个类型,方便使用

type schools = Array<typeof school>;
function aa(school: schools) {
}
aa([{ name: 'zf', age: 123 }]);


// 1)如何用接口描述对象类型 , 如果有联合类型 就使用type
interface IObj {
    name: string
    age: number
}
// type IObj = {name:string,age:number} | string;
const getObj = (obj: IObj) => { }
getObj({ name: 'zf', age: 12 });


// 2) 描述函数类型
interface ISum {
    (a: string, b: string): string
}
// type ISum = (a:string,b:string)=>string
const sum: ISum = (a, b) => {
    return a + b;
}

// 3) 我希望写个计数器的例子  每次调用函数就累加1

interface ICount { // 接口中的混合类型 
    (): number
    count: number
}

const fn: ICount = (() => { // 函数返回函数 我一般要标识函数的返回类型
    return ++fn.count;
}) as ICount
fn.count = 0;


// interface IEffect {
//     ():void,
//     id:number
// }
// function effect(fn:Function){
//     const reactiveEffect = createReactiveEffect(fn);
//     return reactiveEffect
// }
// function createReactiveEffect(fn:Function):IEffect{
//     const effect:IEffect = function reactiveEffect(){

//     }
//     effect.id = 1;
//     return effect
// }



// 4) 接口的特性
// interface IVegetables {
//     color:string,
//     taste:string
// }
// 1 直接断言,断言后可以直接使用 (要保证接口中限制的数据必须要有)
// const tomato:IVegetables = {
//     color:'red',
//     taste:'sweet',
//     size:'big'
// } as IVegetables
// 可能我的代码里 用不到这个size , 还要手动删掉?


// 2)  接口的合并  接口同名会合并,会改变原有的接口
// interface IVegetables {
//     size:string
// }
// const tomato:IVegetables = {
//     color:'red',
//     taste:'sweet',
//     size:'big'
// } 

// 3) 我单独写一个tomato接口 继承蔬菜接口
// interface ITomato extends IVegetables{ // 接口的继承 ts里面的
//     size:string
// }
// const tomato:ITomato = {
//     color:'red',
//     taste:'sweet',
//     size:'big'
// } 

// 4) 可选属性 可以通过? 来实现
interface IVegetables {
    color: string,
    taste: string,
    [key: string]: any // 任意接口 可多填
    // size?:string // 函数的参数
    // id?:number
}
const tomato: IVegetables = {
    color: 'red',
    taste: 'sweet',
}
// 5) 可索引接口
interface ILikeArray {
    [key: number]: any
}
let arr: ILikeArray = [1, 2, 3]
let arr1: ILikeArray = { 1: 1, 2: 2 };



// 把一个对象赋值给一个接口,要满足接口中的所有属性
// 如果多出来的属性 可以采用 断言 、 可选、 任意接口



// 接口中的类型 可以通过类型别名的方式拿出来 , 但是只能用[]
// 嵌套的情况
// type MyType = {key:string,value:string}
// interface XXX {
//     n:MyType[]
// }
// interface IArr {
//     arr:MyType[],
//     a:XXX
// }
// type My = IArr['a']['n']


// 6) 接口实现 接口可以被类来实现 , 接口中的方法都是抽象(没有具体实现)的
interface ISpeakable {
    name: string,
    // 用接口来形容类的时候  void 表示不关心返回值
    speak(): void // 描述当前实例上的方法,或者原型的方法
}
interface IChineseSpeakable {
    speakChinese(): void
}
class Speak implements ISpeakable, IChineseSpeakable { // 剋本身需要实现接口中的方法
    speakChinese(): void {
        throw new Error("Method not implemented.");
    }
    name!: string
    speak(): string { // 此方法是原型方法
        return 'xxx'
    }
}
let s = new Speak()

// 7.抽象类 不能被new, 可以被继承
abstract class Animal { // 只有类被标记成abstract 属性在可以描述成abstract的
    abstract name: string// 没有具体实现,需要子类实现
    eat() {
        console.log('eat')
    }
    abstract drink(): void
}
class Cat extends Animal {
    drink(): void {
        console.log('Method not implemented')
    }
    name: string = 'a'
}

// abstract(可以放置具体的实现) interface (只能放一些抽象的属性和方法 不能有具体实现)


// 8.可以用接口来描述实例 

// 单例模式
// let instance: Person;
// type IPerson = new (name:string)=>Person  描述的是构造函数类型
interface IPerson<T> {
    new(name: string): T
}
function createInstance<T>(clazz: IPerson<T>, name: string) {
    // if (instance) return instance;
    return new clazz(name)
}
class Person {
    eat() { }
    constructor(public name: string) { }
}
class Dog {
    drink() { }
    constructor(public name: string) { }
}

// 泛型就是只有当使用的时候 才能确定类型, 通过参数传入类型
let r = createInstance<Person>(Person, '张三'); // 类可以充当类型,可以描述实例
r.eat()


// 接口的使用  接口特性 extends 、 implements (不能使用联合类型)
// 别名可以使用联合类型 但是不能继承和实现




export { }


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,让我来回答你关于 TypeScript 中 Symbol 和模块的问题。 首先,Symbol 是 TypeScript 中的一种新的基本数据类型,它可以用来创建唯一的标识符。在 TypeScript 中,Symbol 主要有两种用法: 1. 作为对象属性的键值,用来表示一个对象属性的唯一标识符。 2. 作为一个类的静态属性或方法,用来表示该类的唯一标识符。 下面是一个使用 Symbol 作为对象属性键值的示例: ```typescript const key = Symbol('myKey'); const obj = { [key]: 'value' }; console.log(obj[key]); // 输出'value' ``` 在上面的代码中,我们使用 Symbol('myKey') 创建了一个新的 Symbol,然后将该 Symbol 作为对象 obj 的属性键值,并赋值为'value'。最后,我们通过 obj[key] 的方式来访问该属性,并输出了'value'。 另外,模块是 TypeScript 中的另一个重要概念,它用来组织和管理代码。在 TypeScript 中,模块可以使用 import 和 export 命令来进行导入和导出。下面是一个使用模块的示例: ```typescript // moduleA.ts export const num = 123; // moduleB.ts import { num } from './moduleA'; console.log(num); // 输出123 ``` 在上面的代码中,我们定义了一个名为 num 的常量,并将其导出。然后,在另一个模块中,我们使用 import 命令将 num 导入,并通过 console.log 输出了它的值。 这就是关于 TypeScript 中 Symbol 和模块的简单介绍,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值