如何在Vue项目中应用TypeScript？

一、前言

在VUE项目中应用typescript，我们需要引入一个库vue-property-decorator，

1
2
3
4

# npm 下载
npm i vue-property-decorator -s
# yarn 下载
yarn add vue-property-decorator -s

Storybook

介绍

Storybook是帮助前端组件开发的开源工具，可以支持React，Vue，Angular等框架。

它的网站首页这样说道：storybook 为UI组件提供一个独立的沙箱环境，在这里无论是edge case还是难于遇到的状态都可以造出来。可以把use case 像故事一样展现出来。

平常的组件开发，程序猿需要把组件单独放置在一个页面不断的调试，非常不人性化。而storybook就单独为开发人员提供了一个页面，将组件放置在他们提供的页面中清晰可见。

简单的说，如果我们是开发react组件，就不需要启动react的打包编译启动页面浏览组件，只需要启动storybook为我们内置的页面即可浏览组建

DOM diff 作为工程问题，需要具有一定算法思维，因此经常出现在面试场景中，毕竟这是难得出现在工程领域的算法问题。

无论出于面试目的，还是深入学习目的，都有必要将这个问题搞懂，因此前端精读我们就专门用一个章节说清楚此问题。

React Tookit

首先，React Tookit是React新提出的类Redux状态管理模式。该技术的提出是为了解决Redux的三个常见问题：

• 🤨”配置Redux储存太复杂了“
• 🤔”必须添加很多包才能让Redux做任何有用的事情“
• 😯”Redux需要太多样板代码“

简单的对闭包做一个理解：

• 闭包产生是：函数内嵌套函数；
• 闭包函数在外面被调用，访问；
• 闭包能使外部函数访问内部函数的变量；
• 闭包可以保持对定义时的作用域的引用，使之不被销毁，就长生不老。

如何在React项目中应用说说如何在反应项目中应用TypeScript?

setTimeout

写代码之前需要知道setTimeout实现原理：本质上就是在给定的时间向任务队列添加回调函数，并执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function mySetTimeout(...rest){
      // 1.得到调用setTimeoutMy函数时的时间戳
      let start =new Date().getTime();
      // 2.得到回调函数结束的时间
      let end = start+ rest[1];
      // 3. 监听事件变化，当事件到达指定的结束时间时，结束回调函数
      let timer =setInterval(()=>{
          let time =new Date().getTime();
          if(time>=end){
             clearInterval(timer);
             rest[0](rest[2]);
          }
      },17)
      console.log('同步执行----');
}

mySetTimeout((res)=>{
     console.log(res);
},1000,'执行结果')
------------

结果：
  同步执行---- # 从这里可以看出setTimeout本身执行是同步的，执行的回调函数是异步的
  执行结果  # 输出结果，是在1秒之后输出