正文

新手必看：轻松识别 TypeScript 中的常见类型与技巧揭秘

/0 浏览量
1023

TypeScript 作为 JavaScript 的超集，为 JavaScript 提供了静态类型检查，这使得代码更加健壮，易于维护。对于新手来说，了解 TypeScript 中的常见类型和技巧至关重要。本文将带你轻松入门 TypeScript，揭秘其中的常见类型和实用技巧。

一、TypeScript 基础类型

TypeScript 提供了丰富的基础类型，以下是一些常用的类型：

1. 布尔类型（boolean）

布尔类型用于表示真或假，通常用于条件判断。

let isDone: boolean = false;

2. 数字类型（number）

数字类型用于表示数值，包括整数和浮点数。

let count: number = 10;

3. 字符串类型（string）

字符串类型用于表示文本。

let name: string = '张三';

4. 字符类型（char）

字符类型用于表示单个字符。

let age: char = '1';

5. 任意类型（any）

任意类型可以表示任何类型。

let notSure: any = 4;
notSure = 'maybe a string instead';

6. 数组类型（array）

数组类型表示一系列元素，可以使用类型注解指定元素类型。

let list: number[] = [1, 2, 3];

7. 元组类型（tuple）

元组类型表示一组已知数量和类型的元素。

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

8. 枚举类型（enum）

枚举类型用于定义一组命名的常数。

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

9. void 类型

void 类型表示没有任何返回值。

function sayHello(): void {
    console.log('Hello World');
}

10. null 和 undefined 类型

null 和 undefined 类型表示未知或空值。

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

二、TypeScript 高级类型

1. 类型别名（type alias）

类型别名用于创建一个新的类型别名。

type User = {name: string, age: number};
let tom: User = {name: 'Tom', age: 25};

2. 联合类型（union type）

联合类型表示可能具有多个类型的变量。

let age: string | number = 25;
age = '25'; // 正确
age = 25; // 正确

3. 接口（interface）

接口用于定义对象的形状。

interface User {
    name: string;
    age: number;
}
let tom: User = {name: 'Tom', age: 25};

4. 类（class）

类用于定义对象的类型和行为。

class User {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}
let tom: User = new User('Tom', 25);

5. 类型守卫（type guard）

类型守卫用于确保变量的类型。

function isString(value: any): value is string {
    return typeof value === 'string';
}

let value: any = 'Hello World';
if (isString(value)) {
    console.log(value.toUpperCase()); // 正确
} else {
    console.log(value); // 错误
}

三、TypeScript 实用技巧

1. 类型推导

TypeScript 可以自动推导变量类型，提高代码可读性。

let age = 25; // age 的类型为 number

2. 泛型

泛型用于创建可复用的、类型安全的组件。

function identity<T>(arg: T): T {
    return arg;
}
let output = identity<string>('hello'); // output 的类型为 string

3. 高级类型操作

TypeScript 提供了多种高级类型操作，如键选类型、索引访问类型等。

let person = {name: 'Tom', age: 25};
let nameLength: number = (person as any).name.length; // 错误
let nameLength: number = person['name'].length; // 正确

通过学习 TypeScript 中的常见类型和技巧，你可以更好地掌握 TypeScript，提高代码质量和开发效率。希望本文能对你有所帮助！

-- 展开阅读全文 --