博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【译】TypeScript 的类型(一)
阅读量:5816 次
发布时间:2019-06-18

本文共 1873 字,大约阅读时间需要 6 分钟。

  • 原文地址:
  • 原文作者:
  • 译者:

JavaScript 很酷。但是你知道比JavaScript更酷的是什么吗?

是Typescript。

你能说出下面代码哪里出错了吗?

TypeScript (左) and ES6 (右)

看到红色下划线了吗?这是Typescript给我们的错误提示。

你可能找到这个错误了—— toUpperCase() 是 字符串类型的方法。我们把一个整数作为参数传入,不过整数不能调用 toUpperCase()

我们来修改它,限制 nameToUpperCase() 的参数为字符串类型。

现在我们不必记住 nameToUpperCase() 只能接受一个字符串作为参数,让Typescript帮我们来记住它。想象下,如果要记住成千上万个方法以及其参数的类型,那会疯掉的。

但是还是出现红色提示。这是为什么?因为我们传的还是一个数字!我们现在来传个字符串。

注意到Typescript会编译成JavaScript(它只是JavaScript的超集,像C++和C)

Typescript的静态类型检查简单而强大。

在上个月,TypeScript已经下载了10,327,953次。

Typescript与Flow的下载量比较

让我们来探索Typescript世界——我们稍后会深入探讨,首先明白Typescript是什么以及为什么存在。

它起源于微软,由 (领导设计C#)和他的团队开发。

Typescript完全公开在Github上,所以任何人都可以阅读源代码和贡献。

Typescript——JavaScript的超集

怎么开始

很简单,我们需要的是NPM包。打开你的终端,然后跟着以下输入:

我们应该做好Typescript的配置。

{    "compilerOptions": {        "target": "es5",        "module": "commonjs"    }}复制代码

我们需要做的是创建.ts 文件,并告诉Typescript监测代码的变化,并进行编译。

执行以下命令进行代码监测:

tsc -w复制代码

tsc—Typescript的编译指令

这就是我们最终生成的文件

现在你可以按照我们的例子来完成!

我们在.ts文件里写代码,.js文件是给浏览器读取的。在本文的例子中,我们没有用浏览器,而是使用Node.js(Node也能读.js

JavaScript有七种数据类型,其中六种是基础类型,剩下的一种是对象类型。

JavaScript 的基础类型有:

  • String
  • Number
  • Undefined
  • Null
  • Symbol
  • Bollean

剩下的是对象类型

Typescript除了和JavaScript一样有基础类型,也扩充了额外的类型。

这些额外的类型是可选的,如果你不熟悉,你不一定要使用。

额外的类型如下:

Tuple

可以把 tuple 想象为有结构的数组。你按顺序预先定义数组元素的类型。

如果我们不按 tuple 的相应位置的类型分配相应的类型,Typescript会提示我们规则错误。

void

tuple 期望第一个变量是 number 类型—在这里例子中,它不是数字类型,而是字符串 "Indrek" ,所以会提示我们错误。

在typescript里,你必须在函数里定义返回类型。像这样:有些函数没有 return语句

注意我们如何声明参数类型和返回类型 - 两者都是字符串。

现在看看如果我们不返回任何东西会发生什么?

可以看到Typescript编译程序告诉我们:"你定义了返回类型为字符串,但现在却没有返回任何东西。现在告诉你,我们没有遵守提示的规则。"

如果我们不知道需要返回什么时怎么办?这种情况我们可以使用 Void 定义返回类型。

但是在这个例子里,如果我们要返回一个值,我们就不能定义返回类型为 void

Any

any 类型非常简单。如果我们不知道是什么类型时可以使用 any

注意到我们多次给 person 重新分配不同类型的值。第一次是字符串,然后是数字,最后是布尔值。我们不确定其类型。

现实世界的例子是,如果你使用第三方库而你不知道类型。

我们来创建一个数组,把一些数据存储在数组里。数组是由不同类型的数据组成,不仅仅是字符串,或数字,又或者有结构的类型,像 tupleany类型就会起作用。

如果你的数组里只是一种类型,你可以明确告诉编译器,像这样:

如果你想了解更多,这里有文档介绍。

中文文档:

英文文档:

转载地址:http://sfhbx.baihongyu.com/

你可能感兴趣的文章
廖雪峰javascript教程学习记录
查看>>
WebApi系列~目录
查看>>
Java访问文件夹中文件的递归遍历代码Demo
查看>>
项目笔记:测试类的编写
查看>>
通过容器编排和服务网格来改进Java微服务的可测性
查看>>
re:Invent解读:没想到你是这样的AWS
查看>>
PyTips 0x02 - Python 中的函数式编程
查看>>
阿里云安全肖力:安全基础建设是企业数字化转型的基石 ...
查看>>
使用《Deep Image Prior》来做图像复原
查看>>
如何用纯 CSS 为母亲节创作一颗像素画风格的爱心
查看>>
Linux基础命令---rmdir
查看>>
iOS sqlite3(数据库)
查看>>
粤出"飞龙",打造新制造广东样本
查看>>
编玩边学获数千万元A轮融资,投资方为君联资本
查看>>
蓝图(Blueprint)详解
查看>>
Spark之SQL解析(源码阅读十)
查看>>
Android图片添加水印图片并把图片保存到文件存储
查看>>
比特币系统采用的公钥密码学方案和ECDSA签名算法介绍——第二部分:代码实现(C语言)...
查看>>
海贼王十大悲催人物
查看>>
BigDecimal 舍入模式(Rounding mode)介绍
查看>>