国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

TypeScript學習3-接口

jindong / 1812人閱讀

摘要：使用場景數據類型聲明和約束聲明數據類型使用數據類型面向對象編程這里和面向對象語言類似，用于定義對象接口，聲明對象的結構，定義類時可以實現接口，滿足這個接口定義的功能。

什么是接口

TypeScript的核心就是類型檢查，接口就是用于聲明類型，給內部或第三方使用者提供類型聲明和約束。

使用場景

數據類型聲明和約束

// 聲明數據類型
interface CustomerInfo {
  customerCode: string;
  customerName: string;
}

// 使用數據類型
function helloCustomer(customerInfo: CustomerInfo) {
  console.log(`Hello, ${customerInfo.customerName}!`);
}

helloCustomer({customerCode: "1001", customerName: "Jee"}); // ok
helloCustomer({customerName: "Jee"}); // error, Property "customerCode" is missing

面向對象編程

這里和面向對象語言類似，用于定義對象接口，聲明對象的結構，定義類時可以實現接口，滿足這個接口定義的功能。

// 接口聲明
interface Animal {
  name: string;
}

// 接口繼承
interface Mammal extends Animal {
  legNum: number;
  sound(): string;
}

// 類實現
class Bull implements Mammal {
  name: string;
  legNum: number;
  
  constructor(name: string) {
    this.name = name;
    this.legNum = 4;
  }

  sound() {
    return "moo";
  }
}

// 實例
let bull1 = new Bull("bull1");
console.log(bull1.sound()); // moo
可變接口屬性

有兩種方式可以實現可變屬性，屬性明確時，推薦第一種。不明確時可以用第二種。

可選屬性，定義可以選傳的屬性

interface CustomerInfo {
  customerCode: string;
  customerName: string;
  customerAddr?: string; // 可選屬性
}

索引類型，支持string，number索引屬性

interface CustomerInfo {
  customerCode: string;
  customerName: string;
  customerAddr?: string; // 可選屬性
  [key: string]: any; // 其他任意名稱，任意類型的屬性
}
這里說明一下，因為JavaScript對象中，數字索引是會轉換成string來取值的。如果一個接口里面，同時有number、string索引屬性時，number索引屬性的類型，必須時string索引屬性的子類型。也就是，number索引的屬性類型，必須能被string索引的屬性類型覆蓋；用number索引去取值，取到的值也是string索引屬性的類型。
靜態屬性和只讀屬性

靜態類型，即類屬性，static修飾

只讀屬性，初始化后不能修改，readonly修飾

interface CustomerInfo {
  static greeting = "Hello"; // 靜態屬性
  static readonly standardGreeting = "Hello"; // 只讀靜態屬性
  readonly customerCode: string; // 只讀屬性
  customerName: string; // 普通屬性
}
const vs readonly，變量用const，屬性用readonly
函數類型

接口除了能描述對象類型，還能描述函數類型（這個和面向對象語言有點不一樣，需要理解一下）。

interface SearchFunc {
  (content: string, key: string): boolean;
}

// 這里參數名可以不一樣，類型也可以省略
let mySearchFunc: SearchFunc = (c, k) => {
  return c.search(k) > -1;
}
后續

會再寫一遍類的學習，一篇接口與類的結合使用。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110302.html

相關文章

  • 從項目中由淺入深的學習typescript (3)

    摘要：序列文章從項目中由淺入深的學習微信小程序和快應用從項目中由淺入深的學習前言為什么會有大家有沒想過這個問題原因是是弱類型編程語言也就是申明變量類型可以任意變換。是的超集，也相當于預處理器本文通過一個項目來讓你快速上手。 showImg(https://segmentfault.com/img/bVbruJw?w=1024&h=768); 序列文章 從項目中由淺入深的學習vue,微信小程序...

    ninefive 評論0 收藏0

  • 如何從JavaScript跨越到TypeScript [基礎進階知識點]

    摘要：接口前端程序員很難理解的點也是一門面向對象的語言，但是中它是基于原型實現的，中使用了類，這樣會更清晰的體會到面向對象這一說法，但是實際在中的面向對象更加完整，它跟這些語言一樣，通過接口和類去完整的面向對象編程。 從入門到放棄的java 初中時自學過JAVA，學了大概一個多月吧， 學了一個多月，看視頻這些，后面放棄了編程。 依稀記得，那段日子極度苦逼，我想如果當時是學javaScrip...

    wangym 評論0 收藏0

  • 如何從JavaScript跨越到TypeScript [基礎進階知識點]

    摘要：接口前端程序員很難理解的點也是一門面向對象的語言，但是中它是基于原型實現的，中使用了類，這樣會更清晰的體會到面向對象這一說法，但是實際在中的面向對象更加完整，它跟這些語言一樣，通過接口和類去完整的面向對象編程。 從入門到放棄的java 初中時自學過JAVA，學了大概一個多月吧， 學了一個多月，看視頻這些，后面放棄了編程。 依稀記得，那段日子極度苦逼，我想如果當時是學javaScrip...

    zhunjiee 評論0 收藏0

  • 深入學習TypeScript

    摘要：是的超級，遵循最新的規范相當于包含了的語法。表示方法沒有返回任何類型類型表示的是那些永不存在的值的類型，例如異常錯誤寫法錯誤三函數內容概述函數的定義可選參數默認參數剩余參數函數重載箭頭函數。 一、Typescript 介紹、環境搭建 1.1 Typescript 介紹 1.TypeScript 是由微軟開發的一款開源的編程語言，像后端 java、C#這樣的面向對象語言可以讓 js 開發...

    趙連江 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<