- 接口的作用:在面向对象编程中,接口是一种规范的定义,他定义了行为和动作的规范,在程序设计里面,接口起到了一种
限制
和规范
的作用。 接口的语法
:示例:
// 定义了一个很普通的接口
interface Iinter{
}
定义一个对象
```javascript 示例:
interface Obj { name: string, age: number }
const obj: Obj = { name: ‘胡图图’, age: 18 }
console.log(obj); ```
定义一个数组对象
```javascript 示例:
interface Item{ text: number } const arr: Array
- = [{ text: 1 },{ text: 2 },{ text: 3 }];
console.log(arr); ```
任意属性
(一旦我们定义了任意属性,确定属性和可选属性的类型必须是任意属性类型的子集。)(当不确定变量其他属性,又想绕过 TypeScript 的检测时,我们可以使用任意属性。) ```javascript 示例:
// 数组对象 interface Item{ text: string, // 可选属性 num: number, // 必须使用 [] 来定义任意属性 // 一旦我们定义了任意属性,确定属性和可选属性的
类型必须是任意属性类型的子集。
// 额外属性检查
[propsText: string]: any
}
const arr: Array
console.log(arr);
-
4. 只读属性
```javascript
示例:
// 数组对象
interface Item{
readonly text: string,
// 可选属性
num: number,
// 必须使用 [] 来定义任意属性
// 一旦我们定义了任意属性,确定属性和可选属性的`类型必须是任意属性类型的子集。`
[propsText: string]: any
}
const arr: Array<Item> = [{ text: '1', num: 1, obj: { a: 1 } },{ text: '2',num: 2 },{ text: '3', num: 3 }];
arr[0].text = '123'; // 报错
console.log(arr);
- 可索引属性(可索引类型具有一个 索引签名,它描述了对象索引的类型,还有相应的索引返回值类型。) ```javascript 示例:
// 可索引类型-数组 interface Item{
[index: number]: string
}
const arr:Item = [‘胡图图’, ‘我心疼’, ‘自治区’];
console.log(arr[0]);
// 可索引类型-对象 interface Obj{
[index: string]: any
}
const obj:Obj = { name: ‘刘建行’, age: 18 };
console.log(obj.name);
-
6. `函数类型`
```javascript
示例:
// 函数接口
interface FnItem{
(msg: string): void
}
// 一种是无名函数
const fn:FnItem = function(msg) {
console.log(msg);
}
fn('123');
类接口
```javascript 示例:
// 类接口 - 定义的是当前类上的属性 interface PClass{ name: string, age: number, // say == 146 定义的函数 say(msg: string): void, }
class Person implements PClass{ name = ‘胡图图’; age = 18;
say(msg: string) { console.log(msg); } }
// 类接口 - 定义的是当前类上的属性 interface PClass{ name: string, age: number, // say == 146 定义的函数 say(msg: string): void, }
class Person implements PClass{ name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; }
say(msg: string) {
console.log(msg);
}
}
-
8. `继承接口`
```javascript
示例:
// 类接口 - 定义的是当前类上的属性
interface PClass{
name: string,
age: number,
// say == 146 定义的函数
say(msg: string): void,
}
// 接口继承
interface PEat extends PClass{
// name: string,
// age: number,
// // say == 146 定义的函数
// say(msg: string): void,
eat(msg: string): void,
}
class Person implements PEat{
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
say(msg: string) {
console.log(msg);
}
eat(msg: string) {
console.log(msg);
}
}
<!-- ------ -->
//接口继承
interface GrandFather{
name: string
}
interface Father{
age: number
}
// 接口即成 extends
// 继承一个 interface Son extends Father{
// 继承多个 interface Son extends Father,GrandFather (以 , 进行分割)
interface Son extends Father,GrandFather{
money: number
}
class GrandSon implements Son{
name: string;
money: number;
age: number;
constructor(name: string, money: number, age: number) {
this.name = name;
this.money = money;
this.age = age;
}
}
const g = new GrandSon('胡图图', 100, 18);
console.log(g);
泛型
- 泛型是指在定义函数、接口或类的时候,不预先预定具体的类型,
而在使用的时候在指定类型的一种特性
。 - 泛型函数 ```javascript 示例:
//
就是用来定义泛型 T -》 可以是 26 个英文字母中随意, 他就好比说是一个形参 // 这里,我们使用了 类型变量,它是一种特殊的变量,只用于表示类型而不是值。 function fn1 (msg: T): T { return msg; } console.log(fn1(‘胡图图’)); ``` - 泛型的多个类型参数 ```javascript 示例:
// 元组 function fn2
(arr: [ T, L ]): [ T, L ] { return [arr[0], arr[1]]; } console.log(fn2([123, ‘胡图图’])) // [123, ‘胡图图’]
// 元组 function fn2
(arr: [ T, L ]): [ L, T ] { return [arr[1], arr[0]]; } // console.log(fn2([123, ‘胡图图’])) // [123, ‘胡图图’] console.log(fn2([123, ‘胡图图’])) // [‘胡图图’, 123] ```
泛型变量
(泛型变量 T 当作类型的一部分使用,而不是整个类型); ```javascript 示例:
// 2. number[] // 2. Array
function fn3 (arr: Array ): Array { // T 现在代表谁? 1,2,3,4 console.log(arr.length); return arr; } console.log(fn3([1,2,3,4])) ``` - 泛型接口 ```javascript 示例:
// 定义泛型接口 interface Tinter
{ name: T } const obj: Tinter
= { name: ‘胡图图’ } console.log(obj); ```
- 泛型类 ```javascript 示例:
// 定义泛型类 class Person1
{ name: T constructor(name: T) { this.name = name; } } // 使用泛型类 const p1 = new Person1
(‘1810A’); console.log(p1); ``` - 泛型约束 ```javascript 示例:
// 泛型约束 (
) class Constraint { public arr: Array = []; // 想数组中添加 add(msg: T): void { this.arr.push(msg); console.log(this.arr); } // 在数组中删除 delete(): void { this.arr.pop(); console.log(this.arr); } } // 调用泛型类 const c = new Constraint
(); c.add(1); c.add(‘2’); // c.add(true); // 不能添加,因为不允许添加 boolean c.delete(); ``` - 增删改查的泛型接口(泛型类和泛型接口) ```javascript 示例:
// 接口和类进行相结合使用 interface TClassItem
{ add(msg: T): T; pop(msg: T): boolean; Update(msg: T,i: number): T; Search(msg: T, id: string): T; } class TArr
implements TClassItem { arr: any[] = []; add(msg: T) { this.arr.push(msg); console.log(this.arr); return msg; } pop() { this.arr.pop(); return true; } Update(msg: T, i: number) { return msg; } Search(msg: T, id: string) { return msg; } } const a = new TArr
(); a.add(‘123’); ```