网页设计和网站编辑,跨境电商面试自我介绍范文,京东商城网站建设教程,网站制做概述
TypeScript是微软公司开发的一种基于JavaScript语言的编程语言#xff0c;它的目的并不是创造一种全新的语言#xff0c;而是增强JavaScript的功能#xff0c;使其更适合多人合作的企业级项目。TypeScript可以看做是JavaScript的超集#xff0c;即它继承了后者的全部…概述
TypeScript是微软公司开发的一种基于JavaScript语言的编程语言它的目的并不是创造一种全新的语言而是增强JavaScript的功能使其更适合多人合作的企业级项目。TypeScript可以看做是JavaScript的超集即它继承了后者的全部语法所有的JavaScript脚本都可以当做TypeScript脚本有可能报错此外它再增加了一些自己的语法。TypeScript对JavaScript添加的最主要部分就是一个独立的类型系统。
类型的概念
类型指的是一组具有相同特征的值如果两个值具有某种共同的特征就可以说它们属于同一种类型。
举例来说123和456这两个值共同特征就是都能进行数值运算所以都属于“数值”number类型。
可以这样理解类型是认为添加的一种编程约束和用法提示。主要目的是在软件开发过程中为编译器和开发工具提供更多的验证和帮助
下面是一段简单的 TypeScript 代码演示一下类型系统的作用。
function addOne(n:number) {return n 1;
}
上面示例中函数addOne()有一个参数n类型为数值number表示这个位置只能使用数值传入其他类型的值就会报错。
addOne(hello) // 报错
上面示例中函数addOne()传入了一个字符串helloTypeScript 发现类型不对就报错了指出这个位置只能传入数值不能传入字符串。
JavaScript语言就没有这个功能不会检查类型对不对。开发阶段很可能发现不了这个问题代码也许就会原样发布导致用户在使用时遇到错误。
作为比较TypeScript是在开发阶段报错这样有利于提早发现错误避免使用时报错另一方面函数定义里面加入类型具有提示作用可以告诉开发者这个函数怎么用。
动态类型和静态类型
前面说了TypeScript 的主要功能是为 JavaScript 添加类型系统。大家可能知道JavaScript 语言本身就有一套自己的类型系统比如数值123和字符串Hello。
但是JavaScript 的类型系统非常弱而且没有使用限制运算符可以接受各种类型的值。在语法上JavaScript 属于动态类型语言。
请看下面的 JavaScript 代码。
// 例一
let x 1;
x hello;// 例二
let y { foo: 1 };
delete y.foo;
y.bar 2; 上面的例一变量x声明时值的类型是数值但是后面可以改成字符串。所以无法提前知道变量的类型是什么也就是说变量的类型是动态的。
上面的例二变量y是一个对象有一个属性foo但是这个属性是可以删除掉并且还可以新增其他属性。所以对象有什么属性这个属性还在不在也是动态没法提前知道。
正式因为存在这些动态变化所以JavaScript的类型系统是动态不具有很强的约束。这对于提前发现代码错误非常不利。
TypeScript引入了一个更强大、更严格的类型系统属于静态类型语言。
上面的代码在TypeScript里面都会报错。
// 例一
let x 1;
x hello;// 例二
let y { foo: 1 };
delete y.foo;
y.bar 2;
上面实例中例一的报错是因为变量赋值时TypeScript以及推断确定了类型后面就不允许再赋值为其他类型的值。即变量的类型是静态。例二的报错时因为对象的属性也是静态的不允许随意增删。
TypeScript的作用就是为JavaScript引入这种静态类型特征。
静态类型的优点
静态类型的很多好处这也就是TypeScript想要达到的目的。
1有利于代码的静态分析
有了静态类型不必要运行代码就可以确定变量的类型从而推断代码有么有错误这个就较多代码的静态分析。
这对于大型项目非常重要单单在开发阶段运行静态检查就可以发现很多问题避免交付有问题的代码大大降低了线上风险。
2有利于发现错误
由于每个值、每个变量、每个运算符都有严格的类型约束TypeScript就能轻松发现拼写错误、语义错误和方法调用错误节省程序员的时间。
let obj { message: };
console.log(obj.messege); // 报错
上面实例中不小心把message拼错了写成message。TypeScript就会报错指出没有定义过这个属性。JavaScript遇到这种情况是不报错的。
const a 0;
const b true;
const result a b; // 报错
上面的实时合法的JavaScript代码但是没有意义不应该将数值a与布尔值b相加。TypeScript就会直接报错提示运算符不能用于数值和布尔值的相加。
function hello() {return hello world;
}hello().find(hello); // 报错
上面实例中hello()返回的是一个字符串TypeScript发现字符串没有find()方法 所以就报错了。如果是JavaScrip只有到运行阶段才会报错。
3更好的IDE支持做到语法提示和自动补全
4提供了代码文档
5有助于代码重构
静态类型的缺点
1丧失了动态类型代码的灵活性
2增加了变成工作量 - 有了类型之后程序员不仅需要编写功能还需要编写类型声明确保类型正确。这增加了不少工作量又是会显著做场项目的开发时间
3更高的学习成本 - 类型系统通常比较复杂要学习更多东西要求开发者付出更高的学习成本
4引入了独立的编译步骤 - 原生的JavaScript代码可以直接在JavaScript引起运行添加类型系统之后就多出了一个单独编译步骤检查类型是否正确并将TypeScript代码转成 JavaScript代码这样才能运行。
5兼容性问题 - TypeScript依赖JavaScript生态需要用到很多外部模块。但是过去大部分 JavaScript 项目都没有做 TypeScript 适配虽然可以自己动手做适配不过使用时难免还是会有一些兼容性问题。
