对 typescript 的理解?与 javascript 的区别?

简介: 对 typescript 的理解?与 javascript 的区别?

ae77c5c9ec008dfce120f8b963790511.png


一、是什么

TypeScriptJavaScript 的类型的超集,支持ES6语法,支持面向对象编程的概念,如类、接口、继承、泛型等

超集,不得不说另外一个概念,子集,怎么理解这两个呢,举个例子,如果一个集合A里面的的所有元素集合B里面都存在,那么我们可以理解集合B是集合A的超集,集合A为集合B的子集


其是一种静态类型检查的语言,提供了类型注解,在代码编译阶段就可以检查出数据类型的错误


同时扩展了 JavaScript 的语法,所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作


为了保证兼容性,typescript在编译阶段需要编译器编译成纯Javascript来运行,是为大型应用之开发而设计的语言,如下:


tsx文件如下:

const hello : string = "Hello World!"
console.log(hello)

编译文件后:

1. const hello = "Hello World!"
2. console.log(hello)

二、特性

typescript的特性主要有如下:

  • 类型批注和编译时类型检查 :在编译时批注变量类型
  • 类型推断:ts中没有批注变量类型会自动推断变量的类型
  • 类型擦除:在编译过程中批注的内容和接口会在运行时利用工具擦除
  • 接口:ts中用接口来定义对象类型
  • 枚举:用于取值被限定在一定范围内的场景
  • Mixin:可以接受任意类型的值
  • 泛型编程:写代码时使用一些以后才指定的类型
  • 名字空间:名字只在该区域内有效,其他区域可重复使用该名字而不冲突
  • 元组:元组合并了不同类型的对象,相当于一个可以装不同类型数据的数组

类型批注

通过类型批注提供在编译时启动类型检查的静态类型,这是可选的,而且可以忽略而使用JavaScript常规的动态类型

function Add(left: number, right: number): number {
 return left + right;
}

对于基本类型的批注是numberboolstring,而弱或动态类型的结构则是any类型

类型推断

当类型没有给出时,TypeScript编译器利用类型推断来推断类型,如下:

let str = 'string'

变量str被推断为字符串类型,这种推断发生在初始化变量和成员,设置默认参数值和决定函数返回值时


如果由于缺乏声明而不能推断出类型,那么它的类型被视作默认的动态any类型


接口

接口简单来说就是用来描述对象的类型 数据的类型有number、 null、 string等数据格式,对象的类型就是用接口来描述的  

interface Person {
    name: string;
    age: number;
}
let tom: Person = {
    name: 'Tom',
    age: 25
};

三、区别

  • TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法
  • TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译
  • TypeScript 文件的后缀名 .ts (.ts,.tsx,.dts),JavaScript 文件是 .js
  • 在编写 TypeScript 的文件的时候就会自动编译成 js 文件

更多的区别如下图所示:

相关文章
|
1天前
|
Web App开发 JavaScript 前端开发
Ecmascript 和javascript的区别
Ecmascript 和javascript的区别
7 0
|
3天前
|
JavaScript 前端开发
JS中浅拷贝和深拷贝的区别,浅拷贝的危害
JS中浅拷贝和深拷贝的区别,浅拷贝的危害
11 0
|
11天前
|
机器学习/深度学习 人工智能 JavaScript
【JavaScript 与 TypeScript 技术专栏】JavaScript 与 TypeScript 的未来发展趋势
【4月更文挑战第30天】本文探讨了JavaScript和TypeScript的未来发展趋势。JavaScript将聚焦性能优化、跨平台开发、人工智能和WebAssembly的整合。TypeScript则将深化与其他框架的结合,强化类型检查,适应前端工程化,并与WebAssembly融合。两者在Vue 3.0及Web开发中的结合将更加紧密,TypeScript有望在更多领域扩展应用。随着技术进步,JavaScript和TypeScript的结合将成为Web开发的主流趋势。
|
11天前
|
JavaScript 前端开发 安全
【JavaScript与TypeScript技术专栏】TypeScript如何帮助JavaScript开发者避免常见错误
【4月更文挑战第30天】TypeScript,JavaScript的超集,通过静态类型检查和面向对象特性,帮助开发者避免类型错误、引用错误和逻辑错误,提升代码质量和可维护性。它引入类型注解、接口、可选链和空值合并,使代码更清晰、安全。对于大型项目,TypeScript的接口、类和泛型有助于代码结构化和模块化。学习TypeScript能提高JavaScript开发效率。
|
11天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】使用TypeScript优化JavaScript应用性能
【4月更文挑战第30天】本文探讨了如何使用TypeScript优化JavaScript应用性能。TypeScript通过静态类型检查、更好的编译器优化和IDE支持提升代码稳定性和开发效率。利用类型注解、泛型、类与继承以及枚举和常量,开发者能构建高效、灵活和健壮的代码。逐步将TypeScript引入现有JavaScript项目,并通过案例分析展示性能提升效果。随着TypeScript社区的发展,它将在Web开发性能优化中扮演更重要角色。
|
11天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
11天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】JavaScript与TypeScript混合编程模式探讨
【4月更文挑战第30天】本文探讨了在前端开发中JavaScript与TypeScript的混合编程模式。TypeScript作为JavaScript的超集,提供静态类型检查等增强功能,但完全切换往往不现实。混合模式允许逐步迁移,保持项目稳定性,同时利用TypeScript的优点。通过文件扩展名约定、类型声明文件和逐步迁移策略,团队可以有效结合两者。团队协作与沟通在此模式下至关重要,确保代码质量与项目维护性。
|
11天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】TypeScript在JavaScript库与框架开发中的作用
【4月更文挑战第30天】TypeScript,微软开发的JavaScript超集,以其强类型和面向对象特性,正成为提升Web项目质量和效率的关键工具,尤其在库和框架开发中。它通过类型系统减少运行时错误,提供内置文档,便于重构,增强IDE支持,以及支持模块化。流行框架如React、Angular已支持TypeScript,未来有望成为开发高质量库和框架的标准语言。随着社区增长,TypeScript将在Web开发领域扮演更重要角色。
|
18天前
|
JavaScript 编译器
TypeScript中类型守卫:缩小类型范围的艺术
【4月更文挑战第23天】TypeScript中的类型守卫是缩小类型范围的关键技术,它帮助我们在运行时确保值的精确类型,提升代码健壮性和可读性。类型守卫包括`typeof`(检查原始类型)、`instanceof`(检查类实例)和自定义类型守卫。通过这些方法,我们可以更好地处理联合类型、泛型和不同数据源,降低运行时错误,提高代码质量。
|
11天前
|
JavaScript 安全 前端开发
【TypeScript技术专栏】TypeScript中的类型推断与类型守卫
【4月更文挑战第30天】TypeScript的类型推断与类型守卫是提升代码安全的关键。类型推断自动识别变量类型,减少错误,包括基础、上下文、最佳通用和控制流类型推断。类型守卫则通过`typeof`、`instanceof`及自定义函数在运行时确认变量类型,确保类型安全。两者结合使用,优化开发体验,助力构建健壮应用。