浅谈ts的基本理解,并比较flow的异同

先来个简单的例子
function square(n) {
  return n * n;
}
square("oops");

毫无疑问 会打印NaN,可是这不是我们想要的结果。
所以这个时候ts和flow就登场了,我们需要类型检查器来限定参数的类型

先来说说ts怎么搞
先创建一个后缀名为ts的文件 我们就取ts-1.ts好了
输入

function square(n: number): number {
    return n * n;
}
square('a');

第一个number表示输入的参数必须为number类型,第二个number表示返回值必须为number类型。
然后输入 tsc ts-1.ts 运行
浅谈ts的基本理解,并比较flow的异同_第1张图片
会发现报错了

并且还会在tsc ts-1.ts的目录下生成tsc ts-1.js的文件,这是转义后的js文件,
默认情况下无论编译成功与否都会生成。
如果要在报错的时候终止 js 文件的生成,可以在 tsconfig.json 中配置 noEmitOnError 即可

上述的一个小例子就是ts的一个主要功能:类型检查
另一个主要功能为类与接口的应用,使模块管理更佳,这一块暂时不做介绍,有兴趣可以看下: : 阮一峰的ts讲解.
并且vue3的源码用ts,所以还是推荐学一下

相同的,用flow也会报类似的错误(感觉用flow更麻烦点)
浅谈ts的基本理解,并比较flow的异同_第2张图片

你可能感兴趣的:(js)