前言
为什么会突然学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。