分享好友 站长动态首页 网站导航

为vue3学点typescript(1), 体验typescript

网友发布 2022-10-26 20:42 · 头闻号编程技术
看了vue conf 2019的视频, 特别兴奋, vue3要来了! vue3是用typescript开发的, 我揣测在vue的带领下typescript会成为主流呢, 要不先学点.19年最酷的前端技术我是19年初开始使用的typescript, 自从开始用上了就喜欢上了, 真的爱不释手, 最爱他几点:
  1. 很多小错误比如: 对象的字段不存在或者字段名字拼写错误, 编辑器会在写代码的时候就提示你, 降低出低级错误的几率.
  2. 标注了类型的变量, 使用的时候编辑器都会列出变量上的方法和属性, 开发体验更舒服.
  3. 很多大神的项目都用typescript开发, 看源码的时候因为有了类型标注, 更容易理解.
  4. 让自己写的代码看起来很厉害的样子 .
类型写错了, 也会提示:动手开始, 安装
  1. 安装nodejs
  2. 在命令行运行npm i -g typescript, 安装编译器到全局.
  3. 安装vscode编辑器.
开始写代码生成js
  1. 建立一个文件夹, 在里面新建一个hello.ts文件, 注意扩展名是ts.
  2. vscode打开hello.ts文件.
  3. 输入如下代码, 让我们体验下ts:
interface A {a:number,b:string}let obj:A = {a:123,b:'456'};
  1. 命令行进入文件夹, 执行命令
npx tsc hello.ts好了我们可以看下文件内部多了一个hello.js, 打开看看:

var

obj

=

{

a

:

123

,

b

:

'456'

};

代码中的"类型注解"不见了 ,我们的ts被编译成js了, 是不是很神奇.错误提示interface A {a:number,b:string}// 错误, 会提示b的类型错误, 应该为string类型let obj:A = {a:123,b:456};any类型any代表任意类型, 这个类型特别适合ts新手, 初期有些类型不知道如何表达, 我们就可以暂时使用any表达, 等熟练ts后再标注精准的类型.下面的情况新手可能就不会了, 以为n标记为number, 但是循环中i大于5的时候就是字符串了, 所以ts就会提示错误.let n:number;for {if n = 10;else n = '100';}// ts提示: 不能将类型“"100"”分配给类型“number”作为新手如果初期你不知道"联合类型"这个概念, 你就可以直接把n标记为any:// 熟练后会是这么标记的 // let n:string|numberlet n:any;for {if n = 10;else n = '100';}总结19年ts一定大火, 请大家放心学ts吧, 初期开发可以先用any体验ts, 慢慢学习1个月左右其实就可以实战了, 这篇后我也会在本月陆续更新完本typescript的教程, 保证大家在一个月内学会.

免责声明:本平台仅供信息发布交流之途,请谨慎判断信息真伪。如遇虚假诈骗信息,请立即举报

举报
反对 0
打赏 0
更多相关文章

评论

0

收藏

点赞