TypeScript 定义不同的类型（详细示例）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典【面试题+详细答案 1000+】

文章目录

- - [1. 基本类型](#1. 基本类型)
  - [2. 数组](#2. 数组)
  - [3. 元组 Tuple](#3. 元组 Tuple)
  - [4. 枚举 Enum](#4. 枚举 Enum)
  - [5. 对象类型](#5. 对象类型)
  - [6. 函数类型](#6. 函数类型)
  - [7. 类型别名 Type Alias](#7. 类型别名 Type Alias)
  - [8. 泛型 Generics](#8. 泛型 Generics)
  - [9. 类 Class](#9. 类 Class)
  - [10. 接口 Interface](#10. 接口 Interface)

TypeScript 是 JavaScript 的一个超集，它增加了静态类型系统和一些额外的特性来帮助开发者编写可维护、可扩展的应用程序。在 TypeScript 中，你可以使用类型注解来指定变量、函数参数或返回值的类型。

下面我将通过一系列示例来展示如何在 TypeScript 中定义不同的类型：

1. 基本类型

基本类型的定义包括 string、number 和 boolean 等。

typescript 复制代码

let myName: string = "Alice";
let age: number = 30;
let isStudent: boolean = false;

2. 数组

数组可以定义为包含特定类型元素的列表。

typescript 复制代码

let numbers: number[] = [1, 2, 3];
let fruits: string[] = ["apple", "banana"];
let truthValues: boolean[] = [true, false];

或者使用泛型数组形式：

typescript 复制代码

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

3. 元组 Tuple

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

typescript 复制代码

let x: [string, number];
x = ["hello", 10]; // OK
// x = [10, "hello"]; // Error

4. 枚举 Enum

枚举类型为一组相关的名称提供了一种方便的方式来定义一个数值常量集合。

typescript 复制代码

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

5. 对象类型

对象类型可以通过接口（interface）或者类型别名（type alias）来定义。

typescript 复制代码

interface Person {
    name: string;
    age?: number; // 可选属性
}

type Product = {
    id: number;
    title: string;
};

let person: Person = {name: "Alice"};
let product: Product = {id: 1, title: "Book"};

6. 函数类型

函数类型可以指定参数和返回值的类型。

typescript 复制代码

function greet(person: string): string {
    return "Hello " + person;
}

// 或者
const add = (a: number, b: number): number => {
    return a + b;
};

7. 类型别名 Type Alias

类型别名用于给一个类型起个新名字。

typescript 复制代码

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') return n;
    else return n();
}

8. 泛型 Generics

泛型允许创建重用性高的函数和类。

typescript 复制代码

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("myString");

9. 类 Class

类支持面向对象编程。

typescript 复制代码

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

let animal = new Animal("Cat");
console.log(animal.name); // 输出 "Cat"

10. 接口 Interface

接口描述了对象的形状。

typescript 复制代码

interface LabelledValue {
    label: string;
    value: number;
}

function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj); // OK

这些示例覆盖了 TypeScript 中常见的类型定义方法。你可以根据自己的需求选择合适的类型定义方式。