一、基础类型

基础类型：boolean、string、number、Array、元组、enum、Any、Void、Null、Undefined、Never、Object

let isTrue: boolean = true // boolean
let index: number = 4 // number
let name: string = "罗一汎" // string
let list: number[] = [1] // 数组
let x: [string, number] = ["index", 1] // 元组
enum Color { Red, Green, Blue } // 枚举
let notSure: any = 4 // any

二、接口

1. 接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
2. 接口属性：可选属性、只读属性、额外属性、可索引类型、类类型、继承接口、混合类型、接口继承类

1.可选属性

// witdh可选属性
interface InButtonProps {
  color: string;
  width?: number;
}

2. 只读属性

// 定义y为只读属性
interface InButtonProps {
  color: string;
  readonly y: number;
}

3. 额外属性

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}

4. 可索引类型

interface InteIndexType {
  [index: number]: string;
}
let indexArray: InteIndexType = ["1", "2"]

5. 类类型-实现接口

主要用于定义类的属性、方法。

interface InClass {
  name: string;
  age: number;
  say(name: "string"): string;
}
class Animall implements InClass {
  constructor(age: number) {
    this.age = age
  }
  age: number;
  name = "haha";
  say(name: string) {
    return name
  }
}

6.继承接口

interface Shape {
    color: string;
}
interface PenStroke {
    penWidth: number;
}
interface Square extends Shape, PenStroke {
    sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

7.混合类型

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}
function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

接口总结

1. 常用的接口：可选属性、只读属性、额外属性、类实现接口;
2. 定义一个函数属性接口：say(name: "string"): string;
3. 接口继承接口：当设计存在接口共用时，可考虑使用。