TypeScript笔记(一)

74 阅读4分钟

前言

为什么会突然学TypeScript呢?那是很多web3的项目都是基于TypeScript开发的,所以为了更快的熟悉项目,还是想系统性学习下TypeScript的相关内容。这些文章都是基于有一定编程基础的前提写的,很多的还是了解TypeScript的一些特性。

什么是TypeScript

那么什么是TypeScript?TypeScript和JavaScript又是什么关系呢?以下是官方对于TypeScript的定义:

添加了类型系统的 JavaScript,适用于任何规模的项目。

从字面意思也可以看出TypeScript的两个重要特性,即类型系统和适用于任何规模,TypeScript就是加了类型系统的JavaScrpt,完全兼容JavaScript。

类型系统

从TypeScript中的Type就可以看出,TypeScript其最核心的内容就是Type(类型),而这个类型也就是相较于JavaScript而言的,众所周知JavaScript是一门非常灵活的语言:

  • 它没有类型的约束,一个变量可能初始化的时候是一个字符串,过一会后又被赋值为数字。
  • 由于隐式转换的存在,有的变量类型很难在运行前就可以确定。
  • 基于原型的面向对象编程,使得原型上的属性或者方法可以在运行时被修改。
  • 函数是JavaScript的一等公民,可以赋值给变量,也可以当作参数或者返回值。

得于斯者毁于斯,这种灵活性使得JavaScript蓬勃发展,但是也使它的代码参差不齐,维护成本高,运行时错误多,TypeScript的出现就是为了解决JavaScript的类型问题。

静态类型和动态类型

类型系统按照类型检查的时机可以分为动态类型和静态类型,动态类型是指在运行时才会进行类型检查,动态类型往往会导致运行时错误,JavaScript就是属于动态类型的语言,它是一门解释性的语言,没有编译阶段,例如以下JavaScript代码在运行时就会出错:

let foo = 1;
foo.split(' ');
// Uncaught TypeError: foo.split is not a function
// 运行时会报错(foo.split 不是一个函数),造成线上 bug

相较于动态类型,静态类型就是在编译阶段就能确定每个变量的类型,这种语言的类型错误会导致语法错误,TypeScript在运行前就时需要先编译为JavaScript,在编译阶段如果有类型问题就会报错,如以下TypeScript代码在编译时就会报错:

let foo = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错(数字没有 split 方法),无法通过编译

可以看出,这两段代码其实没有什么区别,事实也是如此,大部分的JavaScript代码都只需要经过少量修改或者完全不用修改就可以变成TypeScript语言,这得益于TypeScript强大的类型推断,与上面为例子,即使不去手动声明变量foo的类型,也能在变量初始化的时候推断其为number类型,完整的TypeScript代码如下:

let foo: number = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错(数字没有 split 方法),无法通过编译
强类型和弱类型

类型系统按照是否允许隐式转换可以分为强类型和弱类型,以下这段代码无论是在TypeScript还是JavaScript都可以正常运行,运行时数字1将会被隐式转换为字符串"1",加号+则会被识别为字符串拼接,所以打印出来的结果就是"11"。

console.log(1 + '1');
// 打印出字符串 '11'

TypeScript是完全兼容JavaScript的,它不会修改JavaScript的运行时的特性,所以都是弱类型。与其相对应就是Python,Python是强类型,以下代码会报错:

print(1 + '1')
# TypeError: unsupported operand type(s) for +: 'int' and 'str'

强/弱是相对的,Python 在处理整型和浮点型相加时,会将整型隐式转换为浮点型,但是这并不影响 Python 是强类型的结论,因为大部分情况下 Python 并不会进行隐式类型转换。相比而言,JavaScript 和 TypeScript 中不管加号两侧是什么类型,都可以通过隐式类型转换计算出一个结果——而不是报错——所以 JavaScript 和 TypeScript 都是弱类型。

总结

  • TypeScript 是添加了类型系统的 JavaScript,适用于任何规模的项目。
  • TypeScript 是一门静态类型、弱类型的语言。
  • TypeScript 是完全兼容 JavaScript 的,它不会修改 JavaScript 运行时的特性。
  • TypeScript 可以编译为 JavaScript,然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
  • TypeScript 拥有很多编译选项,类型检查的严格程度由你决定。

一个简单的例子

以下就是一个TypeScript的简单例子,通过tsc命令可以将demo.ts编译为js代码,TS代码如下

function sayHello(name: string) {
    return "Hello " + name;
}
let user = "Tom";
console.log(sayHello(user))

编译后的js代码如下:

function sayHello(name) {
    return "Hello " + name;
}
var user = "Tom";
console.log(sayHello(user));

最后可以通过node demo.js运行代码。

最后

这篇文章主要介绍了TypeScript的相关概念,主要是与JavaScript的区别,更多文章可以关注公众号QStack。