文章目录
- 一、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]
- 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
上的方法。
三、相关链接
- TypeScript中文网
- TypeScript下载
- TypeScript文档
- TypeScript系列」TypeScript简介及基础语法