ES5 和 ES6 中提供了类, 模块以及装饰器等等这些特性, 其中有些特性已经在 Typescript 中实现了. 而 Typescript 支持额外的类型注解, 所以与 JavaScript 相比, 他支持更多语法特性.
Typescript 用法
看十遍书籍不如手动敲一遍, 所以为了能让这些代码运行起来, 需要在你的机器装上 TS 编译器.
用 NPM 安装 Typescript
全局安装 Typescript 编译器和可执行程序(tsc):
$ NPM i -g typescript
验证是否安装成功:$ tsc -v
简单运行 TS 程序
新建一个 example.ts 并在编辑器里输入:
- let a = '123';
- console.log(a);
使用 tsc 命令编译文件:$ tsc example.ts
会发现, 在 hello.ts 同一个目录下面, 看到一个 example.JS 文件.
那其实生成的 JS 文件等同于 Typescript 编译器输出的内容, 可以用 $ node example.JS 验证:
使用静态类型
使用静态类型, 首先能帮助我们避免出错并且提高效率. 在写 JS 时候, 编辑器 (例 VScode) 都是在运行时语法高亮, 对代码提供一些自动化完成建议. 而 Typescript 发挥自身静态类型检查的优势, 把所有类型声明剔除, 生成合法的 JavaScript 代码.
显式类型
举个例子:
- let Word: string = 'apple';
- console.log(Word);
最后输出:
这段代码的意思很显然: 使用 const 语法定义了一个变量 Word, 而且还声明 Word 的类型式 string, 值为 apple.
修改 Word 的值
- let Word: string = 'apple';
- Word = 123;
- console.log(Word);
平时在 JS 代码中这里正确的, 发现 Word 被设置为指定类型之后, 就不能再赋值为其他类型. 那如果我想允许修改任何类型的值, 如何?
any 类型
可以使用关键字 any 把变量声明为 any 类型, 那么基本上就是便携动态类型了, 导致无论是编译时还是运行时都不会抛出任何错误, 所以这样就失去了 TS 带来的优点.
- let Word: any;
- Word = {
- first:'1'
- }
- Word = 'apple';
- Word += 100;
- console.log(Word); // apple100
类型推断机制
静态类型由于要添加各种必须的类型注解, 会使得代码变得很啰嗦. 可以使用类型推断机制编写简洁的代码, 不需要显示定义. 所以, Typescript 的编译器可以智能猜测代码中表达式的类型, 比如:
- let Word = 'apple';
- Word = 123;
- console.log(Word);
编辑器发现定了变量 Word, 值为 string 类型的 apple, 就无法变成 number 类型的 123 了.
另一种情况, 如果声明变量时候不赋值, 那么编译器会自动设为 any 类型:
- let Word;
- Word = 'apple';
- Word = 123;
- console.log(Word); // 123
多个表达式推断
上面例子都是一个表达式的类型推断, 那么在多个类型推断会发什么结果? 比如:
- let arr = ['apple', 100]
- arr.push('pear')
- console.log(arr) // [ 'apple', 100, 'pear' ]
这种情况, arr 的类型将会变成 any 类型的数组.
但是, 又比如:
- let arr = ['apple', 'pear']
- arr.push(122)
- console.log(arr)
发现:
这种情况, arr 的类型将是 number[].
与上下文有关
如果表达式的类型是由它所在的位置隐式决定, 那么发生类型和上下文有关的情况.
- document.body.addEventListener('click', e => {
- e.sayHello();
- });
回调函数中参数 e 的类型是编译器猜测而来, 依据是参数 e 所在的上下文, 会根据调用 addEventListener 的位置以及传递给方法的参数情况去了解 e 的类型.
总结: 这篇内容比较简单, 偏向基础性的内容. 下一篇主要介绍 Typescript 的类型: 原生类型, Object 类型以及泛型和外部类型定义.
PS: 写 Typescript 笔记的理由不是为了骗点击量和关注量, 只是想一边学习之余一边整理自己的认知, 做一次系统回顾.
来源: https://juejin.im/post/5c1e31a6e51d452429741d01