当前位置：首页 > news >正文

类型签名在Javascript中的探索

news 来源：原创 2024/5/19 5:37:25

为什么80%的码农都做不了架构师？>>>

简介

类型签名轻轻诉说着函数最不可告人的秘密。短短一行，就能暴露函数的行为和目的。O(∩_∩)O~

作用

虽然js是动态类型的语言，但并不意味否定类型的存在,我们在写代码的时候还是要和Number,Boolean,String,Array等打交道，只不过没有在语言层面做类型检查。

简洁美观(对于我来说这一点就足够了)
降低阅读代码成本
有效节约沟通成本(附带装X技能) 以下是描述同一个函数的
- A:fs.readFile 函数有三个参数第一个是字符串的文件路径，第二个是编码，第三个是回掉函数回掉函数内部第一个代表错误，第二个代表文件内容(字符串) 无返回值
- B:fs.readFile :: String:路径 -> String:编码 -> (Error -> String) -> ()
- C:fs.readFile :: String -> String -> (Error -> String) -> ()
编译期间检查错误（js未实现）
生成文档

简单的例子

// Number -> Number -> Number
function add(a,b){
  return a + b;
}

add 上方的一行注释描述了函数从入参到返回值的过程，即 add 函数接受两个数字返回数字

Number代表数字类型
最后一个Number 代表函数返回值的类型前面两个Number分别代表函数的第一参数和第二个参数

数组函数

js中有两个常用的类型，数组和函数，数组的类型可以写成Array,函数的类型可以写成Function。但这样的话我们从类型签名上获得的信息就很有限了，比如数组里面是什么？函数需要几个参？返回值是什么？

数组的类型可以写成 [String] 代表数组内部是String的类型

ps:其实数组可以看做容器容器里面是什么还是要写上的，Promise也可以看做容器比如类型可以写成 Promsie String

// [String] -> [Number]
// 求出每一项字符串的长度
function everyLength(xs){
  var r = [];
  for (var i = 0; i < xs.length; i++) {
    r.push(xs[i].length);
  }
  return r;
}

// [a] -> Number
function length(xs){
  return xs.length;
}

所有的类型都是以大写开头，小写的 a 是类型变量默认是代表任意类型(可以加约束)
everyLength 函数输入一个字符串数组返回一个数字数组
length 输入一个数组返回一个数字

函数可以写成 (String -> String) 即在原有的基础上加上一个括号代表一个函数

// (a -> b) -> [a] -> [b]
function map(fn,xs){
  var rs = [];
  for(var i = 0;i < xs.length;i++){
    rs.push(fn(xs[i]));
  }
  return rs;
}

a 和 b 是两个类型变量
map 函数：第一个参数是一个函数(该函数接收一个类型 a 返回一个类型 b) 第二个参数数组数组内部的类型是 a(和前面函数 a 是相同的类型)，返回值是数组其内部类型是 b (和前面函数的返回值保持一致)
通过类型签名是不是可以获取到很多有效的信息 ^_^

可选参数的函数

我是不建议写带有可选参数，默认参数的函数的，这样会使函数产生多语意。更好的解决办法是写多个函数。如下，多选参数的函数就要写多个类型签名了

// String -> Buffer
// String -> String -> String
function readFile(url,encoding){
  if(encoding){
    return fs.readFileSync(url,encoding);
  }else{
    return fs.readFileSync(url);
  }
}

该函数可以通过两种方式去调用

传 Url 返回 Buffer
传 URL 和 encoding 返回 String

json 配置和无参无返回值

有很多时候我们写的json是没有具体类型的，可以通过{必要的key:类型} 来进行描述如下：

//{url:String,fn:(String->())} -> ()
function req(config){
  // xx ....
  fn(result);
}

() 表示无返回值

对象方法

javascript 中的函数是可以使用this的这种函数叫方法

//Element ~> String -> ()
function setText(text){
  var div = $(this);
  div.text(text);
}
$("[text-w]").each(setText);

function Persion(){
  // xx ....
}

// Persion ~> () -> String
Persion.prototype.getName(){
  return this.name;
}