TypeScript-类型别名和类型别名、接口异同

简介: TypeScript-类型别名和类型别名、接口异同

类型别名概述


类型别名就是给一个类型起个 新名字, 但是它们都代表 同一个类型例如: 你的本名叫张三, 你的外号叫小三, 小三就是张三的别名, 张三和小三都表示同一个人

type MyString = string;
let value: MyString;
value = 'abc';
value = 123;
value = false;

如上代码的含义为给 string 类型起了一个别名叫做 MyString, 那么将来无论是 MyString 还是 string 都表示 string 也就是说将来你使用 MyString 别名作为变量的类型那么改变量就只能存储字符串类型的数据像如上的示例代码我赋值了其它类型的数据其实在编译器当中已经报错了如下:


类型别名也可以使用 泛型

type MyType<T> = { x: T, y: T };
let value: MyType<number>;
value = {x: 123, y: 456};
value = {x: '123', y: 456};
value = {x: false, y: 456};

如上代码的含义为,定义了一个对象泛型别名,该对象当中有两个属性 x、y, 然后定义了一个该别名的变量,泛型类型指定的为 number 那么就不能在存储其它类型的值,如上代码有部分是报错的,如下:


可以在类型别名类型的属性中使用自己 一般用于定义一些 树状结构 或者 嵌套结构 的数据结构

type MyType = {
    name: string,
    children?: MyType
}
let value: MyType = {
    name: 'one',
    children: {
        name: 'one',
        children: {
            name: 'one',
        }
    }
}

如上代码当中使用到了可选参数不然会一直循环的定义下去。

接口和类型别名是相互兼容的

type MyType = {
    name: string
}
interface MyInterface {
    name: string
}
let value1: MyType = {name: 'yangbuyiya'};
let value2: MyInterface = {name: 'zs'};
value1 = value2;
value2 = value1;




接口和类型别名的异同


都可以描述 属性方法

type MyType = {
    name: string;
    say(): void;
}
interface MyInterface {
    name: string;
    say(): void;
}

都允许 扩展

interface:

interface MyInterface {
    name: string;
    say(): void;
}
interface MyInterface2 extends MyInterface {
    age: number;
}
let value: MyInterface2 = {
    name: 'yangbuyiya',
    age: 18,
    say(): void {
    }
}

type 利用一个 & 来实现扩展:

type MyType = {
    name: string;
    say(): void;
}
type MyType2 = MyType & {
    age: number;
}
let value: MyType2 = {
    name: 'yangbuyiya',
    age: 18,
    say(): void {
    }
}



不同点


type 可以声明 基本类型 别名,联合类型元组 等类型, interface 不能

type MyType1 = boolean;
type MyType2 = string | number;
type MyType3 = [string, boolean, number];

type 不会自动合并

interface 的自动合并可查看 TypeScript 当中的 30.TypeScript-接口合并现象 这里就只演示 type 的不会自动合并的不同点:

type MyType = {
    name: string
}
type MyType = {
    age: number
}



最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
11天前
|
JavaScript 编译器
TypeScript中类型守卫:缩小类型范围的艺术
【4月更文挑战第23天】TypeScript中的类型守卫是缩小类型范围的关键技术,它帮助我们在运行时确保值的精确类型,提升代码健壮性和可读性。类型守卫包括`typeof`(检查原始类型)、`instanceof`(检查类实例)和自定义类型守卫。通过这些方法,我们可以更好地处理联合类型、泛型和不同数据源,降低运行时错误,提高代码质量。
|
3天前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 中的接口是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 中的接口是什么?
|
4天前
|
JavaScript 安全 前端开发
【TypeScript技术专栏】TypeScript中的类型推断与类型守卫
【4月更文挑战第30天】TypeScript的类型推断与类型守卫是提升代码安全的关键。类型推断自动识别变量类型,减少错误,包括基础、上下文、最佳通用和控制流类型推断。类型守卫则通过`typeof`、`instanceof`及自定义函数在运行时确认变量类型,确保类型安全。两者结合使用,优化开发体验,助力构建健壮应用。
|
4天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript类型系统与接口详解
【4月更文挑战第30天】TypeScript扩展JavaScript,引入静态类型检查以减少错误。其类型系统包括基本类型、数组等,而接口是定义对象结构的机制。接口描述对象外形,不涉及实现,可用于规定对象属性和方法。通过声明、实现接口,以及利用可选、只读属性,接口继承和合并,TypeScript增强了代码的健壮性和维护性。学习和掌握TypeScript的接口对于大型项目开发至关重要。
|
5天前
|
JavaScript 前端开发
TypeScript基础类型
TypeScript基础类型
|
5天前
|
JavaScript 前端开发
typescript 混合类型
typescript 混合类型
|
10天前
|
JavaScript 前端开发 开发者
类型检查:结合TypeScript和Vue进行开发
【4月更文挑战第24天】TypeScript是JavaScript超集,提供类型注解等特性,提升代码质量和可维护性。Vue.js是一款高效前端框架,两者结合优化开发体验。本文指导如何配置和使用TypeScript与Vue:安装TypeScript和Vue CLI,创建Vue项目时选择TypeScript支持,配置`tsconfig.json`,编写`.tsx`组件,最后运行和构建项目。这种结合有助于错误检查和提升开发效率。
|
11天前
|
JavaScript 前端开发 开发者
JavaScript与TypeScript:深入解析两者之间的异同
【4月更文挑战第23天】本文对比分析了JavaScript和TypeScript的异同。作为JavaScript超集,TypeScript添加了静态类型和类等特性,有助于提升代码质量和可维护性。两者在语法上相似,都能在浏览器或Node.js环境中运行。JavaScript适合小项目和快速开发,而TypeScript适用于大型项目,因其静态类型和强大的生态系统能减少错误并便于团队协作。理解两者差异有助于开发人员根据项目需求作出合适选择。
|
11天前
|
JavaScript 编译器 开发者
TypeScript中的类型推断机制:原理与实践
【4月更文挑战第23天】TypeScript的类型推断简化编码,提高代码可读性。编译器基于变量初始值或上下文推断类型,若新值不兼容则报错。文章深入探讨了类型推断原理和实践,包括基本类型、数组、函数参数与返回值、对象类型的推断,并提醒注意类型推断的限制,如非万能、类型兼容性和适度显式指定类型。了解这些能帮助更好地使用TypeScript。
|
11天前
|
JavaScript 前端开发 编译器
TypeScript中的高级类型:联合类型、交叉类型与条件类型深入解析
【4月更文挑战第23天】探索TypeScript的高级类型。这些特性增强类型系统的灵活性,提升代码质量和维护性。