Non interface constraints
function printA(labelObj:{label:string}){ console.log(labelObj); } printA({
label:' Hello ' }) // Skip detection of extra fields // The first assertion : printA({ label:' Hello ', name:'laney' } as {
label:string}) // The second way : Add index signature to string function printB(labelObj:{label:string,[
propName:string]:any}){ console.log(labelObj); } printB({ label:' Hello ', name:
'laney', age:20 }) // The third kind : Assign the literal to another variable var obj = { label:' Hello ', name:'laney' };
printA(obj)
Use interface
// Use interface , A standard namespace INK1 { interface labelValue { label: string; apple:
string; // [propName:string]:any; // Add index signature to string // size?:string; // You can pass it, but you can't };
function printB(labelObj: labelValue) { console.log('labelObj.label'); console.
log(labelObj); } // The first assertion : printB({ label: ' Hello ', // size:'10', apple: 'ddd' }
as { apple: string; label: string }) // The second way : Add index signature to string printB({ label: ' Hello ',
size: 10, age: 10 }) // The third kind : Assign the literal to another variable var obj = { label: ' Hello ', size: 10, age:
10 } }
Interface calculation ( Ordinary computing and array computing )
// Function type interface : Constrain the parameters and return values of the function namespace FunctionA { // Do not use interface var add1 = function(a:
number,b:number):number{ return a+b; } // Using function interfaces interface CalcTwo { (a:number,b:
number):number } var add2:CalcTwo = function(a1:number,b1:number):number {
return a1+b1; } interface encrypt{ (key:string,value:string):string; } var md5:
encrypt=function(key:string,value:string):string{ // Simulation operation return key+value; }
console.log(md5('name','tony')) } namespace MathAdd { interface CalcTwo { (a:
number, b: number): number } /** * Computes the result of an array being computed by some algorithm * @param {number[]} arr array *
@param {CalcTwo} calc User specified algorithm function * @param {number} initVal Pass in the initial value * @returns
{number} The final result is obtained **/ function calcArr(arr: number[], calc: CalcTwo, initVal:
number): number { // var result = initVal; // arr.forEach((value,index)=>{ //
result = calc(result,value) // }); // return result // Higher order function return arr.reduce(
function (a, b) { return calc(a, b) }, initVal) } var arr: number[] = [1, 3, 5,
7, 9]; var sum = function (a1: number, b1: number): number { return a1 + b1; }
var multipy = function (a1: number, b1: number): number { return a1 * b1; } // Add up
var p1 = calcArr(arr, sum, 10); console.log(' Add up :' + p1); // Multiply var p2 = calcArr(
arr, multipy, 10); console.log(' Multiply :' + p2); }
Interface definition , Array and object values
namespace ArrG { interface UserArr { [index: number]: string } //1. Constraints on data var
arr1: UserArr = ['aaa', '111']; // var arr2:UserArr = ['aaa',111]; // error console.
log(arr1[0]) //2. Constraints on objects interface UserObj { [index: string]: string } var obj1:
UserObj= { name: " Zhang San " } // correct // var obj1:UserObj = {name:112} // error console.log(
obj1) }
Class inheritance interface
// The class type interface is used to specify the content of a class . // Class implements the interface essentially That is, the class follows the constraints of the interface , How many functions are written in the interface , parameter , The same function should be written in the implemented class , parameter .
namespaceTT1 { interface FullName { username: string; } //WebCoder
Interfaces need to be followed FullName The constraints of class WebCoder implements FullName { fruit:string; username:
string; constructor(fruit01:string,username:string) { this.fruit = fruit01; this
.username = username; } } var p1 = new WebCoder(' Apple ','Alice'); console.log(p1);
} namespace TT2 { // You can describe a method in an interface , And implement its function in class , // Like the one below setName The method is the same interface
FullName { username: string; setName(name:string):void; getName():void } class
Person implements FullName { username:string; constructor(username:string) {
this.username = username; } setName(str:string){ this.username = str; } getName(
){ console.log(this.username); } } var p1 = new Person('laney'); p1.setName(
'blood'); p1.getName(); }
Multi interface inheritance
// 6.2 Interfaces can inherit interfaces namespace PE1 { interface Animal { eat(): void; } interface
Female { usernmae: string; } interface Male { age: string } // Interface Person
Inherited the interface Animal // Single inheritance . Only one interface is inherited interface Person extends Animal { work(): void; }
// Multi interface inheritance // Interface name extends Interface 1, Interface 2,.... Interface n // Inherit multiple interfaces separated by commas interface Cat extends
Animal, Female, Male { color: string; } class webFront implements Person { name:
string; constructor(name: string) { this.name = name; } eat() { console.log(
this.name + ' Eat watermelon ') } work() { console.log(this.name + ' Write code ') } } var w1 = new
webFront(' Zhang San '); w1.eat(); // Class inherits classes and implements interfaces : WebFront Inheritance class Programmer And implement the interface Person }
// Classes can implement classes , Interfaces can also be implemented namespace PE2 { interface Animal { eat(): void; } interface
Person extends Animal { work(): void; } class Programer { name: string;
constructor(name: string) { this.name = name; } codeing(code: string) { console.
log(this.name + code); } } class webFront extends Programer implements Person {
constructor(name: string) { super(name) } eat() { console.log(this.name + ' Eat apples ')
} work() { console.log(this.name + ' Write code ') } } var w2 = new webFront('Tony'); w2.
eat(); } // Interface inheritance class namespace PE3 { class Point { x: number; y: number; constructor
(x: number, y: number) { this.x = x; this.y = y; } shape() { console.log(' prototype ');
} } interface Point3D extends Point { z: number; eat(): void; } var ts: Point3D
= { x: 1, y: 2, z: 3, shape() { console.log('kkkk'); }, eat() { console.log(
' Like to eat fruit '); } } console.log(ts); }
remarks : Use of casts
function getLength(x: number | string): number { return x.toString().length;
// return x.length; // error } // Mode 1 : < type > value function getLength1(x: number | string
): number { if ((<string>x).length) { return (<string>x).length } else { return
x.toString().length } } // Mode 2 : value as type function getLength2(x: number | string):
number{ if ((x as string)) { return (x as string).length } else { return x.
toString().length; } }

Technology
©2019-2020 Toolsou All rights reserved,
CSS architecture design NOI2019 travels Detailed explanation ubuntu14.04 How to set static IP2019 Year end summary —— Second year of work Big data tells you , How tired are Chinese women java Simple lottery algorithm , luck draw DemoPYTHON Summary of final review Classical algorithm - recursion ( The case of raw rabbit )2021 year 1 Monthly programmer salary statistics , average 14915 element First knowledge python Skills summary