TS的字面量类型与接口类型

2024-08-09 21:53:35 浏览数 (1)

一、字面量类型和keyof关键字

1、字面量类型（Literal Types）

字面量类型允许指定一个变量只能是几个特定的字面量值之一。这些值通常是字符串字面量、数字字面量或布尔字面量。

代码语言：ts复制
let x: "hello" | "world"; // x只能是"hello"或"world"
let y: 1 | 2 | 3; // y只能是1、2或3
x = "hello"; // true
x = "world"; // true
x = "other"; // false
y = 1; // true
y = 4; // false

2、keyof关键字

  • keyof使用

keyof关键字用于获取一个对象类型的所有键（key），生成一个字符串字面量类型的联合类型。

代码语言：ts复制
interface Person {
    username: string;
    sex: string;
    age: number;
}
type PersonKeys = keyof Person; // 等同于 "username" | "sex" | "age" |
let key: PersonKeys;
key = "username"; // true
key = "sex"; // true
key = "age"; // true
key = "other"; // false
  • keyof来索引对象类型的属性
代码语言：ts复制
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}
let person = { name: "xiaomu", age: 20 };
let name = getProperty(person, "name");
let age = getProperty(person, "age");

二、详解接口与类型别名

1、接口（Interface）

接口定义了一个对象的形状，它包含了一组属性的类型声明，但不包含属性的具体值。接口可以定义方法签名，但不能定义方法的具体实现。

代码语言：ts复制
interface Person {
    name: string;
    age: number;
}
interface Arr{
    [index:number]:number;
}
interface Fn {
    ():void;
}
let a：Person={
    name: 'xiammu';
    age: 20;
}
let b:Arr=[1,2,3]
let f:Fn=()=>{}
  • 接口具有对象类型

接口在 TypeScript 中通常用于描述对象的形状，即该对象应该有哪些属性，以及这些属性的类型是什么。即可以将接口看作是一种特殊的对象类型。

代码语言：ts复制
interface Person {
    name: string;
    age: number;
}
const john: Person = {
    name: 'xiammu';
    age: 20;
};
  • 接口合并

TypeScript 支持接口合并，这意味着可以定义多个接口，并将它们合并成一个接口。合并后的接口将包含所有合并前接口的属性。

代码语言：ts复制
interface Person {
    name: string;
    age: number;
}
interface Employee {
    employeeId: number;
}
type FullPerson = Person & Employee;
const employee: FullPerson = {
    name: 'xiammu';
    age: 20;
    employeeId: 111
};
  • 接口继承

TypeScript 中的接口也可以继承其他接口，这意味着一个接口可以继承另一个接口的所有属性和方法。

代码语言：ts复制
interface Person {
    name: string;
    age: number;
}
interface Employee extends Person {
    employeeId: number;
}
const employee: Employee = {
    name: string;
    age: number;
    employeeId: 111
};

2、类型别名

  • 映射类型

映射类型是一种高级类型，它允许根据另一个类型的所有属性键来创建新的类型。在 TypeScript 中，可以使用 in 关键字来定义映射类型，其中映射类型不能直接在interface使用

代码语言：ts复制
// 定义一个字符串字面量类型的联合
type Keys = 'username' | 'sex' | 'age';
// 该对象类型的属性名是T中的每一个值，属性值是string类型
type KeyedStrings<T extends Keys> = {
    [P in T]: string;
};
// 使用映射类型创建一个新的类型
type PersonProperties = KeyedStrings<Keys>;
// PersonProperties 现在等同于：
// type PersonProperties = {
//     username: string;
//     sex: string;
//     age: string;
// }
// 创建一个符合PersonProperties类型的对象
const person: PersonProperties = {
    username: 'xiaomu',
    sex: 'Boy',
    age: '20'
};
  • 映射类型与接口Interface相结合

映射类型本身并不是直接在interface中使用的，因为映射类型是通过type关键字定义的，而不是interface。但是，你可以在一个interface中使用映射类型作为属性的类型。

代码语言：ts复制
type Keys = 'username' | 'sex';
type KeyedStrings<T extends Keys> = {
    [P in T]: string;
};
interface Person {
    // details属性是一个KeyedStrings类型，其属性为username和sex，类型为string
    details: KeyedStrings<Keys>;
    age: number;
}
// 创建一个符合Person接口的对象
const person: Person = {
    details: {
        username: 'xiaomu',
        sex: 'Boy',
    },
    age: 20
};
typescript 腾讯技术创作特训营S8

0 人点赞