TypeScript六个颠覆认知的核心知识点解析
时间:2026-08-20 | 作者:云端旅人 | 阅读:0起因是在技术群的讨论中,有小伙伴提出想要提升对TypeScript的理解。于是便有了这篇文章。
它将为大家讲述TypeScript中几个常见却又不好理解的知识点。至于简单的使用方法,大家可以自行查阅官网文档!
Typescript中的几个重要概念
1.any 和 T(泛型)的区别
核心区别:any 是任意类型,代表的是所有类型;泛型 T 是所有类型中的一种类型,并不是完全的所有类型。
因此,在函数中返回的类型要和定义的类型一摸一摸,不能修改他原有的类型。
/**
any 和 T ,一个是任意类型,一个是泛类型
卧槽,这也太难让人理解他的区别了吧,字面意思几乎一样,
但是我连续读了:泛..泛.泛 任意..任意类型,读了十遍,还是感受到了差异
*/
any:任意类型,代表的是所有类型
泛型:泛型他就是所有类型中的一种类型,并不是完全的所有类型,所以在函数中返回的类型要和定义的类型一摸一摸,不能修改他原有的类型
// 在这种场景下,有区别体现
//正确
function getInfo(age: any): any {
return "鬼哥今年:"+age
}
getInfo("18岁")
//错误
function getInfo(age: T): T {
return "鬼哥今年:"+age
}
getInfo("18岁")
//这里直接报错
2.type interface enum
这三个概念都很常见,但它们约束的对象并不一样。
type:用来约束数据类型(数据结构,数据属性且可以是联合类型,元组类型)interface:用来约束数据类型(数据结构,数据属性且不可以是联合类型,元组类型)enum:用来约束数据类型的值,而并非数据类型
使用场景如:
//人
interface People {
}
//动物
interface Animal {
}
// type和interface区别1
// 正确(人既可以是动物,也可以是人)
type User=People | Animal;
// 错误(人既可以是动物,也可以是人),使用interface定义却是不可以的
interface User { People | Animal };
其实从语法上可以看出他们两的区别,`type` 是用`=`符号,既然是等于,那肯定就存在多种情况的,`interface`使用的是`{}`符号,是一种`定义`的形式,既然是`定义`,那肯定就是觉得性质的,只会有一种可能
/**************************************/
// type和interface区别2
既然`interface`是一种数据结构,那肯定是可以实现这种数据结构的,所以`interface`可以实现的功能
// 比如运用interface用来定义接口,然后实现接口的功能:
interface UserModelApi {
getUserList:()=>Promise,
getOrderList:()=>Promise,
}
class HtppApi implements UserModelApi{
getUserList(){
return new Promise((resolve)=>{
});
}
getOrderList(){
return new Promise(()=>{
});
}
}
// enum和const的区别
/**
他们两者的相同点,都是定义数据,
且定义的数据不可更改.不同点在于
1)其实和上面描述`type`与`interface`一样,
他们都是一个是定义,一个是赋值
2)下面的代码是不是从感觉使用枚举看上去语法的阅读性更强
3)`enum`枚举可以用来定义类型
*/
// 正确(语法理解上一看就知道,是这个对象有哪种情况)
enum Sex { M = "男", F = "女" }
// `enum` Sex枚举可以用来定义类型
const getInfo=function(sex:Sex){
return `我的性别为:${sex}`;
}
/**************************************/
// 错误(而这种语法看上去就是,这个对象有哪些值)
const Sex ={
M:"男",
F:"女"
}
// `const` Sex 不可以用来定义类型
const getInfo=function(sex:Sex){
return `我的性别为:${sex}`;
}
type 和 interface 的区别
第一点:type 可以表示联合类型,interface 在这里不可以。
从语法上也能看出差异。type 是用 = 符号,既然是等于,那肯定就存在多种情况。
interface 使用的是 {} 符号,是一种定义的形式。既然是定义,那肯定就是觉得性质的,只会有一种可能。
第二点:interface 作为一种数据结构,是可以被实现的。
比如可以运用 interface 用来定义接口,然后实现接口的功能。
enum 和 const 的区别
他们两者的相同点,都是定义数据,且定义的数据不可更改。
不同点在于:
- 其实和上面描述
type与interface一样,他们都是一个是定义,一个是赋值 - 下面的代码是不是从感觉使用枚举看上去语法的阅读性更强
enum枚举可以用来定义类型
3.映射类型
把对象或数组里的类型转变为其他类型
免责声明:文中图文均来自网络,如有侵权请联系删除,心愿游戏发布此文仅为传递信息,不代表心愿游戏认同其观点或证实其描述。
相关文章
更多-
- JavaScript正则表达式批量处理HTML标签转义与替换方法
- 时间:2026-08-21
-
- JavaScript函数默认参数的精准JSDoc类型注解方法
- 时间:2026-08-21
-
- JavaScript设置Cookie的SameSite属性防范CSRF攻击
- 时间:2026-08-21
-
- JavaScript中BOM如何打开新的浏览器窗口标签
- 时间:2026-08-20
-
- JavaScript微任务队列在事件循环中的执行机制
- 时间:2026-08-20
-
- JavaScript中网络超时如何用流程控制实现中断
- 时间:2026-08-20
-
- JavaScript防抖函数原理与减少高频事件触发方法
- 时间:2026-08-20
-
- JavaScript原型对象constructor指向机制详解
- 时间:2026-08-20
精选合集
更多大家都在玩
大家都在看
更多-
- 蚂蚁新村小课堂今日答案10月23日 江苏溧阳的跳幡神是一种
- 时间:2026-10-23
-
- 蚂蚁新村2026年10月23日答案最新
- 时间:2026-10-23
-
- 蚂蚁庄园答案2026年10月24日
- 时间:2026-10-23
-
- 蚂蚁庄园今天答题答案2026年10月24日
- 时间:2026-10-23
-
- 蚂蚁庄园今日答案2026年10月24日
- 时间:2026-10-23
-
- 秦始皇陵地宫至今未发掘,主要原因是 蚂蚁庄园今日答案10.24
- 时间:2026-10-23
-
- 小鸡答题今天的答案是什么2026年10月24日
- 时间:2026-10-23
-
- 蚂蚁庄园每日答题答案2026年10月24日
- 时间:2026-10-23
