ts实战系列四：复合类型

2. any类型和联合类型:

any表示这个值可以是任何值,意味着不做任何类型检查,尽量避免使用any.

let a: any = 4
let a: number | string = `12`

let looselyTyped: any = 4;
// 由于声明为any,无法在静态检查阶段发现这个错误,looselyTyped的值是4,没有ifItExists方法.
looselyTyped.ifItExists();

---

3. void:

一般用在表示函数不返回任何值或者返回undefined,因为函数不返回任何值的时候 === 返回undefined.

export const useMount = (fn: () => void) => {
  useEffect(() => {
    fn();
  }, []);
};

---

3. Array:

在TS中,array一般指所有元素类型相同的值的集合.

①. let a: number[] = [1, 2, 3, 4]

②. let list: Array<number> = [1, 2, 3];

③. interface User {
        name: string
    }
    const john = {name: 'john'}
    const jack = {name: 'jack'}
    let personList = [john, jack] // 这里 john 和 jack 都是 User 类型的

(1). arguments是类数组对象,有length、下标[0],但是没有方法.

function test() {
  console.log(arguments)
  let arr: any[] = arguments;    // 报错
}

注:
①. 类数组对象和数组都是对象生的,区别在于数组比类数组对象多了很多方法.
②. ts帮它们都定义的接口,如:
    IArguments、类似还有HtmlCollection、NodeList.

---

4. 元组Tuple:

①. 特点:
    a. 混合类型的"数组"
    b. tuple是"数量固定,类型可以各异"版的数组

②. let user: [strinng, number] = ['david', 12];

③. const [users, setUsers] = useState([])

④. custom hook的优雅:
    const useHappy = () => {
        // ....
        // obj返回:
        // return {isHappy, makeHappy, makeUnHappy}
        return [isHappy, makeHappy, makeUnHappy]
    }
    const SomeComponent = () => {
        // 如何接收obj返回:
        // const {isHappy: tomIsHappy, makeHappy: makeTomHappy, makeUnHappy: makeTomUnHappy} = useHappy(false)
        const [tomIsHappy, makeTomHappy, makeTomUnHappy] = useHappy(false)
        // ...
    }
    a. 在React中,可能使用tuple作为custom hook的返回值,直接使用结构赋值.
    b. 如果用obj返回也能达到效果,但是需要将isHappy重命名为tomIsHappy.
    c. 使用tuple的好处,便于使用者重命名.