惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
T
Threatpost
Latest news
Latest news
N
News | PayPal Newsroom
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Help Net Security
Help Net Security
D
Darknet – Hacking Tools, Hacker News & Cyber Security
AI
AI
Simon Willison's Weblog
Simon Willison's Weblog
TaoSecurity Blog
TaoSecurity Blog
The Last Watchdog
The Last Watchdog
L
LINUX DO - 热门话题
Google DeepMind News
Google DeepMind News
T
Threat Research - Cisco Blogs
O
OpenAI News
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
The Exploit Database - CXSecurity.com
NISL@THU
NISL@THU
Application and Cybersecurity Blog
Application and Cybersecurity Blog
S
Securelist
小众软件
小众软件
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Martin Fowler
Martin Fowler
S
SegmentFault 最新的问题
Cisco Talos Blog
Cisco Talos Blog
云风的 BLOG
云风的 BLOG
AWS News Blog
AWS News Blog
GbyAI
GbyAI
N
News and Events Feed by Topic
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
美团技术团队
Engineering at Meta
Engineering at Meta
A
About on SuperTechFans
博客园 - 三生石上(FineUI控件)
S
Schneier on Security
博客园 - 聂微东
V2EX - 技术
V2EX - 技术
T
Troy Hunt's Blog
SecWiki News
SecWiki News
S
Secure Thoughts
B
Blog RSS Feed
Hugging Face - Blog
Hugging Face - Blog
WordPress大学
WordPress大学
腾讯CDC
H
Heimdal Security Blog
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
Apple Machine Learning Research
Apple Machine Learning Research
月光博客
月光博客
www.infosecurity-magazine.com
www.infosecurity-magazine.com
P
Privacy International News Feed

博客园 - bala001

【记录】一文搞懂pinia状态管理(保姆级教程) 前端开发设计模式:原型模式 2025 年前端面试中常见问题 Object.create 前端开发设计模式:工厂模式(Factory Pattern)【下】 前端开发设计模式:工厂模式(Factory Pattern)【上】 前端开发设计模式:单例模式之场景应用&实现 前端开发设计模式:架构 前端开发设计模式: 单例模式(Singleton Pattern) JS篇之JS类型 博文阅读密码验证 - 博客园 2024/09/22:TypeScript 学习笔记二 2024/09/20: TypeScript 学习笔记一 css 技巧 博文阅读密码验证 - 博客园 博文阅读密码验证 - 博客园 45 个每个开发人员都应该知道的 JavaScript 超级技巧 - 抄录 明确学习路径与方法 开篇词 - 《重学前端》
2024/10/20: TypeScript 学习笔记三:TypeScript 类型系统
bala001 · 2024-10-20 · via 博客园 - bala001

一、TypeScript 提供的对应类型:

  • boolean
  • string
  • number
  • bigint
  • undefined
  • null
  • symbol

二、object 类型仅能够赋值给以下三种类型:

  • 顶端类型 any 和 unknown
  • Object 类型
  • 空对象类型字面量“{}”

注:所有类型都是顶端类型的子类型,所以object 能够赋值给顶端类型 any 和 unknown

const nonPrimitive:object = {}

const a:any = nonPrimitive
const b: unknown = nonPrimitive

Object 类型描述了所有对象都共享的属性和方法,所以很自然地表示对象类型的 object 类型能够赋值给 Object 类型。示例如下:

const nonPrimitive: object = {}

const obj: Object = nonPrimitive

object 类型也能够赋值给空对象类型字面量 “{}”。示例如下:

const nonPrimitive:object = {}

const obj:{} = nonPrimitive

三、定义一个常用的 object 类型的数据

let point:{

readonly x: number;   // 只读属性
// 只读属性的值在初始化后不允许再被修改。

y:number;

z?:  number; // typescript  会自动 定义成 z?: number | undefined   
// 在严格模式下, null 和 undefined 是区别对待的。不能将 null 赋值给 z
// 在 非严格模式下,null  与 undefined  均可以赋值给 可选属性 z 。

}


// 正确
point = {x: 0, y: 0}

point.x = 1 //编译错误,不允许给 x 赋值,因为它是只读属性

四、空对象类型字面量

空对象字面量表示不带任何属性的对象类型,因此不允许在 “{}” 类型上访问任何自定义属性。示例如下:

const  point: {} = {x: 0, y: 0}

point.x  // 编译错误,属性x 不存在于 类型 {}

在 空对象类型字面量 “{}” 上,允许访问对象公共的属性和方法,也就是 Object 类型上定义的方法和属性。示例如下:

const  point: {}  = {x: 0, y:0}

point.valueOf();

现在可以发现 空对象类型字面量 “{}” 与 Object 类型十分相似。事实上也是如此。单从行为上来看两者是可以互换使用的。例如,除了 undefined 和 null 值外,其他任何值都可以赋值给 空对象类型字面量 “{}” 和 Object 类型。同时,空对象类型字面量 “{}” 和 Object 类型之间也允许互相赋值。示例如下:

let a: Object = 'hi'
let b: {} = ‘hi’

a = b;
b = a

两者的区别在于语义上。全局的 Object 类型用于描述对象公共的属性和方法,它相当于一种专用类型,因此程序中不应该将自定义变量、参数 等类型直接声明为 Object 类型。空对象类型字面量 “{}” 强调的是不包含属性的对象类型,同时也可以作为 Object 类型的代理来使用。最后也要注意下:在某些场景中新的 object 类型可能是更加合适的选择。

五、弱类型

弱类型指的是同时满足以下条件的对象类型:

  • 对象类型中至少包含一个属性。
  • 对象类型中所有属性都是可选属性
  • 对象类型中不包含字符串索引签名、数值索引签名、调用签名和构造签名

例如,下例中 config 变量的类型是一个弱类型

let config: {
  url?: string;
  async?: boolean;
   timeout?: number  
}

六、多余属性

const point: {x: number} = {x: 0, y: 0}  //  y 是多余属性

多余属性会影响类型间的子类型兼容性以及赋值兼容性,也就是说编译器不允许在一些操作中存在多余属性。

多余属性检查在绝大多数场景中都是合理的。如果确定不想让编译器对代码进行多余属性检查,有多种方法能够实现这个效果。如下

  • 使用类型断言,这是推荐方法

  类型断言能够对类型进行强制转换。例如,我们可以将对象字面量{x:0,y:0}的类型强制转换为 {x: 0} 类型。

  类型断言能够绕过多余属性检查的真正原因是:处于类型断言表达式中的对象字面量将不再是“全新的对象字面量类型”,因此编译器也就不会对其进行多余属性检查。

  例如:

// 无编译错误
const p0: {x:number} = {x: 0, y: 0} as {x:number}

// 无编译错误
const p1: {x: number} = {x: 0, y: 0} as {a:  0, y: 0}
  • 启用 “--suppressExcessPropertyErrors” 编译选项

  启用该编译选项能够完全禁用整个 TypeScript 工程的多余属性检查,但同时也将完全失去多余属性检查带来的帮助。

  我们可以在 tsconfig.json 配置文件中或命令行上启动该编译选项。例如:

{
    “compilerOptions”: {
        "suppressExcessPropertyErrors": true
    }
}
  • 使用 “// @ts-ignore” 注释指令

  该注释指令能够禁用针对某一行代码的类型检查

// @ts-ignore
const point: {x: number} = {x: 0, y: 0}
  • 为目标对象类型添加索引签名

  若目标对象类型上存在索引签名,那么目标对象可以接受任何属性,因此也就谈不上多余属性。例如:

const point: {
    x: number;
    [prop: string]: number; // 索引签名  
} = {x: 0, y: 0}
  • 最后一种方法也许不是很好理解。如果我们先将对象字面量赋值给某个变量,然后再将该变量赋值给目标对象类型,那么也就不会执行多余属性检查。

  这种方法能够生效的原理与类型断言类似,那就是令源对象类型不为“全新的对象字面量类型”,于是编译器将不执行多余属性检查。例如:

const temp = {x: 0, y:0}

//无编译错误
const point : {x: number} = temp