前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >TypeScript 类型系统

TypeScript 类型系统

原创
作者头像
HoneyMoose
修改于 2021-11-17 00:12:52
修改于 2021-11-17 00:12:52
87200
代码可运行
举报
文章被收录于专栏:CWIKIUSCWIKIUS
运行总次数:0
代码可运行

针对 JavaScript 上面的问题,聪明的同学就想那我们就给 JavaScript 加个类型吧,和 Java 一样,能够对变量的类型进行定义,这个想法就是 TypeScript 的类型系统, 在很大程度上弥补了 JavaScript 的带来的困惑。

从 TypeScript 的名字就可以看出来,「类型」是其最核心的特性,TypeScript 也主要致力于解决 JavaScript 的类型混乱问题。

TypeScript 是静态类型

类型系统按照「类型检查的时机」来分类,可以分为下面 2 种

  • 动态类型
  • 静态类型

动态类型是指在运行时才会进行类型检查,这种语言的类型错误往往会导致运行时错误。 JavaScript 是一门解释型语言,没有编译阶段(这个就是另外一个针对 Java 同学经常吐槽的地方),所以它是动态类型,以下这段代码在运行时才会报错:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let foo = 1;
foo.split(' ');
// Uncaught TypeError: foo.split is not a function
// 运行时会报错(foo.split 不是一个函数),在运行的时候造成 bug。
// 打开你浏览器 F12 看看上面有多少错误你就能了解到了。

静态类型是指编译阶段就能确定每个变量的类型,这种语言的类型错误往往会导致语法错误。TypeScript 在运行前需要先编译为 JavaScript,而在编译阶段就会进行类型检查,所以 TypeScript 是静态类型,这段 TypeScript 代码在编译阶段就会报错了:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let foo = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错(数字没有 split 方法),无法通过编译

你可能会奇怪,这段 TypeScript 代码看上去和 JavaScript 没有什么区别呀。

没错!大部分 JavaScript 代码都只需要经过少量的修改(或者完全不用修改)就变成 TypeScript 代码,这得益于 TypeScript 强大的[类型推论][],即使不去手动声明变量 foo 的类型,也能在变量初始化时自动推论出它是一个 number 类型。

完整的 TypeScript 代码是这样的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let foo: number = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错(数字没有 split 方法),无法通过编译

TypeScript 希望通过上面的配置来增强 JavaScript 的功能。

https://www.ossez.com/t/typescript/13809

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【TypeScript】001-TypeScript 的概述
这种灵活性就像一把双刃剑,一方面使得 JavaScript 蓬勃发展,无所不能,从 2013 年开始就一直蝉联最普遍使用的编程语言排行榜冠军;另一方面也使得它的代码质量参差不齐,维护成本高,运行时错误多。
訾博ZiBo
2025/01/06
870
【TypeScript】001-TypeScript 的概述
TypeScript 初学者入门学习笔记(一)
TypeScript 的类型系统,在很大程度上弥补了 JavaScript 的缺点。
前端达人
2021/06/16
1.9K0
系统学习 TypeScript(一)——认识 TypeScript
TypeScript 很好用,仁者见仁智者见智。但是,很多大型前端框架都使用 TypeScript 进行了重构。
编程三昧
2022/02/21
4280
系统学习 TypeScript(一)——认识 TypeScript
TypeScript介绍和使用
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第10天,点击查看活动详情 >>
默默的成长
2022/11/02
9310
TypeScript 概述
Vue 3 源码使用 TS 重写,Angular 默认支持 TS,React 与 TS 完美配合
Emperor_LawD
2021/05/14
5070
TypeScript 概述
攀爬TS之路(一) 原始数据类型、任意值类型
TypeScript是JavaScript的超集(添加了类型系统),适用于任何规模的项目。
赤蓝紫
2023/03/16
7810
攀爬TS之路(一) 原始数据类型、任意值类型
Typescript 类型的本质是什么
类型指的是变量的类型,而变量是一块内存空间,不同类型的变量会占用不同的字节数,而且可以做的操作也不同。number、boolean、string 等类型的变量会占用不同的内存大小。
公众号@魔术师卡颂
2021/08/26
1.7K0
TypeScript 类型系统
TypeScript 的学习资料非常多,其中也不乏很多优秀的文章和教程。但是目前为止没有一个我特别满意的。原因有:
lucifer210
2020/08/20
1.5K0
TypeScript 类型系统
Typescript也许应该这样入门才对
前言:Typescript 是前端当中一门饱受争议的技术,有人爱有人恨。在本文中,我不会劝你使用或者不使用 TS,而是会站在一个客观的角度,探讨 TS 这门技术所解决的更本质的问题(即 JS 类型问题)及其解决方案(TS 只是其中一种)。希望阁下看完这篇文章之后,能够超脱于 TS 本身,看到更加本质的问题,看到更多的解决方案。之后具体用不用,就是阁下自己的事情了。
桃翁
2021/03/18
7840
TypeScript 快速入门
由于这种强弱类型之分根本不是某一个权威机构的定义,一般描述强类型有更强的类型约束,而弱类型中几乎没有什么约束。
用户3045442
2020/08/06
1.6K0
TypeScript 快速入门
为什么说 TypeScript 的火爆是必然?
TypeScript 这些年越来越火,可以说是前端工程师的必备技能了,各大框架都基于它实现。
神说要有光zxg
2022/04/12
7080
为什么说 TypeScript 的火爆是必然?
【TypeScript】007-类型断言
在 tsx 语法(React 的 jsx 语法的 ts 版)中必须使用前者,即 值 as 类型。
訾博ZiBo
2025/01/06
660
探索类型系统的底层 - 自己实现一个 TypeScript(硬核干货)
原文:https://indepth.dev/under-the-hood-of-type-systems/
coder_koala
2021/04/21
1.3K0
TypeScript 是弱类型
以下这段代码不管是在 JavaScript 中还是在 TypeScript 中都是可以正常运行的,运行时数字 1 会被隐式类型转换为字符串 '1',加号 + 被识别为字符串拼接,所以打印出结果是字符串 '11'。
HoneyMoose
2021/11/16
6970
TypeScript 是弱类型
为什么说js是动态类型语言呢?
JavaScript 被称为动态类型语言,是因为它的类型在运行时决定,并且可以在运行时动态改变变量的类型。以下是一些示例来说明 JavaScript 的动态类型特性:
程序员王天
2023/10/18
4760
为什么说js是动态类型语言呢?
简单聊聊Python的类型系统
这篇文章实际是The Ultimate Guide to Python Type Checking文的导读和个人理解,有不当之处,以原文为准。内容分为四个部分:
哒呵呵
2019/01/23
1.3K0
JavaScript/TypeScript 语言
JavaScript 和 TypeScript 是两种流行的编程语言,它们在Web开发中扮演着重要角色。以下是两者的介绍:
七条猫
2025/01/10
750
TypeScript学习笔记(二)—— TypeScript基础
JavaScript 的类型分为两种:原始数据类型(Primitive data types)和对象类型(Object types)。
张果
2022/10/04
5.1K0
TypeScript学习笔记(二)—— TypeScript基础
typescript 的数据类型有哪些
typescript 是 javascript的超集,在javascript基础上提供了更加实用的类型供开发使用;
程序媛夏天
2024/03/01
2210
JavaScript 与 TypeScript之间的不同
当比较 TypeScript 和 JavaScript 时,我们需要牢记所有合适的 JavaScript 代码同样也是合法的 TypeScript 代码。TypeScript 可以被视为 JavaScript 的一个子集。
泽霖
2023/11/28
2710
相关推荐
【TypeScript】001-TypeScript 的概述
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验