📖
blog
  • README
  • JavaScript
    • 元素的宽高位置信息梳理
    • dom-align 源码浅析
    • Event Loop
    • 函数实参为对象时的陷阱
    • export 与 utils 方法书写规范
    • 手写 Promise 及相关代码理解
    • call,apply,bind 等函数的模拟实现
    • JavaScript继承
    • JavaScript 数据类型与类型判断
    • for..of 和 for..in 的区别
    • 写给自己看的 next 函数
    • JS 可选链与双问号
    • mouseenter 与 mouseover 事件的区别
    • Immutable相关知识
  • CSS
    • 不简单的 z-index
    • 两列布局,三列布局
    • CSS 居中方案整理
    • CSS 像素,设备像素,2倍图梳理
    • iconfont 的使用
  • Node JS
    • 实现简易的 express
  • React 核心知识点整理
    • 高阶组件
    • React 事件处理
    • React Hooks
    • React Context
  • React 状态管理
    • Redux 基础概念
    • Redux 中间件和异步操作
    • Redux Saga
    • Redux 只能有一个 store 对象嘛
  • React 开发实践
    • Ant Design Menu 组件的使用与深入
    • 讲讲吸顶效果与 react sticky
    • 基于 express,搭建 react 的开发环境
    • 通过 antd input 组件分析受控与非受控组件
    • DebounceClick 组件
    • react component Align 组件分析
    • React Portal 之事件冒泡
    • React Transition Group 源码浅析
    • React.cloneElement 父组件向子组件注入 props
    • 一次 Align 组件的问题记录
    • 如何知道子组件的类型
    • React Router 源码简单分析
    • React Redux 源码简单分析
  • Vue.js
    • Vue.js 概览
    • scoped 样式中的 deep
  • TypeScript 语法
    • 基础类型
    • 变量声明
    • 接口
    • 类
    • 函数
    • 泛型
    • 枚举
    • 类型推论
    • 类型兼容性
    • 高级类型
    • Symbol
    • 迭代器和生成器
    • 模块
    • 命名空间
    • JSX
  • 玩转 webpack
    • 第一章: webpack 与构建发展简史
    • 第二章:webpack基础用法
    • 第三章:webpack进阶用法
    • 第四章:编写可维护的 webpack 构建配置
    • 第五章:webpack构建速度和体积优化策略
    • 第六章:通过源代码掌握webpack打包原理
    • 第七章:编写Loader和插件
  • webpack 实践
    • 如何配置 output.library
  • 测试
    • 初识代码测试
    • Jest 中 如何测试 setTimeout
    • Jest Enzyme React 测试实践记录
  • WEB 开发,过往工作沉淀
    • Web安全(DVWA)
    • 内存泄露与事件移除的必要性
    • url to pdf api 与 服务部署踩坑记录
    • 前端调试指南
    • Markdown 转 email
    • github travis ci 自动部署
    • 浏览器缓存知识梳理
    • WEB 系统登录相关知识梳理
    • 将-Axios-请求参数和返回值进行格式化
    • source-map与源码调试
    • HTTPS
    • 使用 rollup 打造自己的 npm 包 (全流程)
    • father-build 是如何工作的
  • 书籍
    • 图解 HTTP 协议
    • 编写可维护的 JavaScript
    • 鸟哥的 Linux 私房菜
    • JavaScript Promise迷你书
  • Linux
    • vimtutor
    • CURL 使用指南
  • Nginx
    • 一次 nginx 分享
  • Git
    • Git Commit Message 须知
    • .gitignore 模板
    • git tag标签
  • 摄影
    • 摄影基础知识
    • 手机摄影从小白到大师
  • 翻译
    • log4js
    • log4js-node
    • 介绍GitLab上的CI/CD
    • 为GitLab Pages创建并调整GitLab CI/CD
    • 关于 rel=noopener
    • AngularJS 团队 Git 提交信息约定
    • JSON Schema
  • Lifehack
    • 20 个 Google 搜索 Tips 来高效使用 Google
    • 37 个高级 Google 搜索 Tips
Powered by GitBook
On this page
  • 1. 介绍
  • 1.1 对象兼容
  • 1.2 函数兼容
  • 2. 枚举之间的兼容性
  • 3. 类
  • 4. 泛型

Was this helpful?

  1. TypeScript 语法

类型兼容性

1. 介绍

TypeScript 里的类型兼容性是基于结构子类型的,它与名义类型形成对比。

即结构子类型只要求组成结构一致,而不需要完全的名称相同。

interface Named {
    name: string;
}

class Person {
    name: string;
}

let p: Named;
p = new Person();  // 不会报错

因为 Named 类型和 Person 类型的结构{ name: string }是一致的,但是在基于名义类型的语言中,如 C# 或 Java 中,这段代码会报错,因为 Person 类没有明确说明其实现了 Named 接口。

1.1 对象兼容

如果 x 要兼容 y,那么 y 至少具有与 x 相同的属性

interface Named {
    name: string;
}

let x: Named;

let y = { name:'Alice', location: 'Seattle'};

x = y;

将 y 赋值给 x,目标为 x,此时就会检验,是否 x 中的每个属性,在 y 中都可以找到。只要都能找到,那么赋值就是允许的。

检验函数参数也是同样的

function greet(n: Named) {
    console.log(n);
}

greet(y)

// 只要 Named 中的所有属性,y中都能找到,就可以。
// 至于多余的 location  属性,不会引发错误

这个属性查找的过程是递归的,检查每个成员及子成员。

1.2 函数兼容

1.2.1 参数兼容

let x = (a:number) => 0;
let y = (b:number,s:number) => 0;

x = y;  // 错误,y函数的第二个参数必选,而x不接受
y = x;  // 正确,x函数的每个参数,在y中都能找到对应类型的参数,且索引一致


let x = (a: number) => 0;
let y = (b: string, s: number) => 0;
y = x;  // 错误,x的第一个参数为number,而y函数为string

为什么会允许,将少参数的函数赋值给多参数的函数呢?

因为在JS中忽略额外的参数是很常见的,如 Array#forEach, 三个参数为元素,索引和整个数组:

let items = [1,2,3];

// 符合要求
items.forEach((item,index,arr) => console.log(item));

// 但是最常见的是会省略不用的参数
items.forEach((item) => console.log(item));

1.2.2 返回值兼容

let x = () => ({name: 'Alice'});
let y = () => ({name: 'Alice', location: 'Seattle'});

x = y; // OK

y = x; // Error, because x() lacks a location property
// 要求y中的返回值,x都要能返回. 这与参数兼容不一样

2. 枚举之间的兼容性

枚举类型与数字类型兼容,数字类型与枚举类型兼容. 但是枚举类型之间是不兼容的。

enum Status { Ready, Waiting }
enum Color { Red, Blue, Green };

let status1:number = Status.Ready;   // 数字类型与枚举类型兼容
status1 = Color.Red;    // 错误, 不同枚举类型不兼容

3. 类

类与对象字面量和接口差不多,除了:类有静态部分和实例部分的类型。

比较两个类类型的对象时,只有实例成员会被比较,静态成员和构造函数不在比较范围内。

class Animal {
    feet: number;
    constructor(name: string) {}
}

class Size {
    feet: number;
    constructor(feetNum: number) {}
}

let a: Animal;
let s: Size;

a = s;  // OK 
s = a;  // OK

// 因此对于Animal和Size来说,都有feet属性,而constructor方法虽然不一样,但是不会被比较

4. 泛型

类型参数只影响使用其作为类型一部分的结果类型:

interface Empty<T> {
}
let x: Empty<number>;
let y: Empty<string>;

x = y;  // OK, because y matches structure of x
因为虽然T最终的类型不一样,但是最终的interface并没有使用到T

interface NotEmpty<T> {
    data: T;
}
let x: NotEmpty<number>;
let y: NotEmpty<string>;

x = y;  // Error, because x and y are not compatible
因为T最终的类型不一样,且最终的interface使用到了T,所以会不兼容
Previous类型推论Next高级类型

Last updated 4 years ago

Was this helpful?