TypeScript (简称 TS) 和 JavaScript (简称 JS) 都是用于编写Web应用程序的语言,它们的区别在于:
1.类型不同
JS:一种脚本语言,用于创建动态网页,弱类型,没有静态类型选项
TS:ts是js的超集,用于解决大项项目的代码复杂性,强类型,支持静态和动态类型;ts包含了js的库和函数,ts上可以写任何的js,调用任何的js库,可以在ts中使用原生js语法
2.数据类型不同
TS的数据类型有:布尔值、数字、字符串、数组、 元组(tuple)、枚举(enum)、any、void、null和undefined、never、object ,unknown,
never:never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值; any 和unknown的区别 相同: 都可以赋任意类型的值,最终该变量的类型 由最后一个值的类型决定 不同: any可以赋值给任意类型的变量,并将该变量的类型修改为any变量值的类型 unknown 不可以 可以把unknown 看做是安全的any 如果非要把unknown 赋值给其他类型 怎么办? 使用类型断言、或类型判断(通过if typeof ) 类型断言: 变量 as 类型 表示 告诉ts 该变量的实际类型
JS的数据类型有:string,number,boolean,null,undefined,object,array,function,symbol(es6中引入)
3.类型声明
TS中的类型声明:指定类型后,当变量赋值时,TS编译器就会自动检查值是否符合声明类型,如果符合就赋值,不符合就报错
JS中的类型声明:变量类型声明并不是强制性的,因为 JavaScript 是一种动态类型语言,变量的类型会在运行时自动确定
4.编译
TS需要将代码编译为js代码才能在浏览器中执行
JS可以直接在浏览器中运行
5.TS有类型断言
TS有类型断言 变量 as 类型; 可以直接告知该变量的实际类型
6.函数的不同:
(1)TS:需要对函数中形参进行类型声明
JS中函数定义参数,传参的时候,可以传递任意类型,不够严谨
(2)js中当函数没有返回值的时候 默认返回值是undefined
TS: 第一种情况:不设置返回值类型,但是有返回值,这个时候TS解析器会根据返回值的类型进行判断,返回值类型是什么 函数返回值类型就是什么
第二种情况:设置返回值类型,则return的值必须严格按照返回值类型进行返回
第三种情况:设置返回值类型为void,void:用来表示空,以函数为例,就表示没有返回值的函数,或者说 返回值为空 ,如果想要一点返回值都没有,设置返回值类型为never(永远不会返回结果)
7.数组类型声明:
js中,数组的元素,可以是任意类型,没有局限性
TS中对数组类型声明之后就只能存放一种数据类型的数据,假如想创建一个能存储任意类型的数组(let e:Array<any> / let e:any[];)
-
第一种:
let 变量名:类型名[];
-
第二种:
let 变量名:Array<类型名>;
8.TS中的枚举和JS中的对象不一样
枚举代表的是一系列特定类型的对象 这是从别的编程语言派生出来的概念,所以我们不能用 js 的概念强加到它上面,其实枚举最好理解的就是一系列确定的常量。枚举中的属性,只能用来取值,不能重新赋值 [只读属性]
9.创建对象的方式:
JS的创建对象的方式:1.基于Object的方式创建对象,2.对象字面量,3.构造函数,4.原型prototype,5.class 类
TS的创建对象的方式:1、通过字面量 2、通过0bject 3、通过工厂模式创建 4、通过构造函数创建 5、通过class类创建 6、可以通过实现接口创建 7、通过继承抽象类创建
10.扩展特性
]S的语法,不支持把当前代码,编译为除当前语法外的其他版本
TS支持把代码编译为ES3 ES4ES5ES6+等指定的语法规范I
11.接口、继承、泛型
JavaScript是一种基于原型的语言,而不是传统的面向对象语言,不支持模块,不支持泛型或接口
TypeScript在JavaScript的基础上添加了类、接口、继承、泛型等面向对象编程的概念和特性,它允许模块化编程,可以把声明、数据、函数和类封装在模块中。使得代码组织和维护更加容易
12.继承
TypeScript 支持类的继承,可以通过 extends
关键字指定一个类继承自另一个类。
而在 JavaScript 中,除了es6,其他的语法规范,不支持使用extends来继承。
13.访问修饰符
TypeScript 引入了额外的访问修饰符(如 public
、private
和 protected
)来控制类的成员的访问范围。这增加了对类及其成员的访问权限控制。而在 JavaScript 中,类和类成员的访问权限是公共的。
-
14.可选的构造函数参数
在 TypeScript 中,我们可以在构造函数参数上使用 ?
表示可选参数。这使得我们可以定义构造函数参数的可选性。而在 JavaScript 中,构造函数参数是必需的。
15.重载
js没有重载概念
ts有可以重载:重载指的是在同一个类中定义多个同名的方法,但它们的参数类型、参数个数或返回类型不同。通过重载,我们可以为同一个方法名创建多个具有不同参数的版本。
16.重写
ts增加了重写,子类覆盖了父类中的属性或者是方法叫做重写 子类和父类同名的方法和属性,在子类中重新声明的时候,就覆盖了父类原本的内容)
17.static和readonly
ts中增加了static和readonly,而js中没有
static
(静态修饰符,被static修饰的属性或者是方法,属于类的。可以通过类名调用,不属于实例的,实例没办使用 和es6中的static一样)
readonly
(被readonly修饰的属性,只能读取不能修改)