接口
定义方法中参数的约束
function printLabel(label: string): void {
console.log("")
}
printLabel("sss");
自定义方法传入参数对json的约束
function printLabel(labelInfo: { label: string }): void {
console.log("")
}
printLabel({ label: "ssss" });
接口：行为和动作的规范，对批量方法进行约束
// 定义接口
interface FullName {
firstName: string;
secondName: string;
}
// 实现接口
function printName(name: FullName) {
// 必须传入对象包含关键字
}
可选属性接口
interface FullName {
firstName: string;
secondName: string;
age?: number; // 可选属性
}
function printName(name: FullName) {
// 必须传入对象包含关键字
}
函数类型接口
加密的函数类型接口
interface encrypt {
(key: string, value: string): string;
}
var md5:encrypt = function(key: string, value: string): string {
return key + value;
}
md5("name", "zhangsan");
可索引接口
对数组的约束
interface UserArray {
[index: number]: string
}
var arr: UserArray = ["111", "222"]
对对象的约束
interface UserObj {
[index: string]: string
}
var arr: UserObj = {name: "20"}
对类的约束
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("猫粮");
接口的继承与拓展
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);
}
}
// Web类继承Programmer类并且实现Person接口
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类型
function getData(value: string): string{
return value;
}
但是要同时返回时string和number，就造成了代码冗余
使用any类型解决
function getData(value: any): any{
return value;
}
但是any放弃了类型检查，会丢失掉参数类型。实际的需求时，传入什么类型的数据，就要返回什么类型的数据。
泛型：可以支持不确定的数据类型，要求：传入的参数和返回的类型一致
function getData(value: T): T{
return value;
}
getData(123);
getData(123); // error
T表示泛型，具体什么类型是调用这个方法的时候决定的你可以随意调用泛型参数，当你使用简单的泛型时，泛型常用
T、U、V表示。如果在你的参数里，不止拥有一个泛型，你应该使用一个更语义化名称，如TKey和TValue（通常情况下，以T做为泛型前缀也在如 C++ 的其他语言里做为模版。）
泛型类
返回数组中最小的值，同时支持number类型以及string类型
class MinClass {
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(); // 实例化并且指定泛型T
m.add(2);
m.add(22);
m.add(13);
console.log(m.min());
泛型接口
第一种
interface Config{
(value: T): T;
}
var getData: Config = function(value: T):T{
return value;
}
getData("张三");
第二种
interface Config{
(value: T): T
}
function getData(value: T):T{
return value;
}
var myGetData: Config = getData;
myGetData('20')
类当作参数验证
class MysqlDb {
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();
Db.add(a);
参考资料
- 6小时快速上手typescript