最初のレベルのタイトル
1. インターフェースの紹介
インターフェイスとは何ですか？
インターフェイスは、オブジェクトの状態と動作を抽象化したものです。これは型であり、仕様であり、機能であり、制約でもあります.
tyoescript についてあまり知らない学生にとって、初めてインターフェイスを理解しようとすると、理解できない場合があります。その意味を理解してください、それは問題ではありません。要件を通してインターフェイスの謎をゆっくりと解き明かしましょう
/*
需求:
创建人的对象, 需要对人的属性进行一定的约束
id是number类型, 必须有, 只读的
name是string类型, 必须有
age是number类型, 必须有
sex是string类型, 可以没有
*/
//2、定义一个接口，该接口作为person对象的类型使用，此时可以限定或者约束该对象中的属性数据
interface IPerson{
//此时代表id是只读的，是number类型的，readonly修饰符只能写在属性之前
readonly id: number
name: string
age: number
//此时代表sex是可选属性：可以写也可以不写
？ sex: string
}
//1、定义一个对象，该对象的类型就是定义的接口IPerson
const person1: IPerson = {
//此时IPerson 会报错：“找不到名称：IPerson ”
id: 1,
name: 'tom',
age: 20,
？ sex: '男'
}
以上がインターフェースの最も基本的なケースですが、まだ疑問があるかもしれません. 大丈夫です. ゆっくりと下を見て、ゆっくりとインターフェースに関する知識を整理しましょう.
インターフェイスの基本概念と定義
TypeScript の中核となる原則の 1 つは、値の構造を型チェックすることです。インターフェイス (Interfaces) を使用してオブジェクトの型を定義します。これにより、プロパティとメソッドの記述が容易になります。
インターフェース:型であり、仕様であり、機能であり、オブジェクトの状態 (属性) と動作 (メソッド) の抽象化 (記述) に使用される制約でもあります。上記のケースでは、IPerson インターフェースを使用して、インターフェースである person1 の属性にいくつかの制約を課しています。
インターフェイスのプロパティ
- a. 必須属性: インターフェイスに追加されると、必須属性を意味します
//示例：
name: string
age: number
- b. オプションの属性: インターフェイスのすべての属性が必須というわけではありません。特定の条件下でのみ存在するものもあれば、まったく存在しないものもあります。使用？モディファイア
//使用语法：
？ sex: '男'
- c. 読み取り専用属性: 一部のオブジェクト属性は、オブジェクトの作成時にのみ変更できます。読み取り専用修飾子付き
//使用语法：
readonly id: number
//补充内容：
/*
const VS readonly
做为变量使用的话用 const，若做为属性则使用 readonly
*/
インターフェイス機能
- 1. 属性を増減することはできません。タイプ チェッカーは、オブジェクト内の属性が IPerson インターフェイスの記述と一致しているかどうかをチェックし、一致しない場合はタイプ エラーを表示します。
- 2. 読み取り専用属性: (一部のオブジェクト属性は、オブジェクトが作成されたばかりのときにのみ値を変更できます) readonly 修飾子は、属性の前に追加する必要があります
- 3. オプションの属性: (インターフェイスのすべての属性が必須というわけではありません。一部の属性は、特定の条件下でのみ存在するか、まったく存在しません)? 属性の前に追加する必要がある修飾子
- 4. 必須属性: インターフェイスに追加されると、必須属性を意味します。
2. インターフェース記述関数型
インターフェイスは、プロパティを持つ通常のオブジェクトを記述するだけでなく、関数型も記述することができます。
インターフェイスは、関数パラメーターの型と戻り値の型を記述できます
また、ケースで実装します。
インターフェイスを使用して関数型を表すには、インターフェイスの呼び出しシグネチャを定義する必要があります。これは、パラメーター リストと戻り値の型のみを持つ関数定義のようなものです。パラメーター リストの各パラメーターには、名前と型が必要です。
/*
需求：定义一个函数mySearch，用以查找第一个参数中是否存在第二个参数，返回结果为一个布尔值。参数为字符串，返回结果为布尔值
*/
//1、定义一个接口，用来作为某个函数的类型使用
interface SearchFunc {
//定义一个调用签名
(source:string,substring:string):boolean//它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
}
//2、定义一个函数，需要满足定义的接口
const mySearch: SearchFunc = function (source: string, sub: string): boolean {
return source.search(sub) > -1//从source这个字符串中查找sub字符串
}
console.log(mySearch('abcd', 'bc'))
インターフェース記述機能の実装は非常に簡単で、非常に簡単で実現可能であることがわかりましたか。
3. インターフェース記述クラスの種類
TypeScript はインターフェイスを使用して、特定の契約に準拠するようにクラスを明示的に強制することもできます
クラスはインターフェースを実装します
- 文法：
用interface定义接口，用implements描述类的类型
- 実装事例:
//1、定义一个接口
interface IFly{
//该方法没有任何的实现
fly()
}
//2、定义一个类，这时这个类的类型就是上面的接口定义的(也可以理解为IFly接口约束了当前的Person类)
class Person implements IFly{
//实现接口中的方法
fly(){
console.log("我相信我可以")
}
}
//实现类：实例化对象
const person = new Person()
person.fly()
クラスは複数のインターフェースを実装します
- 文法の説明:
用interface定义接口，implements描述类的类型，多个接口用“，”隔开
- ケースの実装:
//1、定义多个个接口
interface IFly{
//该方法没有任何的实现
fly()
}；
interface ISwim{
//该方法没有任何的实现
swim()
}
//2、定义一个类：这个类的类型就是IFly和ISwim（一个类同时被多个接口约束）
class Person implements IFly,ISwim{
//实现接口中的方法，必须要真正实现才会不报错
fly(){
console.log("我相信我可以")
}
swim()(){
console.log(“我是真的可以”)
}
}
//3、实例化对象
const person = new Person()
person.fly()
person.swim()
インターフェイスはインターフェイスを継承します
- 文法の説明:
使用extends关键字实现继承
作用：优化一个类描述多个接口一直使用“，”的缺陷
- ケースの実装:
/*
需求：
在上述函数的基础上：由一个新接口来实现已经存在的IFly和ISwim接口，再由Person来实现对新接口的描述。
作用：优化一个类描述多个接口一直使用“，”的缺陷
*/
//接口可以继承其他的多个接口
//1、定义了一个ALL接口，继承了其他的接口
interface ALL extends IFly，ISwim{
}
//2、定义一个类，直接实现ALL接口
class Person implements ALL{
//实现接口中的方法，必须要真正实现才会不报错
fly(){
console.log("我相信我可以")
}
swim()(){
console.log(“我是真的可以”)
}
}
//3、实例化对象
const person = new Person()
person.fly()
person.swim()
以上がインターフェース記述クラスの型の全内容です。
4. まとめ
接口是对象的状态(属性)和行为(方法)的抽象(描述)、タイプ、仕様、機能、および制約- インターフェイスには、必須属性、読み取り専用属性 (readonly)、オプション属性 (?) などの属性があります。
- インターフェイスは、プロパティを持つ通常のオブジェクトを記述するだけでなく、関数型とクラス型も記述することができます
- クラスの型を記述する場合、クラスは 1 つのインターフェイスまたは複数のインターフェイスを実装できますが、インターフェイスの内容が完全に実装されている必要があることに注意してください。
- クラスの型を記述する場合、インターフェイスとインターフェイスの関係を継承 ( extends キーワードを使用) と呼び、クラスとインターフェイスの関係を実装 (implements キーワードを使用) と呼びます。