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

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

一、TypeScript 是什么

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

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


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

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

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

tsx文件如下:

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

编译文件后:

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

二、特性

typescript的特性主要有如下:

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

类型批注

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

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

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

类型推断

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

let str = 'string'

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

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

接口

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

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

三、区别

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

更多的区别如下图所示:

相关文章
|
16天前
|
Rust JavaScript 前端开发
Node.js 添加对 TypeScript 的实验性支持
Node.js 添加对 TypeScript 的实验性支持
|
6天前
|
JavaScript 前端开发 编译器
探索 TypeScript:JavaScript 的超集
TypeScript 是由微软开发的开源编程语言,作为 JavaScript 的严格超集,增加了静态类型系统和对 ES6+ 特性的支持,有效解决了动态类型带来的问题。本文介绍 TypeScript 的核心概念(类型系统、接口、类、模块),探讨其优势(提高代码质量、增强可读性、促进团队协作)及基本用法(安装、配置、编写、编译代码)。此外,还介绍了接口、类、泛型和高级类型等进阶主题,帮助开发者更好地利用 TypeScript 构建健壮的应用。
|
8天前
|
JavaScript 前端开发
JavaScript中单引号和双引号的效果的一点区别
JavaScript中单引号和双引号的效果的一点区别
|
11天前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
2月前
|
JavaScript 前端开发
JavaScript / TypeScript日期格式化(dateFormat)
这篇文章介绍了如何在TypeScript中创建和使用一个日期格式化函数`dateFormat`,支持多种日期格式的自定义,并提供了函数的实现代码和使用示例。
JavaScript / TypeScript日期格式化(dateFormat)
|
29天前
|
前端开发 JavaScript API
JavaScript 的宏任务和微任务有什么区别
【9月更文挑战第6天】JavaScript 的宏任务和微任务有什么区别
22 4
|
1月前
|
JSON JavaScript 前端开发
如何使用代码注释:关于JavaScript与TypeScript
TSDoc是一种标准化TypeScript代码文档注释的规范,使不同工具能无干扰地提取内容。它包括多种标记,如@alpha、@beta等发布阶段标记;@decorator、@deprecated等功能标记;@defaultValue、@eventProperty等描述标记;@example、@experimental等示例与实验性标记;@inheritDoc、@internal等引用与内部标记;@label、@link等链接标记;@override、@sealed等修饰符标记;以及@packageDocumentation、@param、
28 5
|
11天前
|
JavaScript 前端开发
JS基础 if和switch区别
本文比较了JavaScript中的`if`语句和`switch`语句的区别,并通过示例代码展示了它们的用法,解释了何时使用`if`更合适以及`switch`语句的特点和应用场景。
14 0
|
2月前
|
JavaScript 前端开发 安全
揭秘TypeScript的魔力:它是如何华丽变身为JavaScript的超能英雄,让您的代码飞入全新的编程维度!
【8月更文挑战第22天】在Web开发领域,JavaScript是最主流的编程语言之一。但随着应用规模的增长,其类型安全和模块化的不足逐渐显现。为解决这些问题,微软推出了TypeScript,这是JavaScript的一个超集,通过添加静态类型检查来提升开发效率。TypeScript兼容所有JavaScript代码,并引入类型注解功能。
32 2
|
21天前
|
前端开发 JavaScript UED
JavaScript防抖和节流的使用及区别
JavaScript防抖和节流的使用及区别
8 0