【前端基础知识】TS 类型、接口interface、泛型、Type

最新推荐文章于 2025-06-07 22:03:27 发布

原创最新推荐文章于 2025-06-07 22:03:27 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #前端 #开发语言 #es6

前端专栏收录该内容

49 篇文章

订阅专栏

本文讲解了TypeScript中的类型系统，包括接口、泛型及其约束，展示了如何定义对象类型、数组类型、联合类型和函数类型。同时探讨了接口接口的使用、泛型的灵活应用及类型交叉和接口的组合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类型的定义

//简单类型
var num: number = 1;
var str: string = 'str';
var bool: boolean = true;
var every: any;//定义为任意类型

//复杂类型--数组
var arrStr: string[] = ['1', '2', '3'];
var arrNum: number[] = [1, 2, 3];
var arrBool: boolean[] = [true, false];
var arrEvery: any[];//定义为任意类型的数组

//联合类型
var data: string | number = 21;
var dataArr: (string | number)[] = [1, 2, '2'];

//函数类型 输入类型 输出类型
function f1(x: number, y: number): number {
    return x + y
}
f1(1, 2)

function f2(x: number, y: number): boolean {
    return x === y
}
f2(1, 2)

Interface

//Object类型 定义接口interface
interface Person {
    name: string;
    age: number;
    sex?: string;//可选属性
    [propName: string]: any;//任意属性
}
var obj: Person = {
    name: 'Dai',
    age: 12,
    sex: '男'
}

泛型

泛型约束

function f4<T>(x: T): number {
    return x.length
}
f4<string>('3')

在这里插入图片描述
如果不对泛型进行约束，就会进行报错

interface NumLength {
    length: number
}
function f4<T extends NumLength>(x: T): number {
    return x.length
}
f4<string>('3')

泛型接口

interface InspectFn {
    <T>(x: T, y: T): T[]
}
let fn6: InspectFn = function f(x, y) {
    return [x, y]
}
fn6<number>(10, 5)

Type

interface extends Type

type User = {
    name: string;
    sex?: string;//可选
    [propName: string]: any;
}
interface People extends User {
    age: number
}
let stu: People = {
    age: 12,
    name: '12',
    no: 213
}

类型交叉

type 与 type 交叉

type Name = { name: string }
type Age = { age: number }

type Student = Name & Age

let student: Student = {
    name: 'Dai',
    age: 12
}
//如果student 中 name 和 age 少一个就会报错

type 与 interface 交叉

type Name = { name: string }
interface Age { age: number }

type Student = Name & Age

let student: Student = {
    name: 'Dai',
    age: 12
}
//如果student 中 name 和 age 少一个就会报错