接口—interface

最新推荐文章于 2023-09-08 16:23:54 发布

目标达成

最新推荐文章于 2023-09-08 16:23:54 发布

阅读量902

点赞数

分类专栏： typescript 文章标签： typescript interface 接口

本文链接：https://blog.csdn.net/liucai1018/article/details/100775184

版权

typescript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>接口</title>
        <script src="interface.js"></script>
    </head>
    <body>

    </body>
</html>

let ia:{lable:string} = {lable:'字符串'};//定义类型，这种应该属于object类型

///一、对象的类型：接口--可以用于对「对象的形状（Shape）」进行描述//
//简单的例子
interface Person {
    name: string;
    age: number;
}
//test
let tom: Person = {//OK
    name: 'Tom',
    age: 25
};
// let tom2: Person = {//error:少了属性不行
//     name:'Tom'
// }
// let tom3: Person = {//error:同样多了属性也不行
//     name: 'tom',
//     age: 20,
//     sex: 'man'
// }

//接口初探
interface LableObj {
    lable:string;
}
function testFun(lable:LableObj){//参数中有多的属性没关系
    console.log(lable.lable);
}
//test
let testLable = {size:0,lable:'字符串'};//这里有多的属性没关系(顺序也无关)，但一定不能少了lable属性，否则匹配不上LableObj类型
testFun(testLable);


//可选属性：有时候不需要匹配所有的属性，或者有点属性是不必须要的
interface Student {
    sno: string;
    sname?: string;
}
let student:Student = {//OK,少了那个可选属性没问题，但还是不能多出属性
    sno:'001'
}


//任意属性:需注意一点，如果有任意属性，那么其他属性只能是这个任意属性所包含的类型
interface Person1{
    name:string;
    age:number;
    [anyProp:string]:any;
}
//test:用hobby,eat等都可以
let person1:Person1 = {
    name:'jack',
    age:20,
    hobby:'NBA'
}
let person11:Person1 = {
    name:'jack',
    age:20,
    like:'eat'
}
//注:需注意一点，如果有任意属性，那么其他属性只能是这个任意属性所包含的类型
interface Person2{
    name:string;
    age:number;//如果任意属性是string，则这里不能有string外其他的类型，如果要可以用number，任意属性可以这样:string|number(联合类型)或any
    [anyProp:string]:string|number;
}


//只读属性:readonly 属性名:类型
interface Point{
    readonly x?:number;
    y:number;
}
let point:Point = {y:2};
// point.x = 1;//注意：只读属性是只能在第一次给对象赋值时才行，而不是第一次给属性赋值
// let point:Point = {x:1,y:2};//point.x = 3;//error:不能再次赋值，只有在对象被创建时才能赋值，后面不能更改
/**
 * readonly属性和const类型:
 * readonly是用在属性上，而const用于变量上
 */

//ReadonlyArray<T>类型
let array:ReadonlyArray<number> = [1,2,3,4];
// array[0] = 1;//error
// array.push(3);//error
// array.length = 10;//error
let tempA = [4,5,6,8,9];
// tempA = array;//error:将自己赋值给其它数组也不行，但可通过断言重写数组array
tempA = array as number[];


//二、对类的一部分行为进行抽象///
//类实现接口
//报警
interface Alarm{
    alarm();
}
//车实现报警
class Car implements Alarm{
    alarm() {
        console.log('报警...');
    }
}


//接口继承接口
interface Light extends Alarm{
    light();//灯
}
class Car2 implements Light{//得实现Light和Alarm接口的方法
    light() {
        console.log('car2 light...');
    }
    alarm() {
        console.log('car2 alarm...');
    }
}

//接口继承类
class Point2D{
    x:number;
    y:number;
}
interface Point3D extends Point2D{
    z:number;
}
let point3d:Point3D = {
    x:1,
    y:2,
    z:3
}


//混合类型：可以使用接口的方式来定义一个函数需要符合的形状
interface A{//定义函数参数类型列表为name:string,age:number
    (
        name:string,
        age:number
    ):boolean;//返回值为boolean
}
let testA:A;
testA = function(name:'jack', age:12){
    return true;
}

//有时候，一个函数还可以有自己的属性和方法：还没看
interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}
function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

目标达成

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
接口—interface

html <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>接口</title> <script src="interface.js"></script&...
复制链接

扫一扫