最基础的TypeScript学习笔记

在使用一段时间 TS 后, 对所学所想做一个记录. 文章内容较为基础, 适合作为入门级教程学习; 且涵盖内容并不全面, 缺失包含类在内的诸多内容.

基础类型

Boolean - 布尔

let flag: boolean = false;

Number - 数字

let num: number = 10; 扩展: number类型还支持 二进制(0b开头)、 八进制(0o开头)、 十六进制(0x开头) 字面量. 运算或输出时会转换为对应的十进制.

String - 字符串

let str: string = 'shhrain';

Array - 数组

let numArr: number[] = [1, 2, 3];
  let numArr: Array<number> = [1, 2, 3];
  //数组共有两种定义方式: Array<T> 或 T[] (T为该数组每项的元素类型)

Array - 元组

👺 特点: <数组>, <长度已知>, <每项元素类型不尽相同>

😼 就是一个给每项都定义数据类型的数组

let tuple: [string, string, number, boolean?] = ['No.1', 'shhrain', 18];

🦥 应用:

• React Hook 的 useState

  import { useState } from 'react';
    const [loading, setLoading] = useState<boolean>(false); // 这里类型可省略, 详见后文类型推断
  

• csv 数据格式

  type Touple = [string, number, string];
    let csvData: Touple[] = [['小五', 18, '男'], ['狗子', 14, '男']];
  

  👺 扩展: 元组越界

  let tuple: [number, string] = [1, 'shhrain'];
    tuple.push(2); // ✅ right 元组越界时, 该项类型相当于对元组的各项类型做联合
  
    /* 过程如下, 看不懂的看官莫慌, 请先看后文 */
    type UnionType<T> = T extends (infer P)[] ? P : never;
    type TupleType = UnionType<typeof tuple>; // number | string
  

Enum - 枚举

``` js 
    enum Active {
        inactive,
        active,
    }


    enum Fruit {
    apple = 'apple',
    orange = 'orange',
    banana = 'banana',
    }
```
若枚举类型未指定值或指定的值为number类型, 如上述 Active, 可对其进行双向取值: