从零开始学习typescript系列7: typescript接口interface相关使用详解含demo

[[toc]]

demo:描述普通对象:类型检查

使用interface检查属性类型

interface Person {
    name: string} // interface定义
function greeter(p: Person){
   return p.name} //  interface使用

// 1. 隐式类型检查: 检查属性是否存在和匹配，不检查多余属性，不检查顺序
let user1 = {
   age:20, name: 'san'}; // ✅
console.log("user1: ", greeter(user1));  // user1:  san

// 2. 显式类型检查: 检查属性是否存在和匹配，不能有多余属性，不检查顺序
let user2: Person = {
   name: 'san'}; // ✅
console.log("user2: ", greeter(user2));  // user2:  san
// let user3:Person = {age:20,name: 'san'};  // ❌ error 'age' does not exist in type 'Person'

// 3. 类型推断 相当于隐式类型检查 
let user4 = {
   age:20,name: 'san'} as Person; // ✅ 
console.log("user4: ", greeter(user4));  // user4:  san

属性检查分类

• 隐式类型检查
• 显式类型检查

类型检查点

• 属性是否存在？
• 属性类型是否正确？
• 属性顺序是否可以随意？
• 属性是否可以多余？

demo:描述普通对象:可选属性

可选属性

• 属性名称后接问号

interface SquareConfig {
    color?: string, width?: number }
let sc1: SquareConfig = {
   } // ✅ 
let sc2: SquareConfig = {
   color: 'red'} // ✅ 
let sc3: SquareConfig = {
   width: 1} // ✅ 
let sc4: SquareConfig = {
   color: 'red', width: 1}// ✅ 
let sc5 = {
   color: 'red', opactiy: 1} as SquareConfig // ✅ 
let sc6: SquareConfig =  {
   colr: 'red', width: 0.5} // ❌  'colr' does not exist in type 'SquareConfig'

demo:描述普通对象:只读属性

只读属性

• 通过readonly, ReadonlyArray定义
• 初始化之后，只能读不能写

// 1. 只读属性 readonly
interface Point {
    readonly x: number; readonly y: number }
let p1: Point = {
   x: 1, y:2}
console.log(p1.x, p1.y); //✅ 1 2
p1.x = 3; // ❌ Cannot assign to 'x' because it is a read-only property.

// 2. 只读数组 ReadonlyArray
let intArr2: ReadonlyArray<number>