Typescript friends on applet

Article Directory

[2018.11.14 A new typescript support] applet development tool quietly updated version, adding the support for the Typescript. Typescript ??? Typescript !!!

---

Why Typescript

About Typescript, I wrote before this can take a look at "About Typescript" . The story at the end of the text, that is, in most cases Typescript help us solve pain points.

After a long time, the idea is still the same: Typescript this thing, when you manage a big point of application, you will feel the benefits of it . In particular, to the time of teamwork!

Of course, if your project is relatively small, or write a small public (work) cited (with), a small demo of time, store state management, typescript compile, unless already familiar with, there is no additional cost when barely fit access. From a specific scene to talk about architecture, are playing (xia) flow (che) Meng (dan).

Why Typescript?

Variable type is not clear

Before writing small programs with outsourcing, in addition to inconsistent coding style, it has encountered a problem will become variable.

1 2 3 4 5 6 7 8

let formGroups = this.currentStep.formGroups; the let flattenFields = _.flatten (formGroups); // do not guess, I flatten with a smooth, it must be the object [{}, {}, {}] up! flattenFields.forEach( item => { IF (item.fields) { // Guess my item.fields an array or an object? flattenFields.push (..._ values (item.fields).); // do not guess, I used a values disappearing, it must be the object of! } });

When I help debug a problem, break point to see:

Meow meow meow? ? ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

My shoes # dialogue and outsourcing: I: the words you type them in the end is what, from naming context and can not be seen. . I: have to look through a finer code. . Outsourcing shoes: values ​​like you can try to change it I: is an array or an object? Outsourcing shoes: some arrays, some objects Outsourcing shoes: general with an array of complex numbers I :( knife .jpg) I: FML I: You item.fields, sometimes arrays, sometimes the object, so really you I: Brother I :( knife .jpg) * 2

Some people think, even on Typescript could possibly be any defeat ah.

what? In my eyes with any? ! !

Interface protocol does not comply

1 2 3 4 5 6 7 8 9

前端：帮忙看看这个接口为什么返回失败了？ 后台：你这个接口字段少了啊，这个xxx （哼哧哼哧修改） 前端：帮忙看看这个接口为啥又报错了啊？ 后台：你这个字段类型不对...我协议里有写的 前端：喔不好意思我改 （哼哧哼哧修改） 前端：（泪光）帮忙看看这个接口为啥还报错？ 后台：...你这字段名拼错了啊！！！！

当然，这个案例里稍微夸张了一点，一般我们都会自己一个个对着协议检查哪里不对，但是很多时候被 bug 光环环绕的时候，你就是发现不了问题。

这个时候，我们就可以用 Typescript 来管理接口啦。

1 2 3 4 5

interface IDemoResponse { date: string; someNumber: number; otherThing: any; }

1. 使用约定的变量的时候，会有相关提示（请忽略我的强行any）。

2. 使用约定以外的属性时候，会报错提示。

除此以外，还有很多很棒的用法呢~

一键调整协议

前端和后台协议约定后，就开始各自开发了。但是，我们总会遇到各种各样的问题，可能导致我们的协议变更。

字段的变更什么的最讨厌了，例如后台要把某个接口下date改成day。一般来说前端是拒绝的，你不能说让我改我就得改，我得看看我写了多少代码，评估下工作量。

什么，全局替换？你知道使用date多普遍吗？万一我替换错了咋办？？

这时候，如果你使用了 Typescript 并定义了协议接口的话，就很好办了~

依然是这段代码：

1 大专栏   小程序上Typescript啦ss="line">2 3 4 5 6 7 8

interface IDemoResponse { date: string; someNumber: number; otherThing: any; } const demoResponse: IDemoResponse = {} as any; const date = demoResponse.date;

1. 选中需要重命名的属性。

2. 按下F2，重新输入属性名。

3. 按下回车，使用到的地方都会更新。

是不是很酷~~~

跨过 Babel 直接使用 ES6/ES7，跨过 eslint 直接使用 prettier

其实小程序工具本身也支持了不少的 ES6 新语法，不过像async/await这种，则还是需要自己搞个 Babel 来编译。

现在直接上 Typescript，连 Babel 都可以直接跳过啦。

Prettier

这里重点推荐 prettier 神器，也是团队配合的好工具啊：

• 项目代码没有配 eslint？导致每次拉下来的代码一大堆冲突？
• 团队成员使用不同的编辑器？有的没有自动格式化？导致拉下来代码还是一堆冲突？
• 用 standard？有些规范和实际项目不符合，但是偏偏没得改？？

偷偷地往项目里装个 Prettier，然后所有的矛盾都不见啦。不管你的代码格式多独特，最终在 Git commit 的时候，就被同化啦，而且 Prettier 的格式化也不会影响到 Git 记录。

小程序与 Typescript

Typescript 编译下就可以用？

其实小程序它最终运行的还是 Javascript，那不是我们直接自己编译下就好了吗？

少年你太天真了。咱们写 Typescript 最重要的是什么呀？是 Typing 库呀！

网上开源的关于小程序和 Typescript 的工具或者脚手架也一大堆，为啥不用呢？因为小程序的 API 在不断地变化呀~

有了官方的支持，即使小程序的 API 变了，我们也可以及时地更新呀（奸笑）~

开箱即用的尝鲜

既然官方提供支持了，义不容辞地使用呀！

1. 首先，我们更新到最近的工具版本，然后创建项目就能看到了：

1. 创建模版，我们来看看代码长什么样子。

我们可以看到，在 package.json 里面多了俩脚本，其实也就是将 ts 文件原地编译，然后上传代码的时候忽略掉了。

1. 仔细瞧瞧代码。

额，好像混入了一些奇怪的东西进去，感叹号是什么鬼？？？

后面问了下开发GG，是因为这里比较特殊，目前定义的文件暂时没法兼顾，等后面的版本会兼容。

终于用上 Typescript 啦，爽歪歪~

调整下代码结构

小项目的话，其实也不用带什么编译啦。不过如果你还想用 less，也想用 typescript，还不想看到项目下面乱糟糟的文件：

1 2 3 4 5 6

index.js index.ts index.json index.less index.wxss index.wxml

We simply get hold gulp, the compiler plus it ~

Then we then prettier happily together. Here is not to explain it, we can also refer to my demo project:
wxApp-the typescript-demo

By the way, the official repository of typing is not very well, if you need to write components, plug-ins, mini-games you may face a lot of any shock waves Oh ~

reference

• Applet tool updates

Conclusion

---

In fact, the popularity of the Typescript not high, is another small program to do to surprise. In contrast our own it? There is no business code dash can not find direction?
Many times, we love to say nothing to write business technology upgrading, but is it really? I have seen a great business code, from the design to the implementation framework, developers have to make their own high demands. The technology needs to write code, they will do very well written?
"We are a business, certainly not technical,"
"project is urgent, how fast how to"
"Just find some use just fine, do not waste time on those above,"
...
these words, I do not agree . Of course, the project anxious when you can understand, and afterwards must take the debt owed to the still. (Seriously face)

Oh Github to see more content: https://github.com/godbasin
welcome to be deleted playground front end side of the front line and cats learn Oh