初学TypeScript系列——实现一个小案例(一)持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情

前言

最近跟着网上的一些文档学习TypeScript，但是还没有完整写过一个案例，今天来用TypeScript做一个随机展示一只喵的小案例。（此案例是学习B站上的视频实现的）

具体实现

a. 页面布局

创建一个页面文件test.html，把需要展示的喵咪信息，做成表格的形式展示，再在表格的下方增加一个“随机一只喵”的按钮，点击可以向表格中增加一只喵，每只喵也可以删除。（ps: 做了图片下载功能，但是请求数据的图片始终没能解决跨域问题，所以没法实现。只有第一列默认的展示的小猫图片可以实现下载）

<div class="form">
    <ul>
      <li class="top-item">
        <span >图片预览</span>
        <span >图片高度</span>
        <span >图片宽度</span>
        <span >图片删除</span>
        <span >图片下载</span>
      </li>
      <li>
        <span>
          <img src="https://t13.baidu.com/it/u=887095830,1010397028&fm=58&app=83&size=w931&n=0&f=JPEG&fmt=auto?s=1921D3151862D21B9AE5BDFA03008030&sec=1667062800&t=ff5d1eceec231c4abec1d961f7007b3e">
        </span>
        <span>200</span>
        <span>200</span>
        <span class="delete">删除</span>
        <span class="down" data-url="同图片地址">下载</span>
      </li>
    </ul>
  </div>
  <div class="btn">随机一只喵</div>

b. 页面引入js文件

因为浏览器无法识别ts文件，因此我们需要把写好的ts文件编译成js文件，在页面引入js文件

<script src="./test.js"></script>

c. 全局安装typescript(安装过的可以忽略这一步)

为了把ts编译成js

npm install typescript -g

d. 创建一个index.ts文件

e. 初始化ts项目(执行后多出一个配置文件`tsconfig.json`)

tsc --int

配置文件的target键值对 "target": "es2016"，表示ts文件按照es2016的标准编译成js

f. 在test.ts文件中实现功能逻辑代码

点击“随机一只喵”的按钮，获取到一条小猫的数据，就增加一个li标签，并传入相应数据，同时添加一个删除元素和下载元素，点击删除元素可以删除当前这个li元素。

声明变量

声明变量，需要提前指明类型
变量名后用冒号+类型标注

（1）声明调用数据的接口url变量
（2）为了给按钮添加监听事件，首先获取按钮元素，因为获取的元素可能会不存在，ts会提醒该值可能为null，使用断言声明该变量，在末尾用as+类型，明确告诉ts这个元素确实存在。还可以使用联合类型声明，定义的变量后面用冒号 + '|'联合两个类型
（3）获取ul元素, 相当于整个表单

const url: string = 'https://api.thecatapi.com/v1/images/search';
const button: HTMLDivElement | null = document.querySelector('.btn');
const tableBody: HTMLElement | null = document.querySelector('.form ul');

定义任何东西的时候要注明类型
调用任何东西的时候要检查类型

创建一个接口

interface通常会用来为对象进行类型的定义
在接口里面规定好属性名和属性值类型，多个对象复用此接口

如果有的参数无法确定，可以在接口中的此类属性值后加个？，表示可有可无

interface CatType{
url: string;
height: number;
width: number;
}

创建一个Cat类用于汇集和复用数据

类中需要提前为参数注明类型
类接收接口，使用implements关键字实现上面创建的接口（类里面的键值对如果和接口不一致就会报错）

class Cat implements CatType{
    url: string;
    height: number;
    width: number;
    constructor(person: CatType) {
      this.url = person.url;
      this.height = person.height;
      this.width = person.width;
    }
}

接下来就是页面操作相关的代码实现，明天接着继续实现它。

初学TypeScript系列——实现一个小案例(一)

前言