ts的类型兼容性

简介: ts的类型兼容性

你要的我有就可以,没有就不行

接口兼容性

interface Person1 {
  name: string
}
interface Person2 {
  name: string;
  age: number;
}

let obj1: Person1 = {
  name: 'xxx'
}

let obj2: Person2 = {
  name: 'xxx',
  age: 18
}

obj2 = obj1 // 错误:无法赋值,因为缺少属性,多了不影响,但是少了属性绝对不行

obj1 = obj2 是可以的

基本类型的兼容性

let num1: number
let num2: number | string

num1 = 10;
num2 = 'xxx'

num1 = num2 // 错误:无法赋值,因为缺少类型,多了不影响,但是少了类型绝对不行

num2 = num1 是可以的

类的兼容性

class Animal {
  name: string
}
class Bird extends Animal {
  age: number
}

let a: Animal;
let b = Bird;

b = a  // 错误:无法赋值,因为缺少类型,多了不影响,但是少了类型绝对不行

a = b 是可以的

函数的兼容性

type Func = (a: number, b: number) => number;

let sum: Func;
function f1 (a: number, b: number):void {
 // todo
}

sum = f1 // 错误:无法赋值,因为返回值类型不同

除了对比参数,还要对比返回值

type Func = (a: number, b: number) => number;

let sum: Func;
function f1 (a: number, b: number, c: number):number {
  return a
}

sum = f1 // 错误:无法赋值,多了参数不行,但是少参数可以
type GetPerson = () => {name: string, age: number};
let getPerson :GetPerson;
function g1 () {
  return {name: 'xxx'}
}
function g2 () {
  return {name: 'xxx', age: 18}
}
function g3 () {
  return {name: 'xxx', age: 18, sex: 1}
}

// getPerson = g1; 报错
// getPerson = g2; 正常
// getPerson = g3 正常

参数可以传自己和自己的父类,返回值可以传自己和自己的子类

相关文章
|
开发工具 git 开发者
深入解析:取消 Git Pull 操作的完整指南
【2月更文挑战第29天】
2268 0
|
存储 JavaScript 测试技术
Typescript - 索引签名
索引签名是 TypeScript 中一个强大的特性,它允许我们在对象和类中使用动态的属性名称。通常情况下,我们会在对象或类中定义固定的属性,但有时我们需要处理具有动态属性名称的情况。这时,索引签名就派上了用场。 在这篇技术博文中,我们将介绍索引签名的使用方法和用例,将展示如何定义带有索引签名的接口和类,并演示如何使用索引签名来访问对象属性和处理动态属性名称的数据。我们还会讨论一些索引签名的注意事项,比如索引签名的顺序和使用 readonly 修饰符。
527 1
Typescript - 索引签名
|
前端开发 安全 容器
flex为1的父元素被子元素挤出屏幕怎么办?
【8月更文挑战第24天】flex为1的父元素被子元素挤出屏幕怎么办?
383 3
flex为1的父元素被子元素挤出屏幕怎么办?
|
JavaScript 前端开发 Java
TypeScript 类型兼容性
TypeScript 类型兼容性
|
前端开发 Java
在springboot项目中实现将上传的jpg图片类型转为pdf并保存到本地
使用uniapp的uni.canvasToTempFilePath方法,将canvas内容转为jpg并上传至服务器。后端接收到jpg文件后,通过Java的PDFBox库进行处理。代码包括:选取画板内容为jpg,转换为临时文件路径,基于此路径生成File对象并上传,服务器端利用PDFBox处理上传的jpg文件。依赖:PDFBox 2.0.8。
427 3
|
JavaScript 前端开发 API
深入理解vue组件生命周期,你一定要看到最后,最后有深入探讨
深入理解vue组件生命周期,你一定要看到最后,最后有深入探讨
839 0
|
JavaScript
Vue使用Echarts折线图,实现点击播放、暂停、选择播放倍数;实现数据直播功能
Vue使用Echarts折线图,实现点击播放、暂停、选择播放倍数;实现数据直播功能
802 0
|
JavaScript 前端开发
一文读懂TypeScript类型兼容性
一文读懂TypeScript类型兼容性
268 0
|
JavaScript
TS中的条件类型(ReturnType)
本偏介绍TS另一种高级类型-条件类型
608 0
|
JavaScript 前端开发 安全
TS学习(一):基础使用
TS学习(一):基础使用
TS学习(一):基础使用