接口

  1. interface LabelledValue {
  2.   label: string
  3. }
  4. function printLabel(labelledObj: LabelledValue) {
  5.   console.log(labelledObj.label);
  6. }
  7. let myObj = { size: 11, label: "Size 11 Object" }
  8. printLabel(myObj)

可选属性 ？

只读属性 readonly readonlyArray

使用：

  • readonly const
  • 变量用const 属性用readonly
    1. interface SquareConfig {
    2. color?: string;
    3. width?: number;
    4. readonly x?: number
    5. }
    6. function createSquare(config: SquareConfig): { color: string; area: number } {
    7. let newSquare = { color: "white", area: 100 };
    8. // if (config.colo) { //属性“colo”在类型“SquareConfig”上不存在。你是否指的是“color”
    9. if (config.color) {
    10.   newSquare.color = config.color;
    11. }
    12. if (config.width) {
    13.   newSquare.area = config.width * config.width;
    14. }
    15. return newSquare;
    16. }
    17. let mySquare = createSquare({ color: "black" });
    18. console.log(mySquare);
    19. let obj: SquareConfig = { color: 'red', width: 12, x: 100 }
    20. console.log(obj);
    21. // obj.x = 6 //无法赋值 因为是只读属性
    22. let arr: number[] = [1, 2, 3, 4]
    23. let cArr: ReadonlyArray<number> = arr
    24. // cArr[0] = 2 //error
    25. // cArr.length = 100 //error
    26. console.log(cArr[0]); //1
    27. // arr = cArr //error
    28. arr = cArr as number[] //可以用 类型断言重写

    额外的属性检查

    ```typescript interface SquareConfig { color?: string area?: number

} function createSquare(config: SquareConfig): { color: string; area: number } { // … let myObj = { area: 11, color: “Size 11 Object” } return myObj } let mySquare = createSquare({ colour: “red”, width: 100 });

  1. <a name="drGt6"></a>
  2. ### 函数类型
  4. -  为了使用接口表示函数类型，我们需要给接口定义一个调用签名。
  5. -  它就像是一个只有参数列表和返回值类型的函数定义。
  6. -  参数列表里的每个参数都需要名字和类型。
  7. ```typescript
  8. interface SearchFunc {
  9.   (source: string, subString: string): boolean;
  10. }
  11. // let mySearch:SearchFunc
  12. // mySearch = function (source:string,subString:string) {
  13. //   let res = source.search(subString)
  14. //   return res > -1
  15. // }
  16. let mySearch: SearchFunc;
  17. mySearch = function (src, sub) {
  18.   let result = src.search(sub);
  19.   return result > -1;
  20. }

可索引的类型

  • 上面例子里，我们定义了StringArray接口，它具有索引签名。
  • 这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值 ```typescript interface StringArray {

} let myArray: StringArray myArray = [‘1’, ‘2’] let str: string = myArray[0] // ‘1’ interface ReadonlyStringArray { readonly [index: string]: number; length: number; // 可以，length是number类型 name: string // 错误，name的类型与索引类型返回值的类型不匹配 } let myArray: ReadonlyStringArray = [“Alice”, “Bob”]; myArray[2] = “Mallory”; // error! ```