一.TypeScript中的Interface
Interface接口用来作为对共性的抽象描述。类型很重要,Interface在TypeScript中很重要的作用之一就是类型命名。
1.使用举例
-
定义接口
interface Person { firstName: number, lastName: string, kids: number }
-
指定实例
var p: Person = { firstName: "Jack", lastName: "Wang", kids: 1, age: 23 //这里会提示报错 }
2.定义可选属性
-
在属性后面添加
属性名 ?: 类型
表示此属性可有可无 -
实例
interface Person { firstName: number, lastName: string, kids?: number }
- 此时kids属性就是可选属性
3.定义只读属性
-
在属性前面添加
readonly
表示实例化属性值后不能再进行修改 -
实例
interface Person { firstName: number, lastName: string, readonly kids: number }
- 此时kids属性就是只读属性,必须初始化,初始化后不能进行修改
4.使用Interface定义函数类型
-
实例
//定义函数接口 interface AddFunction { (x:number, y:number):number;//入参是number类型的,返回值也是number类型的 } //使用函数 add: AddFunc = (x, y) => x + y;
-
使用interface定义函数类型可以规范函数的入参和返回值内容
5.使用Interface定义字典类型
-
实例
//定义字典接口 interface Dict { [key: string]: string; //字典的键是字符型,值也是字符型 } //使用字典接口 dict: Dict = { a: '1', b: '2' }
-
定义字典类型的接口主要用于规范对象中的索引与值,如上代码可以使用
this.dict.a
获得a索引的值
6.手机真机调试
- 真机调试方法
- 确保手机和电脑处于同一Wifi
- Mac使用
ifconfig
查看192开头的IP地址 ng serve --host 0.0.0.0
- 手机浏览器打开
http://<电脑IP>:4200
二.ngFor指令
1.变量的应用范围
- 在指定ngFor属性标签的内部使用循环的元素
2.索引的获取
- 通过
<li *ngFor="let menu of menus; let i=index">{ {i}}</li>
的方式获取index下标
3.获得第一个元素和最后一个元素
- 通过
<li *ngFor="let m