文章目录

  • 一、TypeScript 基础类型
  • 1. **Number**: 用于表示数字。可以是整数或浮点数。
  • 2. **String**: 用于表示文本类型的数据。
  • 3. **Boolean**: 表示逻辑值：`true` 或 `false`。
  • 4. **Array**: 表示一组值。TypeScript 使用泛型（generics）来定义数组的类型。
  • 5. **Tuple**: 类似于数组，但每个元素的类型都是固定的。
  • 6. **Enum**: 枚举类型，允许我们为一组数值赋予友好的名字。
  • 7. **Any**: 当你不确定一个变量是什么类型时，可以使用 `any` 类型。这相当于告诉 TypeScript 不要进行任何类型检查。
  • 8. **Void**: 表示没有任何类型或值的类型。通常用于表示不返回任何值的函数。
  • 9. **Null 和 Undefined**: 这两个类型在 TypeScript 中有它们自己的类型，但与 `void` 不同，它们是所有类型的子类型。
  • 10. **Never**: 表示的是那些永不存在的值的类型。例如，函数总是抛出异常或根本不会有返回值。
  • 11. **Object**: 用于非原始值（即“对象”或“类”实例）。
  • 12. **Symbol**: 表示唯一的值。
  • 二、TypeScript 支持那些ES6内置对象
  • 1. **Array**
  • 2. **String**
  • 3. **Set 和 Map**
  • 4. **Promise**
  • 5. **RegExp**
  • 三、相关链接


一、TypeScript 基础类型

TypeScript 是 JavaScript 的一个超集，它添加了静态类型系统和一些其他功能，使得代码更加健壮和可维护。在 TypeScript 中，有一些基础类型，这些类型与 JavaScript 中的基本数据类型相对应，但提供了更多的静态类型检查。以下是 TypeScript 的基础类型：

1. Number: 用于表示数字。可以是整数或浮点数。

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 12345678901234567890n; // TypeScript 3.2+ 支持 bigint

2. String: 用于表示文本类型的数据。

let color: string = "blue";
color = 'red';

3. Boolean: 表示逻辑值：true 或 false。

let isDone: boolean = false;

4. Array: 表示一组值。TypeScript 使用泛型（generics）来定义数组的类型。

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

5. Tuple: 类似于数组，但每个元素的类型都是固定的。

let x: [string, number] = ['hello', 10]; // 正确
// x = [10, 'hello']; // 错误

6. Enum: 枚举类型，允许我们为一组数值赋予友好的名字。

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

7. Any: 当你不确定一个变量是什么类型时，可以使用 any 类型。这相当于告诉 TypeScript 不要进行任何类型检查。

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

8. Void: 表示没有任何类型或值的类型。通常用于表示不返回任何值的函数。

function warnUser(): void {
    console.log("This is my warning message");
}

9. Null 和 Undefined: 这两个类型在 TypeScript 中有它们自己的类型，但与 void 不同，它们是所有类型的子类型。

let u: undefined = undefined;
let n: null = null;

10. Never: 表示的是那些永不存在的值的类型。例如，函数总是抛出异常或根本不会有返回值。

function error(message: string): never {
    throw new Error(message);
}

11. Object: 用于非原始值（即“对象”或“类”实例）。

let obj: object = {};

12. Symbol: 表示唯一的值。

let sym: symbol = Symbol();

二、TypeScript 支持那些ES6内置对象

TypeScript 支持 ES6（ECMAScript 2015）引入的所有内置对象，并且允许你使用这些对象以及它们的属性和方法。以下是一些 ES6 内置对象及其在 TypeScript 中的使用案例代码：

1. Array

ES6 为数组引入了一些新的方法，如 Array.from(), Array.of(), find(), findIndex(), includes(), 等等。

// 使用 Array.from() 将类数组对象转换为数组
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array: string[] = Array.from(arrayLike);

// 使用 Array.of() 创建一个新数组
const numbers = Array.of(1, 2, 3);

// 使用 find() 方法查找数组中的元素
const found = numbers.find(num => num === 2);

// 使用 includes() 方法检查数组是否包含某个元素
const hasOne = numbers.includes(1);

2. String

ES6 增强了字符串的功能，如模板字符串、startsWith(), endsWith(), repeat(), 等等。

// 使用模板字符串
const name = 'Alice';
const greeting = `Hello, ${name}!`;

// 使用 startsWith() 方法
const startsWithHello = greeting.startsWith('Hello');

// 使用 repeat() 方法
const repeated = 'x'.repeat(3); // 'xxx'

3. Set 和 Map

Set 和 Map 是 ES6 引入的两种新的数据结构。

// 使用 Set
const set = new Set<number>([1, 2, 2, 3, 4, 4, 5]);
// Set 会自动去重
const unique = [...set]; // [1, 2, 3, 4, 5]

// 使用 Map
const map = new Map<string, number>();
map.set('one', 1);
map.set('two', 2);
const value = map.get('one'); // 1

4. Promise

Promise 用于处理异步操作。

function fetchData(): Promise<string> {
    // 模拟异步数据获取
    return new Promise<string>((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched!');
        }, 1000);
    });
}

fetchData().then(data => {
    console.log(data); // 输出 "Data fetched!"
}).catch(error => {
    console.error('Error fetching data:', error);
});

5. RegExp

正则表达式在 ES6 中没有大的改动，但你可以在 TypeScript 中使用它们。

const regex = /hello/;
const match = 'hello world'.match(regex); // ['hello', index: 0, input: 'hello world', groups: undefined]
  1. Proxy 和 Reflect

这两个是 ES6 引入的元编程工具。

const target = {};
const handler = {
    get(target, propKey, receiver) {
        return `Getting ${propKey}!`;
    }
};

const proxy = new Proxy(target, handler);
console.log(proxy.example); // 输出 "Getting example!"

在上面的代码中，Proxy 用于创建一个对象的代理，拦截对目标对象的某些操作，而 Reflect 提供了一种方法来在运行时获取默认行为。虽然 Reflect 在此例中没有被直接使用，但它是 Proxy 的一个重要伴侣，因为许多 Proxy 处理器默认都会使用 Reflect 上的方法。