TypeScript基础详细介绍(2)

梦里梦外; 2023-10-13 15:46 12阅读 0赞

# 4.TypeScript 高级类型 #

![在这里插入图片描述][fadcc2b99eb746788e716e09b53da180.png]

## 4.1 class 类 ##

类继承的两种方式：1 extends（继承父类） 2 implements（实现接口）。

类成员可见性：可以使用 TS 来控制 class 的方法或属性对于 class 外的代码是否可见。  
public  
protected  
private  
readonly  
![在这里插入图片描述][de9686cb505f4e22a34375701357bec5.png]  
![在这里插入图片描述][d24249bd39064925aa53f3ec10a12fc4.png]  
![在这里插入图片描述][2b7c844252284247b5c5047c701c88fc.png]  
![在这里插入图片描述][f96d0f64abf643629b172e63e8840f8b.png]  
![在这里插入图片描述][a70aed34a2d94599b28a18c3fac96332.png]  
![在这里插入图片描述][772b91a2fdbe4a60abd8e4432dfbaef9.png]  
![在这里插入图片描述][0ced2d3b23be43dcaae02bcb2b809d32.png]  
![在这里插入图片描述][3af2b79326004d3fa7c825a4d265c4f4.png]  
![在这里插入图片描述][d3855d20b4634b66a80416e899234a5e.png]  
![在这里插入图片描述][31b6534cf33e459a8525f9e4619eb34c.png]

## 4.2 类型兼容性 ##

![在这里插入图片描述][09a2d2c9a5054070a5760729da7271c1.png]  
![在这里插入图片描述][c61e82a99ca04d2ab5ecea6b23359246.png]

![在这里插入图片描述][8481761cbda947458d8ee50a7b42f7da.png]

![在这里插入图片描述][2bc06694375244fc8fb216f61a77df11.png]

![在这里插入图片描述][b1a07ec6526a4899bd351cd75d688930.png]  
![在这里插入图片描述][4d243eddd0e0423baa8ad6cb58fb8099.png]

![在这里插入图片描述][2f78b88d9fe14ba98937b1ca35115cd2.png]

## 4.3 交叉类型 ##

![在这里插入图片描述][3a239bd496784558ac9896c90b7fbe71.png]  
![在这里插入图片描述][8b81dbe5e5fc47e0a52ee294ae7cf6cb.png]

## 4.4 泛型 ##

![在这里插入图片描述][7aa086afb30144cca5a9ac57afe9249f.png]

![在这里插入图片描述][04dfdf8aa8a144e18bee0b84a4548223.png]

![在这里插入图片描述][e5e3bd61984a43cc94376882d8e989f8.png]

![在这里插入图片描述][7cf860d1fb1644b3b8cde00fe0870185.png]

![在这里插入图片描述][24f9ca1ef12641abb3a679b4d229bcca.png]

![在这里插入图片描述][816afbaa127349de90ba29d3c6579595.png]

![在这里插入图片描述][781a65d441fb45d3b44cac7923c03c2c.png]

![在这里插入图片描述][d8f36ca8584b4f988e8461c16b886247.png]  
![在这里插入图片描述][14d8cba2c5624a84ad84cbf0d863d634.png]  
![在这里插入图片描述][713b021f22d54f659fa4f0e0e229a046.png]

![在这里插入图片描述][a9160b99854d4aba86b92ae713ec2f77.png]  
![在这里插入图片描述][0648b716867f4c79a63be82ac53c5af6.png]  
![在这里插入图片描述][a23218799e82439d898b2d2a8881f0bb.png]  
![在这里插入图片描述][5c4877c97e79410398f2bb01a991c56d.png]  
![在这里插入图片描述][aadbb927b2514dac9421591c3e1b5495.png]  
![在这里插入图片描述][57daf7a797b843d3a68326dc9d3b81a5.png]  
![在这里插入图片描述][249a9757ab4749cba41c2378f9abeb08.png]

## 4.5 索引签名类型 ##

![在这里插入图片描述][b935dd2b649c4d76a2786187b8b3dccb.png]

![在这里插入图片描述][7ec2b6e2f26544a0a335401ad5ab5de2.png]

## 4.6 映射类型 ##

![在这里插入图片描述][868c6b3596994d7eb62fc6e749e22eb3.png]  
![在这里插入图片描述][a9df80cc6cd24fcf96a0bd40d894e05f.png]

![在这里插入图片描述][34c68348a8f24cbb929610ffde4697e0.png]

![在这里插入图片描述][23245f840e4a4c15ac70110b6703d3d6.png]

![在这里插入图片描述][613b1d39622a4676a323ba764affe215.png]

# 5. TypeScript 类型声明文件 #

![在这里插入图片描述][f0cca909fa954e8cb3e4b70d1c050c73.png]

## 5.1 TS 中的两种文件类型 ##

![在这里插入图片描述][1e8d1e7901114ac09136ae7c992bce72.png]

## 5.2 类型声明文件的使用说明 ##

![在这里插入图片描述][fb455989403d4cb2b4b9f3086567bcda.png]

![在这里插入图片描述][911d5a6a200b4bc988083c340b9e9e10.png]  
![在这里插入图片描述][ca660339d3d74b35b78eca78faf2804f.png]

![在这里插入图片描述][480252310c9d455fb903c25827afe60c.png]

![在这里插入图片描述][2f1ab753333c4acdb169a2b81982a438.png]

![在这里插入图片描述][34b29b1d4b1e4d07a848dd25fdd1a6f3.png]

![在这里插入图片描述][bfb2613422824bf395e97792b7850947.png]

# 6. 在 React 中使用 TypeScript #

![在这里插入图片描述][a9c49ab177ef4f008ac305c50cd8bd2c.png]

## 6.1 使用 CRA 创建支持 TS 的项目 ##

![在这里插入图片描述][8f6382a81c1c47dba8fda14461ac7441.png]

![在这里插入图片描述][fc804b751e27416884a36ae524fce9ce.png]

![在这里插入图片描述][d5fbd2c701974865b6c87160a20d834c.png]

## 6.2 TS 配置文件 tsconfig.json ##

![在这里插入图片描述][144fa66a9d924ff48586059af515c275.png]

![在这里插入图片描述][8fc53110ccd24f6f994556ab6776045a.png]

## 6.3 React 中的常用类型 ##

![在这里插入图片描述][f3df0ec5b57744959183cd15a7e6e0da.png]

![在这里插入图片描述][77ce4f73fbb8451c8fc3b36c26692416.png]

![在这里插入图片描述][bb492b3e07564fc983e0f934d04cf378.png]

![在这里插入图片描述][ea4c0b36cc09467784b818b12fc18303.png]  
![在这里插入图片描述][98f66cca4ba8478aa4bfe0dcf4eb3007.png]  
![在这里插入图片描述][443f682f2cf84aee99afd774bdeea636.png]  
![在这里插入图片描述][8d946bb7a1d54d2eaf4f2956838b583a.png]  
![在这里插入图片描述][90db054b72d94d1586f08e484e21b3d1.png]  
![在这里插入图片描述][be8e58b594184e089658a4044bcfc288.png]

[fadcc2b99eb746788e716e09b53da180.png]: https://img-blog.csdnimg.cn/fadcc2b99eb746788e716e09b53da180.png
[de9686cb505f4e22a34375701357bec5.png]: https://img-blog.csdnimg.cn/de9686cb505f4e22a34375701357bec5.png
[d24249bd39064925aa53f3ec10a12fc4.png]: https://img-blog.csdnimg.cn/d24249bd39064925aa53f3ec10a12fc4.png
[2b7c844252284247b5c5047c701c88fc.png]: https://img-blog.csdnimg.cn/2b7c844252284247b5c5047c701c88fc.png
[f96d0f64abf643629b172e63e8840f8b.png]: https://img-blog.csdnimg.cn/f96d0f64abf643629b172e63e8840f8b.png
[a70aed34a2d94599b28a18c3fac96332.png]: https://img-blog.csdnimg.cn/a70aed34a2d94599b28a18c3fac96332.png
[772b91a2fdbe4a60abd8e4432dfbaef9.png]: https://img-blog.csdnimg.cn/772b91a2fdbe4a60abd8e4432dfbaef9.png
[0ced2d3b23be43dcaae02bcb2b809d32.png]: https://img-blog.csdnimg.cn/0ced2d3b23be43dcaae02bcb2b809d32.png
[3af2b79326004d3fa7c825a4d265c4f4.png]: https://img-blog.csdnimg.cn/3af2b79326004d3fa7c825a4d265c4f4.png
[d3855d20b4634b66a80416e899234a5e.png]: https://img-blog.csdnimg.cn/d3855d20b4634b66a80416e899234a5e.png
[31b6534cf33e459a8525f9e4619eb34c.png]: https://img-blog.csdnimg.cn/31b6534cf33e459a8525f9e4619eb34c.png
[09a2d2c9a5054070a5760729da7271c1.png]: https://img-blog.csdnimg.cn/09a2d2c9a5054070a5760729da7271c1.png
[c61e82a99ca04d2ab5ecea6b23359246.png]: https://img-blog.csdnimg.cn/c61e82a99ca04d2ab5ecea6b23359246.png
[8481761cbda947458d8ee50a7b42f7da.png]: https://img-blog.csdnimg.cn/8481761cbda947458d8ee50a7b42f7da.png
[2bc06694375244fc8fb216f61a77df11.png]: https://img-blog.csdnimg.cn/2bc06694375244fc8fb216f61a77df11.png
[b1a07ec6526a4899bd351cd75d688930.png]: https://img-blog.csdnimg.cn/b1a07ec6526a4899bd351cd75d688930.png
[4d243eddd0e0423baa8ad6cb58fb8099.png]: https://img-blog.csdnimg.cn/4d243eddd0e0423baa8ad6cb58fb8099.png
[2f78b88d9fe14ba98937b1ca35115cd2.png]: https://img-blog.csdnimg.cn/2f78b88d9fe14ba98937b1ca35115cd2.png
[3a239bd496784558ac9896c90b7fbe71.png]: https://img-blog.csdnimg.cn/3a239bd496784558ac9896c90b7fbe71.png
[8b81dbe5e5fc47e0a52ee294ae7cf6cb.png]: https://img-blog.csdnimg.cn/8b81dbe5e5fc47e0a52ee294ae7cf6cb.png
[7aa086afb30144cca5a9ac57afe9249f.png]: https://img-blog.csdnimg.cn/7aa086afb30144cca5a9ac57afe9249f.png
[04dfdf8aa8a144e18bee0b84a4548223.png]: https://img-blog.csdnimg.cn/04dfdf8aa8a144e18bee0b84a4548223.png
[e5e3bd61984a43cc94376882d8e989f8.png]: https://img-blog.csdnimg.cn/e5e3bd61984a43cc94376882d8e989f8.png
[7cf860d1fb1644b3b8cde00fe0870185.png]: https://img-blog.csdnimg.cn/7cf860d1fb1644b3b8cde00fe0870185.png
[24f9ca1ef12641abb3a679b4d229bcca.png]: https://img-blog.csdnimg.cn/24f9ca1ef12641abb3a679b4d229bcca.png
[816afbaa127349de90ba29d3c6579595.png]: https://img-blog.csdnimg.cn/816afbaa127349de90ba29d3c6579595.png
[781a65d441fb45d3b44cac7923c03c2c.png]: https://img-blog.csdnimg.cn/781a65d441fb45d3b44cac7923c03c2c.png
[d8f36ca8584b4f988e8461c16b886247.png]: https://img-blog.csdnimg.cn/d8f36ca8584b4f988e8461c16b886247.png
[14d8cba2c5624a84ad84cbf0d863d634.png]: https://img-blog.csdnimg.cn/14d8cba2c5624a84ad84cbf0d863d634.png
[713b021f22d54f659fa4f0e0e229a046.png]: https://img-blog.csdnimg.cn/713b021f22d54f659fa4f0e0e229a046.png
[a9160b99854d4aba86b92ae713ec2f77.png]: https://img-blog.csdnimg.cn/a9160b99854d4aba86b92ae713ec2f77.png
[0648b716867f4c79a63be82ac53c5af6.png]: https://img-blog.csdnimg.cn/0648b716867f4c79a63be82ac53c5af6.png
[a23218799e82439d898b2d2a8881f0bb.png]: https://img-blog.csdnimg.cn/a23218799e82439d898b2d2a8881f0bb.png
[5c4877c97e79410398f2bb01a991c56d.png]: https://img-blog.csdnimg.cn/5c4877c97e79410398f2bb01a991c56d.png
[aadbb927b2514dac9421591c3e1b5495.png]: https://img-blog.csdnimg.cn/aadbb927b2514dac9421591c3e1b5495.png
[57daf7a797b843d3a68326dc9d3b81a5.png]: https://img-blog.csdnimg.cn/57daf7a797b843d3a68326dc9d3b81a5.png
[249a9757ab4749cba41c2378f9abeb08.png]: https://img-blog.csdnimg.cn/249a9757ab4749cba41c2378f9abeb08.png
[b935dd2b649c4d76a2786187b8b3dccb.png]: https://img-blog.csdnimg.cn/b935dd2b649c4d76a2786187b8b3dccb.png
[7ec2b6e2f26544a0a335401ad5ab5de2.png]: https://img-blog.csdnimg.cn/7ec2b6e2f26544a0a335401ad5ab5de2.png
[868c6b3596994d7eb62fc6e749e22eb3.png]: https://img-blog.csdnimg.cn/868c6b3596994d7eb62fc6e749e22eb3.png
[a9df80cc6cd24fcf96a0bd40d894e05f.png]: https://img-blog.csdnimg.cn/a9df80cc6cd24fcf96a0bd40d894e05f.png
[34c68348a8f24cbb929610ffde4697e0.png]: https://img-blog.csdnimg.cn/34c68348a8f24cbb929610ffde4697e0.png
[23245f840e4a4c15ac70110b6703d3d6.png]: https://img-blog.csdnimg.cn/23245f840e4a4c15ac70110b6703d3d6.png
[613b1d39622a4676a323ba764affe215.png]: https://img-blog.csdnimg.cn/613b1d39622a4676a323ba764affe215.png
[f0cca909fa954e8cb3e4b70d1c050c73.png]: https://img-blog.csdnimg.cn/f0cca909fa954e8cb3e4b70d1c050c73.png
[1e8d1e7901114ac09136ae7c992bce72.png]: https://img-blog.csdnimg.cn/1e8d1e7901114ac09136ae7c992bce72.png
[fb455989403d4cb2b4b9f3086567bcda.png]: https://img-blog.csdnimg.cn/fb455989403d4cb2b4b9f3086567bcda.png
[911d5a6a200b4bc988083c340b9e9e10.png]: https://img-blog.csdnimg.cn/911d5a6a200b4bc988083c340b9e9e10.png
[ca660339d3d74b35b78eca78faf2804f.png]: https://img-blog.csdnimg.cn/ca660339d3d74b35b78eca78faf2804f.png
[480252310c9d455fb903c25827afe60c.png]: https://img-blog.csdnimg.cn/480252310c9d455fb903c25827afe60c.png
[2f1ab753333c4acdb169a2b81982a438.png]: https://img-blog.csdnimg.cn/2f1ab753333c4acdb169a2b81982a438.png
[34b29b1d4b1e4d07a848dd25fdd1a6f3.png]: https://img-blog.csdnimg.cn/34b29b1d4b1e4d07a848dd25fdd1a6f3.png
[bfb2613422824bf395e97792b7850947.png]: https://img-blog.csdnimg.cn/bfb2613422824bf395e97792b7850947.png
[a9c49ab177ef4f008ac305c50cd8bd2c.png]: https://img-blog.csdnimg.cn/a9c49ab177ef4f008ac305c50cd8bd2c.png
[8f6382a81c1c47dba8fda14461ac7441.png]: https://img-blog.csdnimg.cn/8f6382a81c1c47dba8fda14461ac7441.png
[fc804b751e27416884a36ae524fce9ce.png]: https://img-blog.csdnimg.cn/fc804b751e27416884a36ae524fce9ce.png
[d5fbd2c701974865b6c87160a20d834c.png]: https://img-blog.csdnimg.cn/d5fbd2c701974865b6c87160a20d834c.png
[144fa66a9d924ff48586059af515c275.png]: https://img-blog.csdnimg.cn/144fa66a9d924ff48586059af515c275.png
[8fc53110ccd24f6f994556ab6776045a.png]: https://img-blog.csdnimg.cn/8fc53110ccd24f6f994556ab6776045a.png
[f3df0ec5b57744959183cd15a7e6e0da.png]: https://img-blog.csdnimg.cn/f3df0ec5b57744959183cd15a7e6e0da.png
[77ce4f73fbb8451c8fc3b36c26692416.png]: https://img-blog.csdnimg.cn/77ce4f73fbb8451c8fc3b36c26692416.png
[bb492b3e07564fc983e0f934d04cf378.png]: https://img-blog.csdnimg.cn/bb492b3e07564fc983e0f934d04cf378.png
[ea4c0b36cc09467784b818b12fc18303.png]: https://img-blog.csdnimg.cn/ea4c0b36cc09467784b818b12fc18303.png
[98f66cca4ba8478aa4bfe0dcf4eb3007.png]: https://img-blog.csdnimg.cn/98f66cca4ba8478aa4bfe0dcf4eb3007.png
[443f682f2cf84aee99afd774bdeea636.png]: https://img-blog.csdnimg.cn/443f682f2cf84aee99afd774bdeea636.png
[8d946bb7a1d54d2eaf4f2956838b583a.png]: https://img-blog.csdnimg.cn/8d946bb7a1d54d2eaf4f2956838b583a.png
[90db054b72d94d1586f08e484e21b3d1.png]: https://img-blog.csdnimg.cn/90db054b72d94d1586f08e484e21b3d1.png
[be8e58b594184e089658a4044bcfc288.png]: https://img-blog.csdnimg.cn/be8e58b594184e089658a4044bcfc288.png