金色小芝麻

vuePress-theme-reco 金色小芝麻    2021 - 2023
金色小芝麻 金色小芝麻

Choose mode

  • dark
  • auto
  • light
主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
author-avatar

金色小芝麻

83

文章

27

标签

主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
  • TS笔记

    • TS|从JS的起源到浏览器大战
    • TS|类型的兼容性 & 类型的保护
    • TS|高级数据类型
    • TS|TypeScript的诞生
    • TS|TypeScript基础入门
    • TS|基础数据类型 和 类型推论及断言
    • TS|函数(Function)
    • TS|类(class)
    • TS|接口(interface) 和 类型别名(type)
    • TS|装饰器(@)
    • TS|泛型

TS|TypeScript基础入门

vuePress-theme-reco 金色小芝麻    2021 - 2023

TS|TypeScript基础入门

金色小芝麻 2021-08-21

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

# 一、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 的缺点。

摘自 《https://ts.xcatliu.com/introduction/what-is-typescript.html》

# 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官网 (opens new window)

[2]. TypeScript简介_TypeScript笔记1 (opens new window)

[3]. TypeScript 入门教程 (opens new window)

欢迎来到 金色小芝麻
看板娘