Typrscript基本应用

Typrscript

一、基本数据类型

1. string 字符串

// 变量只能为字符串
const str: string = "你好";

2. number 数值

// 变量只能为数值
const num: number = 10;

3. boolean 布尔值

// 变量只能为布尔值
const bool: boolean = true;

4. array 数组

// 元素全是数字的数组
const arr1: number[] = [1, 2, 3, 4];

5. tuple 元组

• 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义值类型分别为 string,number, boolean 类型的元组。

• 元组类型中的类型要与数组中的元素，数量和位置要一一对应对应

// 定义值类型分别为 string,number, boolean类型的数组
const arr5: [string, number, boolean] = ["a", 10, true];

6. enum 枚举

6.1 数字枚举

• 使用 enum 关键字定义一个枚举值
• 通过 Enum[‘key’] 或者 Enum.key 的形式获取到对应的值 value
• 默认索引值从 0 依次递增
• 可以指定索引值，后续索引值从该索引值递增
• 索引值可以使用使用计算值和常量(常量的值只能为字符串，否则报错)，但该字段后的第一个字段必须设置初始值

// 使用enum关键字定义一个枚举值
enum A {
    first,
    second,
    third,
}
// 0 1 2
console.log(A.first, A.second, A.third);
// 0 1 2
console.log(A["first"], A["second"], A["third"]);

// 修改起始编号
enum B {
    first = 2,
    second,
    third,
}
// 2 3 4
console.log(B.first, B.second, B.third);

// 指定任意字段的索引值
enum C {
    first = 10,
    second = 23,
    third = 44,
}
// 10 23 44
console.log(C.first, C.second, C.third);

// 指定部分字段，其他使用默认递增索引
enum D {
    first = 10,
    second,
    third,
    fourth = 44,
    fifth,
}
// 10 11 12 44 45
console.log(D.first, D.second, D.third, D.fourth, D.fifth);

// 索引值使用计算值和常量(常量的值只能为字符串，否则报错)
const getValue = () => {
    return 0;
};
enum E {
    first = getValue(), // 索引值使用计算值
    second = 2, // 该枚举成员必须具有初始化的值，否则ts报错
    third,
}
// 0 2 3
console.log(E.first, E.second, E.third);

const Start = 1;
enum F {
    first = Start, // 索引值使用常量
    second = 2, // 该枚举成员必须具有初始化的值，否则ts报错
    third,
}
// 1 2 3
console.log(F.first, F.second, F.third);

6.2 字符串枚举

• 字符串枚举值要求每个字段的值都必须是字符串字面量，或者是该枚举值中另一个字符串枚举成员

enum A {
    first = "你好",
    second = first,
}
// '你好'
console.log(A.first);
// '你好'
console.log(A.second);

6.3 反向映射

• 通过 Enum[‘value’] 的形式获取到对应的值 key
• 只支持数字枚举

enum A {
    first = 33,
    second = "ABC",
    third = 48,
}
// undefined (ts报错，js输出 undefined )
console.log(A["ABC"]);
// 'first'
console.log(A[33]);
// 'third'
console.log(A[A["third"]]);

6.4 异构枚举

• 枚举值中成员值既有数字类型又有字符串类型

enum A {
    first = 33,
    second = "ABC",
}
// 33 'ABC'
console.log(A.first, A.second);

6.5 枚举成员类型与联合枚举类型

• 可以把符合条件的枚举值的成员作为类型来使用
• 当我们的枚举值符合条件时，这个枚举值就可以看做是一个包含所有成员的联合类型

/**
 *  1. 枚举成员类型
 *  把符合条件的枚举值的成员作为类型来使用
 *
 *  2. 联合枚举类型
 *  当枚举值符合条件时，这个枚举值可以看做是一个包含所有成员的联合类型
 */
enum Ta {
    a1,
    a2,
}
interface Tb {
    b: Ta.a1; // 这里使用 Ta.a1 作为类型，指定接口 Tb 的必须有一个 b 字段，且类型为 Ta.a1
}
enum Tc {
    c,
}
const light1: Tb = {
    b: Tc.c, // 报错，不能将类型“Tc.c1”分配给类型“Ta”
};
const light2: Tb = {
    b: Ta.a1,
};

7. unknown 未知类型

• 表示未知的类型，可以被赋值任意类型
• unknown 类型的变量只能赋值给 any 或 unknown 的变量

let uk1: unknown = "zxc";
let uk2: unknown = "qwe";
let any: any = "abc";
let num: number = 12;

// unknown 类型可以被赋值任意类型
uk1 = uk2;
uk1 = any;
uk1 = num;

// unknown 类型的变量只能赋值给 any 或 unknown 的变量
uk2 = uk1; // unknown 类型可以赋值给 unknown 类型
any = uk1; // unknown 类型可以赋值给 any 类型
num = uk1; // ts报错，不能将类型“unknown”分配给类型“number”

8. any 任意类型

• 当变量的类型为 any 类型时，类型检查器会跳过该变量的类型检查
• 尽量少用 any 类型，如果不确定具体的类型，尽量使用 unknown 代替，在使用时用类型断言或类型守卫进行类型收缩

let a: any;
a = 4; // 数值类型，不报错
a = "你好"; // 字符串类型，不报错
a = true; // 布尔类型，不报错

9. void 函数无返回值的类型

• 常用在表示函数没有返回值，即没有 return 语句
• 用在变量中，该变量只能赋值为 undefined

function fn1(): void {
    console.log(11111); // 函数中不能有 return 语句
}

function fn2(): void {
    return "sdaas"; // ts报错，不能将类型“string”分配给类型“void”
}

let a: void = undefined;
a = 123; // ts报错，不能将类型“number”分配给类型“void”

10. Null 、 Undefined

• 在 TypeScript 中，undefined 的类型为 undefined
• 在 TypeScript 中，null 的类型为 null

// 声明一个值为 undefined 的变量
const u: undefined = undefined;

// 声明一个值为 null 的变量
const n: null = null;

11. never

• 表示的是那些永不存在的值的类型
• never 类型是任何类型的子类型，也可以赋值给任何类型
• 任何类型（除了 never 类型之外）都无法赋值给 never 类型
• 应用场景：
  (1) 那些总是会抛出异常的函数表达式，
  (2) 没有返回值的函数表达式
  (3) 箭头函数表达式的返回值类型
  (4) 变量也可能是 never 类型，当它们被永不为真的类型保护所约束时

let uk: unknown = "zxc";
let any: any = "abc";
let num: number = 12;
let ne1: never = (() => {
    throw new Error("exception");
})();

let ne2: never = (() => {
    throw new Error("dsad");
})();

// never 类型可以赋值给任意类型
num = ne1;
any = ne1;
uk = ne1;

// 任何类型（除了 never 类型之外）都无法赋值给 never 类型
ne1 = num; // ts报错，不能将类型“number”分配给类型“never”
ne1 = ne2;

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无限循环这种无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

二、数组

• 使用数组类型声明 (只能用在单一类型组成的数组中)
• 使用元组类型声明 (元组中的类型要与数组中的同类型数据一一对应)
• 使用泛型声明 (只要数组中存在泛型中的类型即可)

/**
 *  1. 数组中元素全部为同一类型的数据
 */

// 使用数组类型声明
const arr1: number[] = [1, 2, 3, 4];
// 使用元组类型声明(不建议)
const arr2: [number, number, number, number] = [1, 2, 3, 4];
// 使用泛型声明
const arr3: Array<number> = [1, 2, 3, 4];

/**
 *  2. 数组中元素为不同类型的数据
 */

// 使用元组类型声明
const arr4: [string, number, boolean] = ["a", 10, true];
// 使用泛型声明
const arr5: Array<number | string | boolean> = ["a", 10, true];

三、对象

• 使用接口定义对象的类型

interface Obj {
    name: string;
    age: number;
}
const inf: Obj = {
    name: "张三",
    age: 18,
};

四、函数表达式

• 使用函数类型
• 使用接口类型，接口类型中定义的 void 无效

const a: string = "你好";
const b: number = 1;

// 使用函数类型声明，有返回值
const c = (a: string, b: number): string => {
    return a + b;
};
c(a, b);

// 使用函数类型声明，无返回值
const d = (a: string, b: number): void => {
    console.log(a, b);
};
d(a, b);

// 使用接口类型声明,返回值为 void 无效
interface Fn {
    (a: string, b: number): string;
}

const e: Fn = (a, b) => {
    return a + b;
};
d(a, b);

五、接口类型

• 使用场景
  (1) 声明对象类的类型
  (2) 声明函数表达式的类型

// 声明对象的类型
interface obj {
    name: string;
    age: number;
}
const user: obj = {
    name: "张三",
    age: 20,
};

// 声明哈数表达式的类型
interface fn {
    (a: string, b: number): string;
}
const fn: fn = (a, b) => {
    return a + b;
};
fn(user.name, user.age);

六、泛型

• 简单理解
  泛型会定义一个或多个接收类型参数的变量，等使用该变量时，在传入需要的类型
• 使用场景
  (1) 声明数组的类型 (只能声明单一类型的数组)
  (2) 声明对象类的类型
  (3) 声明函数表达式的类型

// 声明数组的类型
const arr: Array<number> = [1, 2, 3];

// 用于接口类型
interface obj<K, V> {
    name: K;
    age: V;
}
const obj: obj<String, Number> = {
    name: "123",
    age: 123,
};

// 声明函数表达式的类型
function fn<k, v>(name: k, age: v): [k, v] {
    return [name, age];
}

const fun = <k, v>(name: k, age: v): [k, v] => {
    return [name, age];
};

七、多种类型共存

• 使用 | 符号，只要数据满足其中一种类型即可

// 声明多种元素类型的数组
const arr: (string | number)[] = ["a", 2, 3];

// 声明函数表达式的类型
const fn = (name: number | string, age: number): [number | string, number] => {
    return [name, age];
};
fn(12, 34);
fn("张三", 34);

// 接口类型
interface obj {
    name: number | string;
    age: number | string;
}
let obj: obj = {
    name: "张三",
    age: 123,
};
obj = {
    name: "张三",
    age: "123",
};