TypeScript中的泛型以及模块化

最新推荐文章于 2025-04-09 16:26:42 发布

原创最新推荐文章于 2025-04-09 16:26:42 发布 · 643 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #前端 #vue.js #javascript #es6

typeScript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了TypeScript中的导出方式，包括`export`和`export default`的区别，以及如何使用它们进行模块导入。此外，讲解了命名空间的作用，防止命名冲突。接着，重点解析了泛型的概念，展示了泛型函数的定义与调用，并列举了在接口和类中使用泛型的实例。最后，探讨了泛型在处理具有`length`属性的对象时的灵活性，并提到了`.d.ts`文件在类型声明中的作用。

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

// 模块化导入到处
// es6 export 以及 export default
// export default 意思是导出全部不能再次到处
// export 导出可以多次导出
// export使用是import {} from 'url'
// export default使用是import 命名 from 'url'

// 命名空间
// 命名空间主要的目的是将一个模块导出放置命名冲突
export namespace uiltsName {
    export var obj = {
        name: "李四"
    }
}

// 认识泛型
// 泛型就是当我们不确定传入的数据类型的时候，可以使用泛型来传入type
//在定义这个函数的时候, 我们不去决定这些参数的类型
//而是让调用者以参数的形式告诉我们函数的参数应该是什么类型
function fanxingrenshi<T = number>(num1: T, num2: T): T {
    return num1
}
// 泛型函数的调用
fanxingrenshi<number>(1, 2)
fanxingrenshi<string>('3', '4')

//约定俗成的开发过程中一些常见名称
//T: type的缩写, 类型
//K/V: key和value的缩写, 键值对
//E: element的缩写, 元素
//O: object的缩写, 对象

// 泛型的使用  // @ts-ignore 可以忽略ts在编译过程中的错误是一个注释
function getLength(arg) {
    var num = arg.length;
    console.log(num);
    return num;
}
getLength("1234");
getLength([1, 2, 3, 4]);
getLength({ a: 1, length: 1 });


// 在interface中也可以使用泛型
interface interFanxing<T> {
    name: string,
    age: number
}
let objfanxinginter:interFanxing<string> = {
    name:"张三",
    age:15
}

// 在类中使用泛型
class Point<T>{
    x: T
    y: T
    z?: T
    constructor(x: T,y: T,z?: T) {
        this.x = x
        this.y = y
        this.z = z
    }
}
let p1 = new Point(1,2,3);
let p2 = new Point<string>("1","2","3");
let p3: Point<number> = new Point(1,2);


//只要是拥有length的属性 都可以作为我们当前函数的参数类型

interface ILength{
    length: number
}

function getLength2<T extends ILength>(arg:T):number{
    let num = arg.length
    console.log(num)
    return num
}
getLength2<string>("1234")
getLength2<number[]>([1,2,3,4])
getLength2<{[name:string]:number,length:number}>({a:1,length:1})

//.d.ts文件 用来做类型的声明(declare). 它仅仅用来做类型检测, 告诉ts我们都有哪些类型

//ts会在那些位置去查找类型声明
//1 内置类型声明 (在安装ts的时候内置的)
//2 外部定义类型声明
// 1.在第三方库中直接有.d.ts文件
// 2.ts官网(https://www.typescriptlang.org/dt/search?search=)查找.d.ts文件
//3 自己定义类型声明