TypeScript-接口基本使用

详情可见
1.TypeScript的接口基本使用

1.什么是接口类型?
和number,string,boolean,enum这些数据类型一样,
接口也是一种类型, 也是用来约束使用者的
2.为什么使用接口？
限定传入的数值的类型与我们需要的类型一样，由于JavaScript是弱类型，不会自己去查找类型错误，则通过定义一个接口并限定里面的数据类型则可以在编写的代码的时候发现问题
// 定义一个接口类型
interface FullName{
    firstName:string
    lastName:string
}
let obj = {
    firstName:'Jonathan',
    lastName:'Lee'
    // lastName:18 //如果不使用接口 错误的类型不会报错
    				//使用接口 错误的类型会报错
};
// 需求: 要求定义一个函数输出一个人完整的姓名, 这个人的姓必须是字符串, 这个人的名也必须是一个字符
function say({firstName, lastName}:FullName):void {
    console.log(`我的姓名是:${firstName}_${lastName}`);
}
say(obj);

2.接口的可选属性

定义一个接口
interface FullName{
    firstName:string
    lastName:string
    middleName?:string
    [propName:string]:any
}
需求: 如果传递了middleName就输出完整名称, 如果没有传递middleName, 那么就输出firstName和lastName
function say({firstName, lastName, middleName}:FullName):void {
    // console.log(`我的姓名是:${firstName}_${lastName}`);
    if(middleName){
        console.log(`我的姓名是:${firstName}_${middleName}_${lastName}`);
    }else{
        console.log(`我的姓名是:${firstName}_${lastName}`);
    }
}
注意点: 如果使用接口来限定了变量或者形参, 那么在给变量或者形参赋值的时候,
赋予的值就必须和接口限定的一模一样才可以, 多一个或者少一个都不行

say({firstName:'Jonathan'});
say({firstName:'Jonathan', lastName:'Lee', middleName:"666"});

注意点: 但是在企业开发中可以多一个也可能少一个
少一个或多个怎么做? 可选属性
say({firstName:'Jonathan', lastName:'Lee', middleName:"666"});
say({firstName:'Jonathan', lastName:'Lee'});
多一个或者多多个怎么做? 如果绕开TS检查
方式一: 使用类型断言
say({firstName:'Jonathan', lastName:'Lee', middleName:"666", abc:'abc'} as FullName);
方式二: 使用变量
let obj = {firstName:'Jonathan', lastName:'Lee', middleName:"666", abc:'abc'};
say(obj);
方式三: 使用索引签名
say({firstName:'Jonathan', lastName:'Lee', middleName:"666", abc:'abc', 123:123, def:"def"});

3.TypeScript的索引签名

1.什么是索引签名?
 索引签名用于描述那些“通过索引得到”的类型，比如arr[10]或obj["key"]

interface FullName {
    [propName:string]:string
}
let obj:FullName = {
    // 注意点: 只要key和value满足索引签名的限定即可, 无论有多少个都无所谓
    firstName:'Jonathan',
    lastName:'Lee',
    // middleName:false // 报错
     false: '666' // 无论key是什么类型最终都会自动转换成字符串类型, 所以没有报错
}

interface stringArray {
    [propName:number]:string
}

let arr:stringArray = {
    0:'a',
    1:'b',
    2:'c'
};

4.TypeScript的只读属性

 2.什么是只读属性?
 让对象属性只能在对象刚刚创建的时候修改其值

interface FullName {
    firstName:string
    readonly lastName:string
}
let myName:FullName = {
    firstName: 'Jonathan',
    lastName: 'Lee'
};
myName.lastName = 'Wang';
console.log(myName);


// TS内部对只对属性进行了扩展, 扩展出来了一个只读数组
// let arr2:Array<string> = ['a', 'b', 'c'];
let arr2:ReadonlyArray<string> = ['a', 'b', 'c'];
console.log(arr2[0]); // a
arr2[0] = '666';
console.log(arr2[0]); // 666