typescript

✍️ Tangxt ⏳ 2020-08-10 🏷️ 101

01-TypeScript 入门

★制作一个可拖动的 div

大概从 2019 年开始，前端就可以不用 JS 了 -> 可以用 TypeScript 代替 JS，当然，JS 还是要学的……也许你会疑问不学 JS 直接学 TS 可以吗？ -> 可以的，只是换了一门语言学习罢了，但是你学过 JS 后，再去学 TS，会好学很多……

1）与 JS 的不同

2）要做的东西

  1. 带着问题看代码
  2. console.log 调试大法
  3. 制作一个可拖拽的 div

3）带着问题看代码

4）为什么要制作一个可拖拽的 div？

如何做？

5）让 TS 代码能在浏览器上跑？

1、创建一个安全的「ts-demo-1」目录

2、创建 「index.html」&「main.ts」

<script src="./main.ts"></script>

3、随便添加点 TS（or JS）代码，然后在浏览器运行

结果报错了：

error

.ts默认就是视频文件分片的后缀…… -> 所以 ts 文件默认就是视频文件

所以，如何让 TS 代码正常跑起来呢？

很简单，直接打包一下就好了：

npx parcel index.html

打包执行

让 TS 代码能正常运行在浏览器 -> 需要准备很多工具 -> 而这些工具的准备，只需要npx parcel index.html一下就能全部自动帮你准备好了！

简单原理：

原理

parcel 在打包的过程中，用到了「"typescript": "^3.9.7"」这个包！

用了 parcel 后，你写 css 可以直接使用 sass、less…… -> 后缀是.scss……

6）制作一个可拖拽的 div

用 TS 的好处：

一些细节点（为啥要处理这个细节？）：

demo

如果不加 !（想让整个 TS 代码看起来都是 JS 代码），那么你可以去掉这行 "strictNullChecks": true 配置！

"strict":true是最严格，"strictNullChecks": true是严格的空值判断！

整体代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#demo {
  position: absolute;
  top: 0;
  left: 0;
}

var div = document.createElement('div')
div.style.border = '1px solid red'
div.style.height = '100px'
div.style.width = '100px'
div.id = 'demo'

document.body.appendChild(div)

var x = false

// 根据鼠标的相对位置来做偏移
var position = [0, 0]

div.onmousedown = (e) => {
  x = true
  // 拿到鼠标的位置（只看一屏视口）
  position = [e.clientX, e.clientY]
}

// mousemove 信号是冒泡的 -> down 在 div 上 move 也会发信号给 document
document.onmousemove = (e) => {
  if (x === true) {
    // 如果此时鼠标按压在 div 上，在拖拽 div 的过程中，拿到相较于原位置偏移的的 X & Y
    var deltaX = e.clientX - position[0]
    var deltaY = e.clientY - position[1]
    var top = parseInt(div.style.top!) || 0
    var left = parseInt(div.style.left!) || 0
    // 重置 div 的 top & left 值！
    div.style.top = top + deltaY + 'px'
    div.style.left = left + deltaX + 'px'
    // 旧 -> 新 -> 旧 -> 新 -> 如此反复
    position = [e.clientX, e.clientY]
  }
}

document.onmouseup = (e) => {
  x = false
}

图示 1

老实说，用了 TS，代码提示贼 6，当然，如果你用 JS 的话，最好还是用 webstorm，而不是 VS Code……

★TS 会自动推断类型

1）TS 的自动推测原理

  1. var position = [0,0] -> 根据 [0,0] 推测出 postion是个 [number,number]类型的
  2. 你也可以显示声明position的类型 -> var position: [numeber,number] -> 这表示该数组只能有两个元素，而且必须是 number 类型的

如果是 JS，变量随你赋值成什么类型的值！而 TS 则不行，一旦变量一开始就确定了类型，那么之后，你就不能改了！ -> 注意 TS 代码在还未运行的时候，就能静态检测变量的赋值是否合理了！也就是说你在写代码的时候，就能提示你的代码是否写错了！

类型推导

★TS 编译成 JS 并部署

1）遇到一个 bug

parcel 这个极简工具 的存在让我们极大地提高了对 TS 的学习效率，不然要去了解 webpack 的话，又得花费大量的时间去折腾 webpack 这个工具了……

1、如何让我们的代码出现 github 上？

第一次尝试：

npx parcel build

打包结果里边，main.ts & style.css的文件路径是绝对路径：

我们想要的是：

https://xxx.github.io/ts-demo/dist/main.js

而结果却是：

https://xxx.github.io/main.js

打包结果

方方在上传代码的时候，都会把多余的代码给删了，不然初学者会认为这多余的代码是有用的，而这就会增加初学者的学习负担！

第二次尝试（解决 bug）：

查看 build 的帮助文档：

npx parcel help build

help build

npx parcel build --public-url ./ index.html

打包结果就是：

解决 bug

如果你想在手机上用手指拖拽，那就用触屏事件，如touchstart、touchend，坐标是touchs[0]之类的……

➹：🖥 CLI

★总结与答疑

1）总结

2）答疑

1、ECMAScript 规范一更新 TS 就会更新吗？

理论上，是的，TypeScript = JS + Type

2、TS 的难点？泛型？

泛型其实就是支持变量的类型

JS 基础打牢了，学习泛型 so easy！

3、遇到不会的需求？

把 TS 当作 JS 来写，爆红，就 CRM

4、TS 和 JS 的区别？

主要区别就类型声明！ -> 它还有其它特别有用的特性！

5、TS+React+Antd 的最佳项目实战？

TS 与框架搭配

Angular 是 TS 的最佳搭档，但一般我们不用 Angular

TS 的地位

也许以后会有 IS……之类的

6、TS 最后会不会跟 C#差不多？

不会的，你现在看到的 TS 样子就是最终的 TS 样子 -> 也就是说，基本上可以不写类型！

7、C# 与 TS？

同一个作者 -> 把 C#的精髓带入到了 TS -> 方方以前喜欢 C#，但因为没市场，工资不高，所以就转前端了，当方方学 TS 的时候，就感到 TS 代码非常的眼熟（既有 JS，又有 C#风格的代码）……

8、VSCode 配置 TS 自动加分号？

装个 prettier 插件，配置一下就好了！