首页 > 其他分享 >typescript 中严格字面量类型检查的理解

typescript 中严格字面量类型检查的理解

时间:2023-07-15 17:34:09浏览次数:52  
标签:typescript const 字面 严格 score stu1 90 id name

个人关于 TS 中 Strict object literal assignment checking 的理解

Strict object literal assignment checking

Strict object literal assignment checking by ahejlsberg · Pull Request #3823 · microsoft/TypeScript

案例

interface IStudent{
  name: string
  id: string
}

const stu1: IStudent = {
  name: "https://www.cnblogs.com/jasongrass/",
  id: "123",
  score: 90 // error 
}

const stu2 = {
  name: "https://www.cnblogs.com/jasongrass/",
  id: "123",
  score: 90
}

const stu3 = stu2 // ok

在上面 stu1 赋值时,会出现如下错误:

语法上的原因,是因为有上面提到的 Strict object literal assignment checking,但怎么理解呢?

理解

const stu1: IStudent = {
  name: "https://www.cnblogs.com/jasongrass/",
  id: "123",
  score: 90 // error 
}

来看 stu1 的定义,stu1 是一个标识符,一个指向对象的引用,而且这个对象的初始化引用类型,被定义成了 IStudent(其中没有 score 这个属性的定义)
这意味着,在后续使用中,无法通过 stu1 访问到 score 这个属性,这通常意味着代码错误或者设计不合理。

当然,语法上,可以先将 stu1 转换成 any 类型,然后再访问,如

const stu11 = stu1 as any
const score  = stu11.score

但这失去了类型约束的意义,而且令人难以理解。

而先定义了 stu2,然后再通过 const stu3 = stu2 赋值给 stu3 就没有问题。
这里,虽然 stu3 中无法直接访问 score 这个属性了,但是 stu2 这个引用保留了完整的数据,可以用于访问 score 属性。

另外,这里还涉及到的一个思想,是 TS 中关于类型的设计。TS 中的类型,不需要如 java/C# 中严格匹配,只需要 “形似” 就可以,也就是所谓的鸭子类型。
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html#types-as-sets 所述,将 TS 的类型理解成集合的概念,会好理解很多,尤其对于使用 java/C# 等强类型面向对象语言的同学。

案例2

const stu4 = {
  name: "j",
  id: "456",
  score: 90
}

print({ name: "j", id: "456", score: 90 }) // error
print(stu4)

function print(student: IStudent) {

}

这里其实是一样的,实参 { name: "j", id: "456", score: 90 } 中的 score 属性,在赋值给形参 student 之后,将“消失”,
将 score 定义在这里没有意义,是多余的,通常意味着代码书写错误。

标签:typescript,const,字面,严格,score,stu1,90,id,name
From: https://www.cnblogs.com/jasongrass/p/17556550.html

相关文章

  • Vue3+Vue-Router+TypeScript+Vite+Element-Plus+Axios+Pinia快速搭建开发框架
    1、环境准备(1)首先你得需要安装node和npm2、环境初始化(1)先随意找个文件夹,初始化vite#安装pnpmnpmi-gpnpm#初始化vitepnpmcreatevite#安装依赖pnpminstall(2)最后我们执行pnpmrundev3、安装插件(1)Eslint校验代码工具安装eslint#安装eslint......
  • 如何实现在前端使用typescript的具体操作步骤
    在前端使用Typescript介绍Typescript是一种由微软开发的开源编程语言,它是JavaScript的超集,可以编译为纯JavaScript代码。Typescript增加了静态类型检查、面向对象编程和更好的工具支持,使得前端开发更加可靠和可维护。本文将教你如何在前端项目中使用Typescript。步骤下......
  • TypeScript系列 4.数组类型
    本系列知识部分基于小满ZS的TypeScript系列教程。我也会补充一些视频没有的内容。数组类型1.基本类型letarr:number[]=[1,2,3];letarr1:boolean[]=[true,true,false];//使用泛型letarr2:Array<boolean>=[true,true,false];2.对象类型interface......
  • TypeScript中的基本类型
    TypeScript中的基本类型:类型声明类型声明是TS非常重要的一个特点;通过类型声明可以指定TS中变量(参数、形参)的类型;指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错;简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值;......
  • TypeScript 条件类型(Conditional Types)以及 infer 关键字
    什么是条件类型条件类型可以让程序根据输入的类型来决定输出的类型是什么,也就是说根据不同的输入类型来确定输出的类型。条件类型的形式有点类似于JS中的条件表达式(condition?trueExpression:falseExpression):file:[条件类型的规则]SomeTypeextendsOtherType?TrueTyp......
  • TypeScript系列 3.接口和对象类型
    本系列知识部分基于小满ZS的TypeScript系列教程。我也会补充一些视频没有的内容。interface介绍interface即接口,在ts中用于描述对象的“形状”。js是鸭子类型,鸭子类型的通俗说法是:“如果它走起路来像鸭子,叫起来也是鸭子,那么它就是鸭子。”只要一个对象包含interface中......
  • TypeScript系列 2.任意类型
    本系列知识部分基于小满ZS的TypeScript系列教程。我也会补充一些视频没有的内容。类型的等级层次任意类型any、unkownObject包装类型NumberStringBoolean基本类型numberstringboolean字面量never一条基本原则:等级低的能给等级高的赋值,等级高的不能给等级低的......
  • TypeScript+Vue3
    TypeScriptAny类型和unknown顶级类型1.没有强制限定哪种类型,随时切换类型都可以我们可以对any进行任何操作,不需要检查类型2.声明变量的时候没有指定任意类型默认为any3.弊端如果使用any就失去了TS类型检测的作用4.TypeScript3.0中引入的unknown类型也被认为是top......
  • TypeScript面向对象
    TypeScript面向对象面向对象是程序中一个非常重要的思想。面向对象很简单,简而言之就是程序之中所有的操作都需要通过对象来完成。一切皆对象接口TypeScript中的接口跟传统语言(比如Java)的接口有点差别对象可以隐式实现接口概念描述一个类型一个接口里面可以有:字段方法......
  • TypeScript基本介绍与开发环境
    TypeScript基本介绍与开发环境TypeScript官网TypeScript简介TypeScript是JavaScript的超集它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性TS代码需要通过编译器编译为JS,然后再交由JS解析器执行TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用相较于J......