TS系列篇|TypeScript基础入门

1,854 阅读4分钟

"不畏惧,不将就,未来的日子好好努力"——大家好!我是小芝麻😄

一、TypeScript是什么?

  • TypeScript 是一种开源语言;

  • TypeScript 也是一种保留JavaScript 运行时行为 的编程语言。(TS不能被JS解析器直接执行,需要把TS编译成JS,最终执行的还是JS)

  • TypeScript是通过在JavaScript的基础上添加 静态类型 定义构建而成,是 JavaScript 的一个 类型化 超级;

  • TypeScript通过TypeScript编译器Babel转译为JavaScript代码,可运行在任何浏览器,任何操作系统

  • TypeScript 增强了编辑器(IDE)的功能,提供了代码补全、接口提示、跳转到定义、代码重构等能力

运行时行为:

  • 例如: 在 JavaScript 中除以零会产生Infinity而不是抛出运行时异常。作为一项原则,TypeScript永远不会改变 JavaScript 代码的运行时行为。
  • 这意味着如果您将代码从 JavaScript 移至 TypeScript,则可以保证以相同的方式运行,即使 TypeScript 认为代码存在类型错误。也不会影响JS代码的正常运行

image.png

二、TS的优点

  • 静态识别出那些可能有错的部分
  • 为大段代码提供结构化机制
  • 不给编译产物增加运行时开销
  • 输出整洁、地道、可读的 JavaScript 代码
  • 实现一种可组合、易推理的(easy to reason about)语言
  • 永远和 ES 规范保持一致
  • 保留所有 JavaScript 代码的运行时行为
  • 避免添加表达式级的语法特性
  • 一致的、完全可擦除的结构化类型系统
  • 成为跨平台开发工具
  • 从 TypeScript 1.0 起不在引入重大破坏性变动

三、TS的类型系统

TypeScript 的名字就可以看出来,「类型」是其最核心的特性。

我们知道,JavaScript 是一门非常灵活的编程语言:

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

这种灵活性就像一把双刃剑,一方面使得 JavaScript 蓬勃发展,无所不能;另一方面也使得它的代码质量参差不齐,维护成本高,运行时错误多。

TypeScript 的类型系统,在很大程度上弥补了 JavaScript 的缺点。

摘自 《ts.xcatliu.com/introductio…

1、TypeScript 是静态类型

类型系统按照「类型检查的时机」来分类,可以分为动态类型和静态类型。

  • 动态类型:是指在运行时才会进行类型检查,这种语言的类型错误往往会导致运行时错误。
  • 静态类型:是指编译阶段就能确定每个变量的类型,这种语言的类型错误往往会导致语法错误。

JavaScript 是一门解释型语言,没有编译阶段,所以它是动态类型

TypeScript 在运行前需要先编译为 JavaScript,而在编译阶段就会进行类型检查,所以 TypeScript 是静态类型

区别对比静态类型语言动态类型语言
1对类型及其严格对类型非常宽松
2立即发现错误BUG可能隐藏数月甚至数年
3运行时性能好运行时性能差
4自文档化可读性差

2、TypeScript 是弱类型

类型系统按照「是否允许隐式类型转换」来分类,可以分为强类型和弱类型。

  • TypeScript 是完全兼容 JavaScript 的,它不会修改 JavaScript 运行时的特性,所以它们都是弱类型

虽然 TypeScript 是弱类型,但是我们可以借助 TypeScript 提供的类型系统,以及 ESLint 提供的代码检查功能,来限制变量的更改。这在一定程度上使得 TypeScript 向「强类型」更近一步了——当然,这种限制是可选的。

通过类型系统体现了 TypeScript 的核心设计理念:在完整保留 JavaScript 运行时行为的基础上,通过引入静态类型系统来提高代码的可维护性,减少可能出现的 bug。

我把它比喻成:“JS是一匹野马,TS就是一条缰绳”😂

WechatIMG168.jpeg

四、TS的安装编译

约定使用 TypeScript 编写的文件以 .ts 为后缀,用 TypeScript 编写 React 时,以 .tsx 为后缀。

  • TypeScript 安装:

    npm install -g typescript
    
  • 查询 TypeScript 版本:

    npm view typescript version || tsc -v
    
  • 编译一个 TypeScript 文件:

    tsc xxxx.ts
    

image.png

参考文献

[1]. TypeScript官网

[2]. TypeScript简介_TypeScript笔记1

[3]. TypeScript 入门教程