TS是什么和js的差异
为啥要学 ts?
进入正题哈,经常写 js 的人会特别多的碰到一个 bug:xxxx is not a function
之类的。
这是为什么呢?
其实就是我们用了一些不属于它的方法。
比如说我们有一个const a = 250
,然后我们让他a.filter(()=>{})
。
有人可能会说,那明明是一个 number 类型,我怎么可能给他 filter
呢?
我之前就犯过这个错误,我想让一个数组等于另一个被 push 一个新元素数组:
let newarr = arr.push('hello') newarr.filter(() => {})
要知道,arr.push
他的返回值是新的数组长度!
我让一个 number 类型去使用数组方法,自然是会报错的。
好吧我知道这样似乎非常愚蠢,但是总而言之,在日常写 js 的报错中,有大把大把的报错是因为这种完全可以避免掉的问题。
如果是 java,他会在编辑器内就给你划红线,不会等到你运行了,再去告诉你。
这就是动态语言的毛病。
关于代码提示
不仅如此,我们是否会在写代码的时候烦心于代码提示呢?
比如我在某个 class 内部声明了一些变量,可是当我在其他地方进行实力化的时候,统统都没有提示!
我必须要翻到这个 class 的文件,找到那些变量再确认一番。
而 ts 的接口概念,可以帮助我们非常完美的解决问题!
所以我们需要学习 typescript。
据说用了 ts,能有效减少 80%的 bug(笑)。
但不管这是不是真的,从各个大框架对于 ts 的青睐程度来看,未来几年内,ts 必然会是绝对的热点之一!
毕竟,现在已经不只是:
能被 js 改写的终将被 js 改写
而是:
能被 ts 改写的,终将被 ts 改写
01 变量类型
js 是弱类型语言,ts 却不是。
ts 拥有这些类型:
1. undefined 2. null 3. boolean 4. number 5. string 6. object 7. array ----⬆️js 有的,⬇️js 没有的---- 8. tuple 9. enum 10. any 11. void 12. never
number、string、boolean 没有什么特别好说的,和 js 没什么区别,我来写几个我觉得比较重要的。
数组的声明
let list: number[] = [1, 2, 3] let list_b: array<number> = [1, 2, 3]
第一种方法不难理解,就是生命一个 number 数组。
第二种方法叫做数组泛型,即array<元素类型>
。
什么叫做泛型呢?
如果我们有一个函数:
function identity(arg: number): number { return arg }
那这个时候,传入的变量就必须是数字。
考虑到可复用性的问题,我们可以使用泛型。
function identity<t>(arg: t): t { return arg }
identity 函数 叫做泛型(注意,t 不是泛型!),因为它可以适用于多个类型。
t 是类型变量,它是一种特殊的变量,只用于表示类型而不是值。
它可以帮助我们捕获用户传入的类型,让我们可以对这个类型加以利用。
其实之前的情况,我们可以通过 any 来实现,但是 any 就会让我们丢失 t 这一信息。
在命名变量的时候有一个小坑,变量名不能命名为name
,因为会与 dom 中的全局 window 对象下的 name 属性出现重名。
enum 是成组常量的好用法!
enum hello { teacher: "老师好", classmate: "同学好", parents: "爸爸好", girlfriend: "刘好" }
一般情况,枚举类型会自动赋给自己常量值:
enum hello { teacher, // 0 classmates, // 1 parents, // 2 girlfriend // 3 }
我们也可以从中间打断这个赋值:
enum hello { teacher, // 0 classmates, // 1 parents = 5, // 5 girlfriend // 6 }
接下来会进行顺延。
从来没有的 never 值
never
类型表示的是那些永不存在的值的类型,听起来就像个悖论——我如何列举一个不存在的值?
其实never
类型可以是抛出的异常,或根本就不会有返回值的函数的返回值类型。
function error(message: string): never { throw new error(message) } function fail() { return error('something failed') } function infiniteloop(): never { while (true) {} }
总体来讲大同小异,ts 补充了一些在别的语言中有过的常见数据类型,相信这一块对于 js 开发者来说,不会是什么难题。
唯一的难题就是习惯,可不能老是使用 any 类型!
转自:https://www.cnblogs.com/xhyccc/p/12833906.html
上一篇: 微信支付 JAVA服务端 最详尽代码(含回调+所有工具类)
下一篇: 有些人是这样搞笑的.
推荐阅读
-
Intel(英特尔) 酷睿i5 2代系列和3代系列的区别是什么?
-
i7-7740X和i7-7700K的区别是什么 i7-7740X与i7-7700K性能对比测试图解
-
js中apply和Math.max()函数的问题及区别介绍
-
js中el表达式的使用和非空判断方法
-
jQuery避免$符和其他JS库冲突的方法对比
-
朋友圈晒2017-2019什么意思 2017和2019对比的是什么梗
-
使用vue.js实现checkbox的全选和多个的删除功能
-
js遍历json的key和value的实例
-
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
-
JS中对日期进行增加以及比较两个日期的Android和iOS都兼容(代码实例)