typescriptのインタフェース

typescriptのインタフェース
インタフェースといえば:オブジェクト向けのプログラミングでは、インタフェースは規範の定義であり、行為と動作の規範を定義し、プログラム設計の中で、インタフェースは制限と規範の役割を果たしている.インタフェースは、あるクラスが遵守する必要がある規範を定義し、インタフェースはこれらのクラスの内部状態データに関心を持たず、これらのクラスの方法の実現の詳細にも関心を持たず、このクラスにいくつかの方法を提供しなければならないことを規定し、これらの方法を提供するクラスは実際の需要を満たすことができる.typescripのインタフェースはjavaに似ています.プロパティ、関数、インデックス、クラスなど、より柔軟なインタフェースタイプも追加されました.
typescriptのインタフェースは:1に分けられます.属性クラスインタフェース2.関数タイプインタフェース3.インデックス可能インタフェース4.クラスタイプインタフェースアトリビュートインタフェースクラスタイプインタフェースアトリビュートインタフェース:入力オブジェクトに対するコンストレイント

interface People{
    name:string;
    age:number
}
function printPeople(personal:People){
console.log('  :'+personal.name+'  '+personal.age);

}
//  printPeople                      
//    
printPeople((name:'  ',age:23));//  
printPeople("123");//  
printPeople((name:'  ',age:23,sex:' '));//  

もう1つはオプションインタフェースです

interface People{
name: string;
age? : number
}
function printPeople(personal :People){
console.log( '  : '+personal. name+ '  ' +personal . age);
}
//  printPeople                      ，    
printPeople({name: '  '，age:23}); //   
printPeople( {name: '  '});//  age  ，      age     ? ，   
printPeople("123"); //  
printPeople({name: '  '，age:23,sex:' '});//  

関数タイプインタフェースは、メソッドが入力するパラメータと戻り値を制約します.

//         
interface encrypt{
(key : string, value :string):string;
var md5 : encrypt=funct ion(key : string, value :string):string{
//     
return key+value;
console . log(md5('name' , ' zhangsan' ));

インデックス可能インタフェースの配列とオブジェクトに対する制約(一般的ではありません)

//      
interface UserArr{
[ index: number] : string;
}
var arr:UserArr=["12" , '  '，"aaa"];//  
var arr1 :UserArr=[1,  ' ,a];//  
//      
interface User0bj{
[ index:string] : string
}
var obj:UserObj={ "  ”:"  ”，'  ':" "}
var obj :User0bj=[];//  

クラスタイプインタフェースはクラスの制約と抽象に少し似ています.

interface Animal{
name: string;
eat(str:string):void;
}
class Dog implements Animal{
name: string;
this . name=name ;
}
eat(){
console. log(this . name+'   ')
}
}

結合タイプとインタフェースの例では、インタフェースで結合タイプを使用する方法を示します.TypeScript interface RunOptions{program:string;commandline:string[]|string|()=>string);}
//commandlineは文字列var options:RunOptions={program:“test 1”,commandline:“Hello”};console.log(options.commandline)
//commandlineは文字列配列options={program:‘test 1’,commandline:["Hello","World"]};console.log(options.commandline[0]); console.log(options.commandline[1]);
//commandlineは関数式options={program:[test 1],commandline:()=>{return"Hello World;}}};
var fn:any = options.commandline; console.log(fn()); 出力結果は

Hello
Hello
World
**Hello World**

インタフェースと配列インタフェースでは、配列のインデックス値と要素を異なるタイプに設定できます.インデックス値は数値または文字列です.

interface namelist { 
   [index:number]:string 
} 
 
var list2:namelist = ["John",1,"Bran"] /      1    string   
interface ages { 
   [index:string]:number 
} 
 
var agelist:ages; 
agelist["John"] = 15   //    
agelist[2] = "nine"   //   

インタフェースの継承
インタフェース継承とは、インタフェースが他のインタフェースで自分を拡張できることを意味します.Typeスクリプトでは、インタフェースが複数のインタフェースを継承できます.キーワードextendsの使用を継承します.単一インタフェースは構文形式を継承します.
Child_interface_name extends super_interface_name
マルチインタフェースは構文形式を継承します.
Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name
継承された各インタフェースはカンマで区切られます.単一継承インスタンス

interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = {}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("  :  "+drummer.age)
console.log("     :  "+drummer.instrument)

以上のコードをコンパイルし、以下のJavaScriptコードを得る.

var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("  :  " + drummer.age);
console.log("     :  " + drummer.instrument);

     ：
  :  27
     :  Drum

マルチ継承インスタンス

interface IParent1 { 
    v1:number 
} 
 
interface IParent2 { 
    v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)

以上のコードをコンパイルし、以下のJavaScriptコードを得る.

var Iobj = { v1: 12, v2: 23 };
console.log("value 1: " + Iobj.v1 + " value 2: " + Iobj.v2);
     ：
value 1: 12 value 2: 23