likes
comments
collection
share

一网打尽 TypeScript 数据类型:完整教程

作者站长头像
站长
· 阅读数 54

基本数据类型

数字(Number)

TypeScript 中的所有数字都是浮点数类型(number)。可以用十进制、十六进制、二进制和八进制表示数字。

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

字符串(String)

字符串类型用于表示文本数据。可以使用单引号或双引号,也可以使用模板字符串(反引号)来包含嵌入的表达式。

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

let fullName: string = `John Doe`;
let age: number = 30;
let sentence: string = `Hello, my name is ${fullName}. I'll be ${age + 1} years old next month.`;

布尔值(Boolean)

布尔类型表示 true 或 false。

let isDone: boolean = false;

空值类型(null 和 undefined)

TypeScript 里,nullundefined 有各自的类型分别叫做 nullundefined。默认情况下,这两种类型是所有类型的子类型,可以赋值给其他类型。

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

let name: string = null; // 在 --strictNullChecks 下会报错

复杂数据类型

数组(Array)

数组类型有两种定义方式:在元素类型后面加上 [],或使用泛型 Array<元素类型>

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

元组(Tuple)

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型可以不同。通过元组,我们可以定义一个固定长度的数组,其中每个元素都有指定的类型。

let x: [string, number];
x = ["hello", 10]; // OK
// x = [10, "hello"]; // Error: 不同类型顺序会报错

console.log(x[0].substring(1)); // "ello"
// console.log(x[1].substring(1)); // Error: number 没有 substring 方法

枚举(Enum)

枚举类型用于定义数值集合,可以为这些值提供有意义的名字。默认情况下,枚举从 0 开始为元素编号。

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

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green; // Green 的值为 2

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Blue; // Blue 的值为 4

Any

any 类型表示允许任何类型的值,适用于动态内容,例如来自用户输入或第三方库的数据。any 类型绕过了类型检查,尽量避免使用。

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // OK

Unknown

unknown 类型表示未知类型,比 any 更安全。必须进行类型检查后才能赋值给其他类型。

let notSure: unknown = 4;
notSure = "maybe a string instead";

if (typeof notSure === "string") {
    let sureString: string = notSure; // OK
}

函数类型

Void

void 类型表示没有任何类型,通常用于函数没有返回值的情况。

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

Never

never 类型表示的是那些永不存在的值的类型。例如,函数总是抛出错误或无限循环时,它的返回值类型就是 never

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

function infiniteLoop(): never {
    while (true) {}
}

对象类型

对象类型表示非原始类型的值。可以使用类型字面量定义对象的结构。

let user: { name: string; age: number } = { name: "John", age: 30 };

类型别名和接口

类型别名(Type Alias)

类型别名用 type 声明,可以表示基本类型、联合类型、元组等。

type Point = {
    x: number;
    y: number;
};

let point: Point = { x: 10, y: 20 };

接口(Interface)

接口用 interface 声明,主要用于定义对象结构。接口可以扩展和合并,使得代码更灵活。

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square: Square = { color: "blue", sideLength: 10 };

接口也可以用于定义函数类型和数组类型。

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) > -1;
}

高级类型

联合类型(Union Types)

联合类型允许一个变量可以是几种类型之一。使用 | 分隔每个类型。

let value: string | number;
value = "Hello"; // OK
value = 123; // OK
// value = true; // Error: 不能将 boolean 赋值给 string | number 类型

交叉类型(Intersection Types)

交叉类型将多个类型合并为一个类型。使用 & 分隔每个类型。

interface Person {
    name: string;
}

interface Employee {
    employeeId: number;
}

type Worker = Person & Employee;

let worker: Worker = { name: "John", employeeId: 12345 };

字面量类型(Literal Types)

字面量类型允许你指定一个变量的确切值。可以结合联合类型使用。

type Direction = "up" | "down" | "left" | "right";

function move(direction: Direction) {
    console.log(`Moving ${direction}`);
}

move("up"); // OK
// move("north"); // Error: "north" 不是 Direction 类型中的一个

泛型(Generics)

泛型提供了一种方式,使得类型可以作为参数传递。适用于函数、接口和类。

泛型函数

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

let output1 = identity<string>("myString"); // 明确指定类型
let output2 = identity("myString"); // 类型推断

泛型接口

interface GenericIdentityFn<T> {
    (arg: T): T;
}

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

let myIdentity: GenericIdentityFn<number> = identity;

泛型类

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) {
    return x + y;
};
转载自:https://juejin.cn/post/7370923547739553829
评论
请登录