接口
定义方法中参数的约束
1
2
3
4
5
| function printLabel(label: string): void {
console.log("")
}
printLabel("sss");
|
自定义方法传入参数对json的约束
1
2
3
4
5
| function printLabel(labelInfo: { label: string }): void {
console.log("")
}
printLabel({ label: "ssss" });
|
接口：行为和动作的规范，对批量方法进行约束
1
2
3
4
5
6
7
8
9
|
interface FullName {
firstName: string;
secondName: string;
}
function printName(name: FullName) {
}
|
可选属性接口
1
2
3
4
5
6
7
8
| interface FullName {
firstName: string;
secondName: string;
age?: number;
}
function printName(name: FullName) {
}
|
函数类型接口
加密的函数类型接口
1
2
3
4
5
6
7
8
9
| interface encrypt {
(key: string, value: string): string;
}
var md5:encrypt = function(key: string, value: string): string {
return key + value;
}
md5("name", "zhangsan");
|
可索引接口
对数组的约束
1
2
3
4
5
| interface UserArray {
[index: number]: string
}
var arr: UserArray = ["111", "222"]
|
对对象的约束
1
2
3
4
5
| interface UserObj {
[index: string]: string
}
var arr: UserObj = {name: "20"}
|
对类的约束
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| interface Animal {
name: string;
eat(str: string): void;
}
class Dog implements Animal{
name: string;
constructor(name: string){
this.name = name;
}
eat() {
console.log("");
}
}
var dog = new Dog("小黑")
dog.eat();
class Cat implements Animal{
name: string;
constructor(name: string){
this.name = name;
}
eat(food: string) {
console.log("");
}
}
var cat = new Cat("小花")
cat.eat("猫粮");
|
接口的继承与拓展
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| interface Animal {
eat(): void;
}
interface Person extends Animal {
work(): void;
}
class Programmer {
public name: string;
constructor(name: string) {
this.name = name;
}
coding(code: string) {
console.log(this.name);
}
}
class Web extends Programmer implements Person {
public name: string;
constructor(name: string) {
super(name);
}
eat() {
console.log(this.name);
}
work() {
console.log("work");
}
}
|
泛型
接受string类型的参数，并且返回string类型
1
2
3
| function getData(value: string): string{
return value;
}
|
但是要同时返回时string和number，就造成了代码冗余
使用any类型解决
1
2
3
| function getData(value: any): any{
return value;
}
|
但是any放弃了类型检查，会丢失掉参数类型。实际的需求时，传入什么类型的数据，就要返回什么类型的数据。
泛型：可以支持不确定的数据类型，要求：传入的参数和返回的类型一致
1
2
3
4
5
6
| function getData<T>(value: T): T{
return value;
}
getData<number>(123);
getData<string>(123);
|
T表示泛型，具体什么类型是调用这个方法的时候决定的
你可以随意调用泛型参数，当你使用简单的泛型时，泛型常用 T、U、V 表示。如果在你的参数里，不止拥有一个泛型，你应该使用一个更语义化名称，如 TKey 和 TValue （通常情况下，以 T 做为泛型前缀也在如 C++ 的其他语言里做为模版。）
泛型类
返回数组中最小的值，同时支持number类型以及string类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| class MinClass<T> {
public list: T[] = [];
add(value: T): void {
this.list.push(value);
}
min(): T {
var minNum = this.list[0];
for (var i = 0; i < this.list.length; i++) {
if(minNum > this.list[i]) {
minNum = this.list[i];
}
}
return minNum;
}
}
var m = new MinClass<number>();
m.add(2);
m.add(22);
m.add(13);
console.log(m.min());
|
泛型接口
第一种
1
2
3
4
5
6
7
8
9
| interface Config{
<T>(value: T): T;
}
var getData: Config = function<T>(value: T):T{
return value;
}
getData<string>("张三");
|
第二种
1
2
3
4
5
6
7
8
9
10
| interface Config<T>{
(value: T): T
}
function getData<T>(value: T):T{
return value;
}
var myGetData: Config<sting> = getData;
myGetData('20')
|
类当作参数验证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| class MysqlDb<T> {
add(info:T): boolean{
console.log(info);
return true;
}
}
class ArticleCate {
title: string | undefined;
desc: string | undefined;
status: number | undefined;
constructor(params: {
title: string | undefined,
desc: string | undefined,
status: number | undefined
}) {
this.title = params.title;
this.desc = params.desc;
this.status = params.status;
}
}
var a = new ArticleCate({
title: "genli",
desc: "111",
status: 1,
})
var Db = new MysqlDb<ArticleCate>();
Db.add(a);
|
参考资料