首页 > 其他分享 >2024/10/20: TypeScript 学习笔记三:TypeScript 类型系统

2024/10/20: TypeScript 学习笔记三:TypeScript 类型系统

时间:2024-10-20 22:32:53浏览次数:1  
标签:10 TypeScript 20 字面 对象 number 类型 const 属性

一、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

 

标签:10,TypeScript,20,字面,对象,number,类型,const,属性
From: https://www.cnblogs.com/bala/p/18488071

相关文章

  • JSP & EL表达式 & JSTL -2024/10/20
    JSPJSP(全称:JavaServerPages):Java服务端页面。是一种动态的网页技术,其中既可以定义HTML、JS、CSS等静态内容,还可以定义Java代码的动态内容,也就是JSP=HTML+Java。导入JSP依赖<dependency><groupId>javax.servlet.jsp</groupId><artifactId>jsp-api</artifactI......
  • 基于django+vue+Vue基于新生入学报道管理系统3gd10【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、选题背景关于新生入学报道管理系统的研究,现有研究多集中在整体的学校管理系统层面,专门针对新生入学报道这一特殊阶段管理系统的研究较少。在国......
  • 活着就好20241020
    明天的2024年10月20日,第42周,农历甲辰[龙]年九月十九,周日 ......
  • 2024-2025 20241318 《计算机基础与程序设计》第四周学习总结
    这个作业属于哪个课程https://edu.cnblogs.com/campus/besti/2024-2025-1-CFAP这个作业要求在哪里https://www.cnblogs.com/rocedu/p/9577842.html#WEEK04这个作业的目标自学教材计算机科学概论(第七版)第4章,第5章并完成云班课测试《C语言程序设计》第3章并完成......
  • 2024-2025-1 20241419《计算机基础与程序设计》第四周学习总结
    作业信息课程要求目标:门电路组合电路,逻辑电路冯诺依曼结构CPU,内存,IO管理嵌入式系统,并行结构物理安全作业正文教程学习内容总结:数字电路:门电路:实现逻辑运算的单元电路,包括与、或、非等。组合电路:输出仅与当前输入有关的数字电路。逻辑电路:由逻辑门组成,输入输出信号......
  • 20222411 2024-2025-1 《网络与系统攻防技术》实验三实验报告
    1.实验内容1.1实践内容(1)正确使用msf编码器,veil-evasion,自己利用shellcode编程等免杀工具或技巧正确使用msf编码器,使用msfvenom生成如jar之类的其他文件veil,加壳工具使用C+shellcode编程(2)通过组合应用各种技术实现恶意代码免杀如果成功实现了免杀的,简单语言描述原理,不要......
  • 10.20
    修改了四则运算中的部分错误Grade3QuestionGenerator类点击查看代码packageqixun;importjava.util.Random;publicclassGrade3QuestionGeneratorextendsGrade2QuestionGenerator{publicGrade3QuestionGenerator(){this.operandCount=4;//操作数......
  • 2024-2025-1 20241329 《计算机基础与程序设计》第四周学习总结
    作业信息作业归属课程:https://edu.cnblogs.com/campus/besti/2024-2025-1-CFAP作业要求:https://www.cnblogs.com/rocedu/p/9577842.html#WEEK04作业目标:门电路;组合电路,逻辑电路;冯诺依曼结构;CPU,内存,IO管理;嵌入式系统,并行结构;物理安全作业正文:https://www.cnblogs.com/incamelli......
  • Springboot考勤管理系统.0p420(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表学生,教师,学习资料,考勤信息,学生打卡,请假信息开题报告内容一、研究背景与意义随着信息技术的快速发展,企业和学校对考勤管理的需求日益提高。传统的考勤方式,......
  • CF2030G
    很厉害的数数题。首先我们自然考虑固定方案如何计算答案。考虑最左边的区间\([l_1,r_1]\)和最右边的区间\([l_2,r_2]\),如果有交点,那么所有区间一定都有交点,否则我们计算一下把这两个区间碰到一起需要多少代价,不难发现是\(l_2-r_1\),然后删去这两个区间,递归下去。然后可以自......