(精华2020年6月3日更新) TypeScript中接口详解
非接口约束
function printA(labelObj:{
label:string}){
console.log(labelObj);
}
printA({
label:'你好'
})
//跳过额外字段的检测
// 第一种断言 ：
printA({
label:'你好',
name:'laney'
} as {
label:string})
//第二种方式：添加字符串的索引签名
function printB(labelObj:{
label:string,[propName:string]:any}){
console.log(labelObj);
}
printB({
label:'你好',
name:'laney',
age:20
})
//第三种：将字面量赋值给另外一个变量
var obj = {
label:'你好',
name:'laney'
};
printA(obj)
使用接口
//使用接口 ,一种规范
namespace INK1 {
interface labelValue {
label: string;
apple: string;
// [propName:string]:any; //添加字符串的索引签名
// size?:string; //可传可不传
};
function printB(labelObj: labelValue) {
console.log('labelObj.label');
console.log(labelObj);
}
// 第一种断言 ：
printB({
label: '你好',
// size:'10',
apple: 'ddd'
} as {
apple: string; label: string })
//第二种方式：添加字符串的索引签名
printB({
label: '你好',
size: 10,
age: 10
})
//第三种：将字面量赋值给另外一个变量
var obj = {
label: '你好',
size: 10,
age: 10
}
}
接口计算（普通计算和数组计算）
//函数类型接口：对函数的参数以及返回值进行约束
namespace FunctionA {
//不使用接口
var add1 = function(a:number,b:number):number{
return a+b;
}
//使用函数接口
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{
//模拟操作
return key+value;
}
console.log(md5('name','tony'))
}
namespace MathAdd {
interface CalcTwo {
(a: number, b: number): number
}
/**
* 计算数组被某种算法运算的结果
* @param {number[]} arr 数组
* @param {CalcTwo} calc 用户指定的算法函数
* @param {number} initVal 传入初始值
* @returns {number} 得到最终运算结果
**/
function calcArr(arr: number[], calc: CalcTwo, initVal: number): number {
// var result = initVal;
// arr.forEach((value,index)=>{
// result = calc(result,value)
// });
// return result
// 高阶函数
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;
}
//相加
var p1 = calcArr(arr, sum, 10);
console.log('相加:' + p1);
//相乘
var p2 = calcArr(arr, multipy, 10);
console.log('相乘:' + p2);
}
接口定义，数组和对象取值
namespace ArrG {
interface UserArr {
[index: number]: string
}
//1.对数据的约束
var arr1: UserArr = ['aaa', '111'];
// var arr2:UserArr = ['aaa',111]; //错误
console.log(arr1[0])
//2. 对对象的约束
interface UserObj {
[index: string]: string
}
var obj1: UserObj = {
name: "张三" } //正确
// var obj1:UserObj = {name:112} //错误
console.log(obj1)
}
类继承接口
// 类类型接口用来规范一个类的内容。
// 类实现接口本质上 即类遵循接口的约束，接口里面写了多少个函数、参数，实现的类里面也要写相同的函数、参数。
namespace TT1 {
interface FullName {
username: string;
}
//WebCoder 需要遵循接口FullName的约束
class WebCoder implements FullName {
fruit:string;
username:string;
constructor(fruit01:string,username:string) {
this.fruit = fruit01;
this.username = username;
}
}
var p1 = new WebCoder('苹果','Alice');
console.log(p1);
}
namespace TT2 {
// 可以在接口中描述一个方法，并在类里具体实现它的功能，
// 如同下面的setName方法一样
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();
}
多接口继承
// 6.2 接口可以继承接口
namespace PE1 {
interface Animal {
eat(): void;
}
interface Female {
usernmae: string;
}
interface Male {
age: string
}
//接口 Person 继承了接口Animal
//单继承。只继承了一个接口
interface Person extends Animal {
work(): void;
}
//多接口继承
// 接口名 extends 接口1,接口2,....接口n
//继承多个接口用逗号分开
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 + '吃西瓜')
}
work() {
console.log(this.name + '写代码')
}
}
var w1 = new webFront('张三');
w1.eat();
//类继承类并实现接口： WebFront继承类Programmer 并实现接口Person
}
//类可以实现类， 也可以实现接口
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 + '吃苹果')
}
work() {
console.log(this.name + '写代码')
}
}
var w2 = new webFront('Tony');
w2.eat();
}
//接口继承类
namespace PE3 {
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
shape() {
console.log('原型');
}
}
interface Point3D extends Point {
z: number;
eat(): void;
}
var ts: Point3D = {
x: 1,
y: 2,
z: 3,
shape() {
console.log('kkkk');
},
eat() {
console.log('喜欢吃水果');
}
}
console.log(ts);
}
备注：强制转换的使用
function getLength(x: number | string): number {
return x.toString().length;
// return x.length; //错误
}
// 方式一： <类型> 值
function getLength1(x: number | string): number {
if ((<string>x).length) {
return (<string>x).length
} else {
return x.toString().length
}
}
// 方式二： 值 as 类型
function getLength2(x: number | string): number {
if ((x as string)) {
return (x as string).length
} else {
return x.toString().length;
}
}