css基础快速入门-14伪类first-letter

学生就可以看懂的css基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。

可能比较枯燥，但是再坚持一下，前端知识的大门就会大开了。

tml和css的使用方法以及样式，很好的基础知识系列，内容都是干货知识点，适合收藏下来！

布局步骤

第一步：清除默认样式

第二步：划分模块

第三步：设置模块的大小以及位置

第四步：划分下一级模块

html和css

引入网页头像

css样式表的引入方式

1、外链式

2、嵌入式

3、行内样式

@import url('')

文件命名以及变量命名

命名规范

1、严格区分大小写

2、可以采用字母数字下划线$,数字不开头

3、命名语义化

4、可以采用驼峰命名法

清除默认样式

清楚边距

margin: 0;

padding: 0;

list-style: none;

}

a标签清楚下划线和颜色

color: black;

text-decoration: none;

}

css中颜色的表示方式

css中颜色的表示方式：

1.预定义的颜色【关键字颜色】 red pink blue yellow

2.#6位数的色值 #00-00-00 红绿蓝

3.rgb（红，绿，蓝）：rgb([0-255],[0-255],[0-255])

4.rgba（red，green，blue，透明度）：rgba([0-255],[0-255],[0-255]，[0-1])

0-1: 0全透明，1不透明

html中的标签和属性

html：

标签：

按照语法分类：

1.单标签：只有开始标签

meta img a

2.双标签：有开始标签和结束标签

3.属性的语法

语法：

属性名 = "属性值"

属性名 = "属性值1 属性值2"

注意:

1、标签名和属性名之间要有空格

2、多个属性之间要有空格

3、多个属性值之间要有空格

4.开始标签标签名后有空格

按照标签在页面中的呈现效果分类：

1、行内元素

行内元素定义:在一行内显示，只能设置左右间距，不可以设置上下间距。

举例：span del i em b strong a(title="鼠标移入时显示的文字";target=" "(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开) ...

2、块元素

块元素定义：可以设置宽高，独占一行。

举例：div 标题标签列表标签段落标签 ...

3、行内块元素

行内块元素定义：可以设置宽高，在一行显示。

举例：img 【title="鼠标移入时显示的文字" 】表单控件

元素的转换

块元素： display:block;

行内块元素：display:inline-block;

行内元素： display:inline;

元素的级别

块元素 > 行内块元素 > 行内元素

元素嵌套规范

1、同一级别可以相互嵌套

2、级别高的元素可以嵌套级别低的元素

3、段落标签只能嵌套行内元素

4、a标签不可以嵌套a标签；p不能嵌套p

盒子模型及其问题

四部构成：

1、margin 外间距盒子与盒子之间的距离

2、border 边框

3、padding 内填充（内间距）边框与内容之间的距离。

4、content 内容

margin-top margin-right margin-bottom margin-left

margin: 50px; 上右下左

margin: 50px 100px; 上下左右

margin:0 auto; auto自动

margin: 50px 100px 150px; 上左右下

margin: 50px 100px 150px 200px; 上右下左

border: 1px solid red;

border-top \ border-right \border-bottom \ border-left

border-top-width：上边框的宽度

padding:设置方法同margin

content: ;

width : 数值百分比 auto

height: 数值百分比 auto

盒子模型的问题：

1.大部分元素的margin和padding默认为0，但有一部分的margin和padding不为0，例如body 标题标签（h1-h6）（ul ol il等列表标签）段落标签

2.想领的两个块元素的margin会重合，值会取最大值

3.margin可以为[负数] ，padding不可以设置[负数]。

4.行内元素margin只有左右，没有上下

5.如果（1）发生嵌套关系的元素，（2）父元素没有上边框，（3）上padding ，（4）父元素与子元素之间没有别的内容，此时子元素margin-top就会作用到父元素身上

margin-top的解决方式：

1.用父元素的padding-top代替子元素的margin-top；

2.给父元素添加overflow：hidden；

宽高的设置和计算

height：auto / 百分比 / px；

width：auto / 百分比 / px；

height：auto；参照与父元素

width：auto；参照与内容

box-sizing：border-box；将边框算入盒子内；

一个元素实际的宽高

实际宽度 = border-left + padding-left + width +paddint-right + border-right;

实际高度 = border-top + padding-top + height + padding-bottom + border-bottom;

浮动

作用：让块元素横排排列

样式： float：left；从左往右排列

float：right；从右往左排列

原理：让元素脱离文档流，让元素从文档层浮动到浮动层。

引发的问题：父元素不设置高度，子元素都浮动，浮动的子元素撑不开父元素。（浮动的元素脱离文档流）

*解决方式一：给父元素添加 overflow：hidden；（超出部分隐藏）

*解决方式二：在父元素内容最后添加拥有清除浮动属性的元素。

clear：right/left/both ；别的浮动对它的影响清除掉

例：

.box：after{

content: "";

display:block;

width: 0;

height: 0;

clear:both;

}

*解决方式三：父元素能设置高度的尽量设置高度

浮动之后的块元素参照内容：属性值 auto

定位

定位的元素脱离文档层，到达定位层

定位的元素会多出5个样式：

top right bottom left z-index：999

上右下左层级（层级越高，离用户越近）【只能在有定位属性的元素上才能用】

层级：

z-index：整数；

定位的几种方式：

1.相对定位：

相对于自身来定位，在文档层中保留原来的位置

用法：

position：relative；

2.绝对定位：

相对于最近的定位的祖先元素来定位，完全脱离文档流（其他顶替其位置）

用法：

position：absolute；

+方向值

3.固定定位：

相对于浏览器的四条边，完全脱离文档流

用法：

position：fixed；

top与bottom同时定义，那个样式会作用到元素身上的判断关系：

top的权重比bottom的权重大

left的权重比right的权重大

元素作用时：

1.如果是

position：relative；

left：；

margin：；

先作用margin，在作用relative；

2.如果是

position：absolute；

left：；

margin：；

先作用absolute，在作用margin；

定位元素的居中方式：

方法一：

1.水平居中：

position：absolute；

left：50%；

margin-left：-自身长度的一半；

2.垂直居中：

position：absolute；

top：50%；

margin-top：-自身长度的一半；

3.绝对居中：

position：absolute；

left：50%；

top：50%；

margin-left：-自身长度的一半；

margin-top：-自身长度的一半；

方法二：

1.水平居中：

position：absolute；

left：0；

right：0

2D和3D

2D和3D属性：

1.平移样式

transform:translate(x,y); 向上为负，向下为正

transform:translateX(100px);

transform：rotate（180deg）；（1turn）转一圈

平移 transform:translate（）例子：translate（x，y） translateX（）

旋转 transform:rotate（）例子rotate（180deg）顺时针 -180deg 逆时针

transform：rotate（）空格translate（）；

transform-origin:px px;变换的中心点；

left center；

缩放 transform:scale（）例子：scale（2）放大为原来的2倍 scale（0.n）缩小为原来的0.n scale（m，n） x轴m，y轴n

斜切 transform:skew（）例子：skew（45peg）左拉伸45° skew（45peg，m）

过渡transition
transition：all 0.5s；

全部时间

3.过渡的属性样式： transition-property: ， ;

可以为：属性的全部样式

4.过度的总时间： transition-duration：；

5.过渡的时间函数： transition-timing-function：；

linear（匀速） ease（开头结尾慢，中间快）

cubic-bezier（1，0.07，0.54，0.21）贝塞尔曲线

6.延迟 transition-delay：；

3d效果：和2d的一样transition，transform；

prespective：给父元素加prespective（灭点的值）

prespective-origin：x y；灭点的位置调整观察的角度（大多数情况不设置）

transform：ratate3d（0-1的值,0-1的值,0-1的值,45deg）

transform：ratateY（45deg）

transform：translate3d（0-1，0-1，px）

父元素：transform-style：preserve-3d；

动画

动画规则：

@keyframes 动画名（随便给）{

（动画规则）

from{}

to{}

}

@keyframes 动画名（随便给）{

（动画规则）

0%{}

50%{}

100%{}

}

@keyframes animation1{

from{

background-color:red;

}

to{

background-color:blue;

}

挂载动画:将动画加到元素身上

.元素{

animation：animation1 时间步数时间函数延迟时间次数；

}

挂载多个动画：

.元素{

animation：animation1 时间,animation2 时间,animation1 时间；

其他动画的相同的可以附件通过animation属性；

}

animation的样式

动画名：animation-name

时间： animation-duration

步数：animation-steps：8；

时间函数：animation-timing-function

延迟： animation-delay

动画次数： animation-iteration-count：infinite（无限次）/2；

指定下一次动画是否逆向：animation-direction：alternate（逆向）/ normal（常规）；

最后的状态：animation-fill-mode：backwards（默认（保持一开始的状态））/forwards（保持当前的状态）；

状态即指定动画是否运动： animation-play-state: running（运行）/paused（静止）;

元素分类

按照在页面中的呈现效果：

1.行内元素：在一行内显示，不可以设置宽高：（存放文字）

span a b i strong del

2.行内块元素：在一行内显示，可以设置宽高：（有缝隙不常用）

img 表单控件

3.块元素：可以设置宽高，独占一行

div 标题标签（h1-h6）列表标签（ul-li ol-li dl>dt+dd 段落标签（p pre））

元素嵌套规范：

1.同一级别可以相互嵌套

2.级别高的可以嵌套级别低的元素

3.p标签只能嵌套行内元素

4.a链接不能相互嵌套

元素的转换：

1.块元素：display：block；

2.行内块元素：display：inline-block；

3.行内元素：display：inline；

背景图片以及浏览器内核

背景图

先设大小，在引background；

background: url('路径') no-repeat left bottom/contain；

//图片位置禁止重复位置（top bottom left right）

路径：background-image：url（“”），url（“”）；加载多张背景图
背景图大小： background-size：100px auto，100px auto；会重复
背景的图重复：

4. background-repeat：no-repeat，repeat；（无重复）

5. background-repeat：repeat-x（x方向重复）

background-repeat：repeat-y（y方向重复）

背景图的位置：

background-position：x y；（数值方位值（top/bottom left/rightcenter（可以省略）））

背景开始渲染的位置： background-origin: ;

8. padding-box；（默认）从padding位置开始渲染

9. border-box；从边框的位置开始渲染

content-box；从内容的位置开始渲染

图片结束渲染的位置：background-clip: ;

11. padding-box；（默认）从padding位置结束渲染

12. border-box；从边框的位置结束渲染

content-box；从内容的位置结束渲染

使得背景图加载到浏览器中
background-attachment: fixed;

8.可以简写：

background：空格隔开；

背景图渐变
background: linear-gradiend(top，颜色1，颜色2，颜色n)

//渐变开始的方向（默认top）类似25deg（25度）

10.浏览器内核//背景色渐变

1. /* 标准语法 */

例子：background: linear-gradient(top,#3bbcff,#47eaff);

2. /* 谷歌内核 -webkit- */

例子：background: -webkit-linear-gradient(top,#3bbcff,#47eaff);

3. /* 火狐内核 -moz- */

例子：background: -moz-linear-gradient(top,#3bbcff,#47eaff);

4. /* 欧鹏内核 -o- */

例子：background: -o-linear-gradient(top,#3bbcff,#47eaff);

5. /* IE内核 -ms- */

例子：background: -ms-linear-gradient(top,#3bbcff,#47eaff);

文件的读取方法路径

绝对路径：从盘符开始的一条完整路径

相对路径：两个文件的位置关系

边框的相关属性【圆角，边框形状】

border-radius：边框的半径设置圆角 n%或者num像素

border-style:dotted solid double dashed;

上边框是点状

右边框是实线

下边框是双线

左边框是虚线

透明度

透明性的选择：（整个容器都变）

opacity：；0-1之间的值；

字体

font-family =“ 字体” //字体样式可以被继承

鼠标移入样式

span标签

cursor：pointer；鼠标样式：手型

阴影

box-shadow：x轴偏移量 y轴偏移量阴影的模糊程度阴影的大小（0和本身一样大小）阴影的颜色；

引入字符图标

引入字符图标：

行内元素随意

span class=“iconfont 图标类名”

可调节样式：同文字

文档流

文档流：

标准情况下，页面元素从左往右从上往下依次排列

flex布局(规范的设计稿)-弹性布局

容器（父元素）的属性：【display:flex;】

*flex-direction: 决定主轴方向。

row 主轴在水平方向，从左向右（默认）。

row-reverse 主轴在水平方向，从右向左

column 主轴在垂直方向，从上到下

column-reverse 主轴在垂直方向，从下到上

*flex-wrap: 决定项目换行

wrap: 项目换行

nowrap: 项目不换行（默认值）

wrap-reverse：项目换行且反转

*justify-content: 决定项目在主轴的对齐方式

flex-start;主轴的起点

flex-end;主轴的终点

center;主轴的中心

space-between;两端对齐

space-around;项目两侧距离相等

*align-items：项目在交叉轴上的对齐方式（适用于一根轴线与多跟轴线）

flex-start:交叉轴的起点

flex-end：交叉轴的终点

Center：交叉轴的中心

baseline：基线对齐（文本底部）

*align-content:定义项目在交叉轴上的对齐方式（仅适用于多根轴线）

flex-start;交叉轴的起点

flex-end;交叉轴的终点

center;交叉轴的中心

space-between;两端对齐

space-around;两侧距离相等

子元素（项目）的属性：

*order：定义项目的排列顺序，数值越小，越靠前，默认值为0（可以取负值）。

*flex-grow:定义项目的放大比例。默认值为0，即使存在剩余空间，也不放大。

*flex-shrik：定义项目的缩小比例，默认值为1，空间不足，项目缩小;值为0时,空间不足,项目也不缩小.

*flex-basis: 定义项目占据的主轴空间.默认auto或者自己添加像素;

*align-self:定义单个项目在交叉轴的对齐方式.

flex-start:交叉轴的起点

flex-end：交叉轴的终点

Center：交叉轴的中心

滚动条

overflow-x：auto；超出部分在x轴的表现形式。

auto：自动；（如果超出，就自动以滚动条的形式显示）

去滚动条：加在具有overflow属性的元素身上

::-webkit-scrollbar{

height：0；

}

值描述测试

visible 不裁剪内容，可能会显示在内容框之外。测试

hidden 裁剪内容 - 不提供滚动机制。测试

scroll 裁剪内容 - 提供滚动机制。测试

auto 如果溢出框，则应该提供滚动机制。测试

no-display 如果内容不适合内容框，则删除整个框。测试

no-content 如果内容不适合内容框，则隐藏整个内容。测试

轮播图

swiper(.js).com

表格

[行] [列]

table身上的属性

table身上的属性：

border：表格边框 cellspacing：单元格间的间距

cellpadding：单元格的内容与其边框的内边距

bgcolor：表格的背景颜色 background：表格的背景图片

width：表格宽度 height：表格高度

border-collaspe：collaspe：边框合并，不叠加 cellspacing：0：边框合并，但合并之后的边框宽度等于前两个边框宽度之和

caption：表格标题

background:表格背景图

cellspacing:单元格之间的间隙宽度

align:表格的水平对齐方式，通常是left，center，right

表格的标题

单元格【tr】【td】

width：单元格宽度height：单元格高度

align：单元格内文本的对齐方式,通常是左，中，右 left，center，right

valign：单元格内文本的对齐方式,通常是上，中，下 top，middle，bottom

nowrap：在为设置单元格宽度时，当文本长度宽于单元格宽度，将要换行时，该标签会使其不换行

<td align="center" nowrap>手机空中免费充值</td>

</tr>

表格的跨行与跨列【td】

rowspan：跨行标签，表示跨了多少行

colspan：跨列标签，表示跨了多少列

表格标签拓展及其属性

thead：定义表格的表头。

tbody：定义表格主体（正文）。

tfoot：定义表格的页脚（脚注或表注）。

colgroup：标签用于对表格中的列进行组合，以便对其进行格式化。

注意：不管thead、tbody、tfoot的代码先后顺序如何，html显示时，始终是先显示thead，再显示tbody，最后显示tfoot。

1、<thead> 内部必须拥有 <tr> 标签！

2、<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。

3、<tbody> 元素内部必须包含一个或者多个 <tr> 标签。

4、必须在 table 元素内部使用这些标签。

5、当不同行间的单元格合并时各单元格所在的行不要加tbody标签。

标题栏

《tr》<th></th>《/tr》用法和td相似知识自动将单元格内容以粗体显示

表单控件表单标签

action:表单信息提交的位置；

method：提交的方式

get：地址栏，信息量少，安全性低

post：信息量多，比较安全

1.输入文本【输入框】：

用户名：<input type="text" placeholder="请输入用户名" maxlength="10" value=" " name="username" class="">

placeholder：默认提示文本;

maxlength:规定输入的最大字符数

name:本文本框的名字，与后台进行数据交互用

class:定义本文本框的样式，相当于盒子

placeholder下的缩进

text-indent：2em；缩进

2.输入密码【密码框】：

密码：<input type="password" placeholder="请输入密码" maxlength="10" value=" " name="psw" class="">

3.单选按钮[name的值必须相同]：

请选择你的性别：

<label for="man"> [label实现点什么就选中，for中的值和id中的值相同]

男：<input type="radio" name="sex" id="man" checked> //checked默认选项

</label>

女：<input type="radio" name="sex" id="woman">

</label>

4.多选按钮[name的值必须相同]：

请选择你喜欢的音乐：

摇滚：<input type="checkbox" checked>

5.下拉列表【下拉框】：

选择你的学历：

</select>

6.上传文件：

选择你的照片：

7.留言文本空间：

</textarea>

8.用户是否允许重新设置textarea大小css属性：

resize: none/both/vertical/horizontal;不允许/上下允许拖动/只能在垂直方向拖动/只能在水平方向拖动

9.重置按钮：

10.提交按钮：

11.自定义按钮：

12.颜色：

13.时间日期：

年月：<input type="month">

年周：<input type="week">

时分：<input type="time">

年月日：<input type="date">

年月时分：<input type="datetime-local">

14.验证

<input type="email"> 邮箱验证

<input type="tel" autofocus> 电话

15. autofocus 自动获取焦点

</form>

文本模型

文本换行

使非中日韩文本换行

word-break: break-all ;

文本禁止换行

white-space:nowrap;

单行文本溢出部分以省略号显示

overflow: hidden;(放文本的容器)

text-overflow: ellipsis;

多行文本溢出

指定为弹性盒子
display: -webkit-box;
在弹性盒模型中指定元素的排列顺序
-webkit-box-orient: vertical;
指定文本显示（溢出）的行数;
-webkit-line-clamp: 3;
height要是line-height的倍数
line-height: 70px;
overflow：hidden；

音频视频标签

音频标签

controls 空间向用户显示：

loop 循环播放

autoplay当前页面加载完自动播放

视频标签

H5语义化标签

<section>页面中的某一部分</section>

meta标记【签】

name="关键字" cantent="内容"

<mate http-equiv="Refresh" content="10";url="跳转路径"> //每10s刷新一次并且跳转到跳转路径知识的文件

bgsound标签

body属性

bgcolor:背景颜色
background：背景图片
text：文档中文字的颜色
link：超链接的颜色
alink：正在访问的超链接的颜色
vlink：已访问过的超链接的颜色
leftmargin/rightmargin/topmargin/bottommargin：左/右/上/下边距的像素值

对文字操作的标签

<p></p>开始一个新段落，可单可双
换行标签，单独标记
<pre></pre>预格式化【敲什么样式，显示什么样式】
<font></font> 用来设置文字的字体大小颜色粗细等
文字样式标记[均成对出现]
b 粗体 i 斜体 u 下划线 tt 等宽
sup 上标体 sub 下表体 strike 删除线 big 大号字样
small 小号字样 blink 闪烁字样 em强调字样 strong着重字样 cite引用字样

列表标签

符号列表
<ul type="circlr(空心圆点)/disc（实心圆点）【默认】/square（实心方块）">

2. <li>

<li>

</ul>

排序列表
<ol type="1(数字) /a（a，b，c..）/ A(A,B,C...)/ i(i,ii,iii,...)/ I(I,II,III,...)">

4. <li>

<li>

</ol>

a标签

<a href="路径 " title="鼠标移入时显示的文字" target=" "(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开；_parent:在当前窗口的父窗口打开链接；_top:在整个浏览器窗口打开) ...

[字符实体]常用的转义字符

显示结果描述实体名称

空格

< 小于号

大于号

& 和号

" 引号

' 撇号 (IE不支持)

￠分（cent）

£ 镑（pound）

¥ 元（yen）

€ 欧元（euro）

§ 小节

® 注册商标

™ 商标

× 乘号

÷ 除号

选择器

分类

css选择器

1.通用选择器：

*｛｝//选择所有的标签

2.群组选择器：

E1,E2,E3..｛｝//选择E1 E2 E3

3.标签选择器

标签名｛｝

4.类名选择器：

.类名｛｝

5.后代选择器

.E1 .E2｛｝ //选择E1 的后代E2

6.交叉选择器

标签名.类名｛｝

7.id选择器

例如创建id

#id名｛｝ //选择页面中id为**的标签

8.伪类选择器：

鼠标移入状态

E：hover{ } E元素选择鼠标移入状态

E：hover .子类{ } 选择e元素下鼠标移入时子类的变化

获取焦点，用于表单的输入

E: focus{

outline: none;

}

9.伪结构选择器：

E：first-child｛｝作为子元素的第一个孩子的E标签

E：last-child｛｝作为子元素的最后第一个孩子的E标签

E: nth-child(n){} //作为子元素的第n个孩子的E标签

E: nth-last-child(n) 作为子元素的倒数第n个孩子的E标签

E：first-of-type｛｝作为子元素的同类型的第一元素

E：last-of-type｛｝作为子元素的同类型中的最后一个元素

E: nth-of-type（n）作为子元素的同类型中的第n个元素

E: nth-last-of-type(n) 作为子元素的同类型中的倒数第n个元素

（n）n可以以为num/even（偶数）/odd(奇数)/3n（3的倍数）

例子：5.15/伪结构选择器

10.伪元素选择器：

::after{} 在元素之后加入一个

::before{

content：“内容之前”；

color：；

} 在元素之前

属于行内元素

::after{} ::before{}伪元素 content：""；样式必须写

11.子类选择器

相邻兄弟选择器

E1+E2｛｝选择E1的下一个兄弟元素E2（不能选中上一个兄弟元素）

div.box>a+img a和img统计

子类选择器

E1>E2{} 选择E1的子类元素E2

例子：div.box>div.item{$}*20

div.box>a>img

12.属性选择器

[属性名]{} 选择所有拥有属性为属性名的元素

[属性名=“value”]｛｝选择拥有属性名的属性且属性值为value

E[属性名=“value”]{} 选择拥有属性名的属性且属性值为value的E元素

E[属性名~=“value”]{} 选择拥有属性名的属性并且属性值一个或者多个，其中一个属性值为value的E元素

E[value^=“1”]{} 选择拥有 value的属性并且属性值一个或者多个，其中一个属性值以 1 开头的E元素

E[value$=“1”]{} 选择拥有 value的属性并且属性值一个或者多个，其中一个属性值以 1 结尾的E元素

E[value*=“1”]{} 选择拥有 value的属性并且属性值一个或者多个，其中一个属性值包含 1 的E元素

例子：属性选择器

选择器的优先级

宗旨：越具体的优先级越高

id (100 ) > class( 10 )> 标签名( 1)

.box .son{ } 10+10=20

abcde优先级（e为个位）：

a:行内样式

b:id选择器

c:类名选择器伪类选择器（：hover）属性选择器

d:标签选择器伪元素选择器（：：after）

e:通用选择器有一个

选择有中有一个abcde在其位置+1

移动端布局步骤

修改视口
<meta name="viewport" content="width=device-width">

视口：视觉视口，布局视口，理想视口

em:当前字体的倍率 100px=10em

rem：html字体的倍率

移动端窗口 375*667

html{

font-size：0.5rem；

}

.box{

width： 750rem； //375px=750rem*0.5px ； 100px=1rem

height： 1334rem；

}

引入rem.js
<script src="路径"></script>
修改rem.js中设计稿的宽度
100px=1rem

我是一名前端开发程序员，自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴
前端资料获取方式：
1.在你手机的右上角有【关注】选项，点击关注！
2.关注后，手机客户端点击我的主页面，右上角有私信，请私信回复：【学习】
电脑已经设置好了关键词自动回复，所以回复的时候请注意关键词哟~

avaScript 是一门弱类型语言，它对类型是弱校验，正因为这个特点，所以才有了TypeScript这个强类型语言系统的出现，来弥补类型检查的短板。TypeScript在实现类型强校验的同时，还要满足 JavaScript 灵活的特点，所以就有了类型兼容性这个概念。了解类型兼容性可以避免在实际的开发中出现一些低级错误。下面就来看看类型兼容性的概念和分类。

1、类型兼容性的概念

所谓的类型兼容性 用于确定一个类型是否能赋值给其他类型 。TypeScript中的类型兼容性是 基于结构类型 的，结构类型是一种只使用其成员来描述类型的方式。其基本原则是， 如果 x 要兼容 y，那么 y 至少要具有与 x 相同的属性。

下面来看一个例子，构建一个 Teacher 类，然后声明一个接口 Student，Student 的属性 Teacher 都有，而且还多了其他的属性，这种情况下 Student 就兼容了 Teacher：

<pre class="prettyprint hljs cs" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">class Teacher {
    constructor(public weight: number, public name: string, public job: string) {

    }
}
interface Student {
    name: string
    weight: number
}
let x: Student;
x = new Teacher(120, 'TS', 'teacher') // :white_check_mark:</pre>

如果反过来，Teacher 并没有兼容 Student，因为 Student 的属性比 Person 少一个。

2、特殊类型的类型兼容性

先来看看 TypeScript 中一些特殊类型的类型兼容性。

（1）any

any 类型可以赋值给除了 never 之外的任意其他类型，反过来其他类型也可以赋值给 any。也就是说 any 可以兼容除了 never 之外的所有类型，同时也可以被所有的类型兼容。

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let any: any;
let a: number = any;       // :white_check_mark:
let b: {} = any;           // :white_check_mark:
let b: () => number = any; // :white_check_mark:</pre>

（2）never

never 类型可以赋值给任何其他类型，但不能被其他任何类型赋值。

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let never: never = (() => {
  throw Error('never');
})();

let a: number = never;       // :white_check_mark:
let b: () => number = never; // :white_check_mark:
let c: {} = never;           // :white_check_mark:</pre>

可以看到，这里将 never 类型赋值给了 number、函数、对象类型，都是没有问题的。

（3）unknown

unknown 和 never 的特性是相反的，即不能把 unknown 赋值给除了 any 之外的任何其他类型，但其他类型都可以赋值给 unknown。

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let unknown: unknown;
const a: number = unknown;       // 不能将类型“unknown”分配给类型“number”。
const b: () => number = unknown; // 不能将类型“unknown”分配给类型“() => number”。
const c: {} = unknown;           // 不能将类型“unknown”分配给类型“{}”。</pre>

可以看到，当把 unknown 类型赋值给 number、函数、对象类型时，都报错了，这就是因为类型之间不能兼容。

3、函数类型的类型兼容性

函数的类型兼容性主要包括以下六个方面：

（1）参数数量

函数参数数量要想兼容，需要满足一个要求：如果将函数 y 赋值为 x，那么要求 x 中的每个参数都应在 y 中有对应，也就是 x 的参数个数小于等于 y 的参数个数：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let x = (a: number) => 0;
let y = (b: number, c: string) => 0;</pre>

上面定义的两个函数，如果进行赋值的话，来看下两种情况的结果：

<pre class="prettyprint hljs ini" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">y = x;  // :white_check_mark:</pre>

将 x 赋值给 y 是可以的，因为 x 的参数个数小于等于 y 的参数个数，而至于参数名是否相同是无所谓的。

而将 y 赋值给 x 就不可以了：

<pre class="prettyprint hljs ini" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">x = y; // 不能将类型“(b: number, c: string) => number”分配给类型“(a: number) => number”。</pre>

这里 y 的参数个数要大于 x，所以报错了。

（2）函数参数类型

除了参数数量，参数的类型也需要对应：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let x = (a: number) => 0;
let y = (b: string) => 0;
x = y; // error 不能将类型“(b: string) => number”分配给类型“(a: number) => number”。</pre>

可以看到，x 和 y 两个函数的参数个数和返回值都相同，只是参数类型对不上，所以也是不行的。

（3）剩余参数和可选参数

当要被赋值的函数参数中包含剩余参数（…args）时，赋值的函数可以用任意个数参数代替，但是类型需要对应：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">const getNum = (
  arr: number[],
  callback: (...args: number[]) => number
): number => {
  return callback(...arr);
};
getNum(
  [1, 2],
  (...args: number[]): number => args.length // 返回参数的个数
);</pre>

剩余参数其实可以看做无数个可选参数，所以在兼容性方面是差不多的。

再来看一个可选参数和剩余参数结合的例子：

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">// 第二个参数callback是一个函数，函数的第二个参数为可选参数
const getNum = (
  arr: number[],
  callback: (arg1: number, arg2?: number) => number 
): number => {
  return callback(...arr); // error 应有 1-2 个参数，但获得的数量大于等于 0
};</pre>

这里因为 arr 可能为空数组，如果为空数组则…arr不会给callback传入任何实际参数，所以这里就会报错。如果换成return callback(arr[0], …arr)就没问题了。

（4）参数双向协变

函数参数双向协变即参数类型无需绝对相同：

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let funcA = function(arg: number | string): void {};
let funcB = function(arg: number): void {};
// funcA = funcB 和 funcB = funcA都可以</pre>

这里 funcA 和 funcB 的参数类型并不完全一样，funcA 的参数类型为一个联合类型 number | string，而 funcB 的参数类型为 number | string 中的 number，这两个函数也是兼容的。

（5）返回值类型

函数返回值的类型也是要对应的：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">let x = (a: number): string | number => 0;
let y = (b: number) => "a";
let z = (c: number) => false;
x = y; // :white_check_mark:
x = z; // 不能将类型“(c: number) => boolean”分配给类型“(a: number) => string | number”</pre>

这里 x 函数的返回值是联合类型，既可以是 string 类型也可以是 number 类型。而 y 的返回值类型是 number 类型，参数个数和类型也没问题，所以可以赋值给 x。而 z 的返回值类型 false 并不是 string 也不是 number，所以不能赋值。

（6）函数重载

带有重载的函数，要求被赋值的函数的每个重载都能在用来赋值的函数上找到对应的签名：

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">function merge(arg1: number, arg2: number): number; // merge函数重载的一部分
function merge(arg1: string, arg2: string): string; // merge函数重载的一部分
function merge(arg1: any, arg2: any) { // merge函数实体
  return arg1 + arg2;
}
function sum(arg1: number, arg2: number): number; // sum函数重载的一部分
function sum(arg1: any, arg2: any): any { // sum函数实体
  return arg1 + arg2;
}
let func = merge;
func = sum; // error 不能将类型“(arg1: number, arg2: number) => number”分配给类型“{ (arg1: number, arg2: number): number; (arg1: string, arg2: string): string; }”</pre>

sum 函数的重载缺少参数都为string返回值为string的情况，与merge函数不兼容，所以赋值时就会报错。

4、枚举的类型兼容性

数字枚举成员类型与数字类型是互相兼容的：

<pre class="prettyprint hljs cmake" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">enum Status {
  On,
  Off
}
let s = Status.On;
s = 1;
s = 3;</pre>

虽然 Status.On 的值是 0，但是因为数字枚举成员类型和数值类型是互相兼容的，所以这里给s赋值为 3 是没问题的。但是不同枚举值之间是不兼容的：

<pre class="prettyprint hljs thrift" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">enum Status {
  On,
  Off
}
enum Color {
  White,
  Black
}
let s = Status.On;
s = Color.White; // 不能将类型“Color.White”分配给类型“Status”。</pre>

虽然 Status.On 和 Color.White 的值都是 0，但它们是不兼容的。

字符串枚举成员类型和字符串类型是不兼容的：

<pre class="prettyprint hljs rust" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">enum Status {
  On = 'on',
  Off = 'off'
}
let s = Status.On
s = 'TypeScript' // 不能将类型"TypeScript"分配给类型“Status”</pre>

这里会报错，因为字符串字面量类型'TypeScript'和Status.On是不兼容的。

5、类类型的类型兼容性

比较两个类的类型兼容性时，只有实例成员和方法会相比较，类的静态成员和构造函数不进行比较：

<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">class Animal {
  static age: number;
  constructor(public name: string) {}
}
class People {
  static age: string;
  constructor(public name: string) {}
}
class Food {
  constructor(public name: number) {}
}
let a: Animal;
let p: People;
let f: Food;
a = p; // ok
a = f; // 不能将类型“Food”分配给类型“Animal”。</pre>

Animal类和People类都有一个age静态属性，它们都定义了实例属性name，类型是string。把类型为People的p赋值给类型为Animal的a是没有问题的，因为类类型比较兼容性时，只比较实例的成员，这两个变量虽然类型是不同的类类型，但是它们都有相同字段和类型的实例属性name，而类的静态成员是不影响兼容性的，所以它俩时兼容的。而类Food定义了一个实例属性name，类型为number，所以类型为Food的f与类型为Animal的a类型是不兼容的，不能赋值。

类的私有成员和受保护成员：

类的私有成员和受保护成员会影响类的兼容性。当检查类的实例兼容性时，如果目标（要被赋值的那个值）类型（这里实例类型就是创建它的类）包含一个私有成员，那么源（用来赋值的值）类型必须包含来自同一个类的这个私有成员，这就允许子类赋值给父类：

<pre class="prettyprint hljs scala" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">class Parent {
  private age: number;
  constructor() {}
}
class Children extends Parent {
  constructor() {
    super();
  }
}
class Other {
  private age: number;
  constructor() {}
}
const children: Parent = new Children();
const other: Parent = new Other(); // 不能将类型“Other”分配给类型“Parent”。类型具有私有属性“age”的单独声明</pre>

当指定 other 为 Parent 类类型，给 other 赋值 Other 创建的实例的时候，会报错。因为 Parent 的 age 属性是私有成员，外面是无法访问到的，所以会类型不兼容。而children的类型我们指定为了Parent类类型，然后给它赋值为Children类的实例，没有问题，是因为Children类继承Parent类，且实例属性没有差异，Parent类有私有属性age，但是因为Children类继承了Parent类，所以可以赋值。

同样，使用 protected 受保护修饰符修饰的属性，也是一样的：

<pre class="prettyprint hljs scala" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">class Parent {
  protected age: number;
  constructor() {}
}
class Children extends Parent {
  constructor() {
    super();
  }
}
class Other {
  protected age: number;
  constructor() {}
}

const children: Parent = new Children();
const other: Parent = new Other(); // 不能将类型“Other”分配给类型“Parent”。属性“age”受保护，但类型“Other”并不是从“Parent”派生的类</pre>

6、泛型类型兼容性

泛型中包含类型参数，这个类型参数可能是任何类型，使用时类型参数会被指定为特定的类型，而这个类型只影响使用了类型参数的部分：

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">interface Data<T> {}
let data1: Data<number>;
let data2: Data<string>;
data1 = data2; // :white_check_mark:</pre>

data1 和 data2 都是 Data 接口的实现，但是指定的泛型参数的类型不同，TS 是结构性类型系统，所以上面将 data2 赋值给 data1 是兼容的，因为 data2 指定了类型参数为 string 类型，但是接口里没有用到参数 T，所以传入 string 类型还是传入 number 类型并没有影响。

再来看个例子：

<pre class="prettyprint hljs powershell" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">interface Data<T> {
  data: T;
}
let data1: Data<number>;
let data2: Data<string>;
data1 = data2; // 不能将类型“Data<string>”分配给类型“Data<number>”。不能将类型“string”分配给类型“number”</pre>

现在结果就不一样了，赋值时报错，因为 data1 和 data2 传入的泛型参数类型不同，生成的结果结构是不兼容的。

来源： https://www.51cto.com/article/716838.html

在线咨询

上一篇：“图片滑动样式”修改HTML教程
下一篇：最受欢迎的 CSS 类名和 ID 分别是什么

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

css基础快速入门-14伪类first-letter

1、类型兼容性的概念

2、特殊类型的类型兼容性

（1）any

（2）never

（3）unknown

3、函数类型的类型兼容性

（1）参数数量

（2）函数参数类型

（3）剩余参数和可选参数

（4）参数双向协变

（5）返回值类型

（6）函数重载

4、枚举的类型兼容性

5、类类型的类型兼容性

类的私有成员和受保护成员：

6、泛型类型兼容性

您的项目需求