您好!
欢迎来到京东云开发者社区
登录
首页
博文
课程
大赛
工具
用户中心
首页
博文
课程
大赛
工具
更多
用户中心
开发者社区
>
博文
>
typescript的必要性及使用
分享
打开微信扫码分享
点击前往QQ分享
点击前往微博分享
点击复制链接
typescript的必要性及使用
自猿其说Tech
2023-06-17
IP归属:北京
8840浏览
前端
Typescript
# 1 前言 作为一个前端语言,Javascript从最初只是用来写页面,到如今的移动终端、后端服务、神经网络等等,它变得几乎无处不在。如此广阔的应用领域,对语言的安全性、健壮性以及可维护性都有了更高的要求。尽管ECMAScript标准在近几年有了长足的进步,但是在类型检查方面依然毫无建树。在这种情况下TypeScript应运而生。 # 2 为什么要使用TypeScript 在JavaScript的开发过程中,相信经常会遇到以下这种场景: 1. 场景一: 你需要调用一个别人开发的函数 function funcName(paramA,paramB,paramC,paramD){...},但是很不幸,这个家伙没有留下任何注释,为了弄清楚参数的类型,你不得不硬着头皮去读里面的逻辑; 1. 场景二: 为了保证代码的健壮性,你很负责任的对函数的每个输入参数进行了各种假设,导致函数内一多半代码都是对参数(类型、个数等)的判断逻辑; 1. 场景三: 老板很看好你,让你维护一个重要的底层类库,你殚精竭虑优化了一个参数类型,在提交代码前,不知道有多少地方调用,你是否感到脊背发凉? 1. 等等... 以上情况归结底,是因为 JavaScript 是一门动态弱类型语言,对变量的类型非常宽容,而且不会在这些变量和它们的调用者间建立结构化的契约。如果你长期在没有类型约束的环境下开发,就会造成“类型思维”的缺失,养成不良的编程习惯,这也是做前端开发的短板之一,因此使用TypeScript对于前端开发者而言是迫切并且必要的。 使用 TypeScript 还能带来其他好处。比如,Visual Studio Code 具有强大的自动补全、导航和重构功能,这使得接口定义可以直接代替文档,同时也提高了开发效率,降低了维护成本。更重要的是,TypeScript 可以帮助团队重塑“类型思维”,使前端开发者从代码的编写者蜕变为代码的设计者。 如果说 JavaScript 是一匹野马,那么 TypeScript 就是束缚这匹野马的缰绳。作为骑士的你,自然可以张开双臂,放飞自我,但如果不是技艺超群,恐怕会摔得很惨。然而如果抓住了缰绳,你即可闲庭信步,亦可策马扬鞭。这就是 TypeScript 的价值,它会让你在前端开发之路上走得更稳,走得更远。 # 3 什么是TypeScript 什么是 TypeScript呢?根据官方的定义,它是拥有类型系统的 JavaScript 的超集,可以编译成纯JavaScript。在这里需要注意三点: 1. 类型检查,TypeScript会在编译阶段进行严格的静态类型检查,这意味着你在代码编写阶段就能发现一些错误,而不必带到线上运行时才能发现; 1. 语言扩展:TypeScript 会包括来自 ECMAScript 6 和未来提案中的特性,比如异步操作和装饰器,也会从其他语言借鉴某些特性,比如接口和抽象类; 1. 工具属性:TypeScript 能够编译成标准的 JavaScript,可以在任何浏览器、操作系统上运行,无需任何运行时的额外开销,从这个角度上讲,TypeScript 更像是一个工具,而不是一门独立的语言 # 4 TypeScript基础使用 ## 4.1 基础类型 Ts包含类型如下: 1. 数字类型(number):用来标识双精度64为浮点值,包含整数、浮点数等,没有单独的整型、浮点型; 1. 字符串(string):一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式; 1. 布尔(boolean): 值只有true和false; 1. 数组: 无关键字,声明变量: ```javascript let arr: number[] = [1, 3] let arr:Array<number> = [1,2] ``` 5.元组: 无关键字, 元组类型用来表示已知元素个数和类型的数组,每个元素的类型不必相同,但是对应位置的类型需要相同; ```javascript let x: [string, number]; x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错 console.log(x[0]); // 输出 Runoob x.push(33) console.log(x[2]) // 报错 // 注意x可以继续push多个字段,但是无法访问 ``` 6.枚举(enum): 枚举类型用于定义类型集合 数字枚举:默认情况下,第一个枚举值是 0,然后每个后续值依次递增 1, 但是,你可以通过特定的赋值来改变给任何枚举成员关联的数字,如下例子,我们从 3 开始依次递增 ```javascript enum Color { Red, // 0 Green, // 1 Blue // 2 }; let c: Color = Color.Blue; console.log(c); // 输出 2 console.log(Color[0]) // 输出Red enum Color1 { Red = 3, // 3 Green, // 4 Blue // 5 } ``` 7.void: 用于标识方法的返回值,表示没有返回值 8.null: 标识对象值缺失; 9.undefined: 用于初始化变量为一个未定义的值 10.never: 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值 11.Object:object表示非原始类型,也就是除number,string,boolean,symbol,null或undefined之外的类型。 12.any:任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型;(注意:不要轻易使用any,使用any跟使用javascript效果一样了) 它常用于以下三种情况: - 变量的值会动态改变时,比如来自用户的输入,任意值类型可以让这些变量跳过编译阶段的类型检查; - 改写现有代码时,任意值允许在编译时可选择地包含或移除类型检查; - 定义存储各种类型数据的数组时 13.联合类型:可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值 ```javascript var val:string|number val = 12 console.log("数字为 "+ val) val = "Runoob" console.log("字符串为 " + val) ``` ## 4.2 函数 ```javascript // 包含两个number类型参数和返回值,不能直接return。必须return一个数字 function add(x: number, y: number): number { return x + y; } // 可选参数, (这里没写返回值,利用了typeScript的类型推断能力) function buildName(firstName: string, lastName?: string, a?:number) { if (lastName) return firstName + " " + lastName; else return firstName; } // 参数默认值 function buildName(firstName: string, lastName: string = 'default_name') { return firstName + " " + lastName; } // 有一种情况,我们不知道要向函数传入多少个参数,这时候我们就可以使用剩余参数来定义, // 剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入 function buildName(firstName: string, ...restOfName: string[]) { return firstName + " " + restOfName.join(" "); } let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie"); ``` ## 4.3 接口(interface) 接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法。 ```javascript interface IPerson { firstName:string, lastName:string, sayHi: ()=>string } const customer:IPerson = { firstName:"Tom", lastName:"Hanks", sayHi: ():string =>{return "Hi there"} } ``` 接口可以通过继承来扩展自己,继承使用关键字 extends, 可以单继承和多继承 ```javascript interface Person { age:number } interface Musician extends Person, person1 { instrument:string } ``` ## 4.4 类(class) TypeScript 是面向对象的 JavaScript,类描述了所创建的对象共同的属性和方法。 定义类的关键字为 class,后面紧跟类名,类可以包含以下几个模块(类的数据成员): - 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。 - 构造函数 − 类实例化时调用,可以为类的对象分配内存。 - 方法 − 方法为对象要执行的操作。 ```javascript class Car { // 字段 engine:string; // 构造函数 constructor(engine:string) { this.engine = engine } // 方法 disp():void { console.log("发动机为 : "+this.engine) } } const car = new Car('') ``` # 5 总结 总体而言,TypeScript是一个很好的工具,即使您没有使用过它,也可以将它纳入您的学习计划中。因为它能在你脑中播下“类型思维”的种子,而思维方式决定了编程习惯,编程习惯奠定了工程质量,工程质量划定了能力边界。在面对越来越复杂的前端场景,TypeScript所提供的思维方式,能够让你在以后的开发中长期受益。 ------------ 自猿其说Tech-JDL京东物流技术与数据智能部 **作者:吴云阔**
原创文章,需联系作者,授权转载
上一篇:从Kafka中学习高性能系统如何设计
下一篇:Java反射源码学习之旅
相关文章
前端十年回顾 | 漫画前端的前世今生
Taro小程序跨端开发入门实战
【技术干货】企业级扫描平台EOS关于JS扫描落地与实践!
自猿其说Tech
文章数
426
阅读量
2149940
作者其他文章
01
深入JDK中的Optional
本文将从Optional所解决的问题开始,逐层解剖,由浅入深,文中会出现Optioanl方法之间的对比,实践,误用情况分析,优缺点等。与大家一起,对这项Java8中的新特性,进行理解和深入。
01
Taro小程序跨端开发入门实战
为了让小程序开发更简单,更高效,我们采用 Taro 作为首选框架,我们将使用 Taro 的实践经验整理了出来,主要内容围绕着什么是 Taro,为什么用 Taro,以及 Taro 如何使用(正确使用的姿势),还有 Taro 背后的一些设计思想来进行展开,让大家能够对 Taro 有个完整的认识。
01
Flutter For Web实践
Flutter For Web 已经发布一年多时间,它的发布意味着我们可以真正地使用一套代码、一套资源部署整个大前端系统(包括:iOS、Android、Web)。渠道研发组经过一段时间的探索,使用Flutter For Web技术开发了移动端可视化编程平台—Flutter乐高,在这里希望和大家分享下使用Flutter For Web实践过程和踩坑实践
01
配运基础数据缓存瘦身实践
在基础数据的常规能力当中,数据的存取是最基础也是最重要的能力,为了整体提高数据的读取能力,缓存技术在基础数据的场景中得到了广泛的使用,下面会重点展示一下配运组近期针对数据缓存做的瘦身实践。
自猿其说Tech
文章数
426
阅读量
2149940
作者其他文章
01
深入JDK中的Optional
01
Taro小程序跨端开发入门实战
01
Flutter For Web实践
01
配运基础数据缓存瘦身实践
添加企业微信
获取1V1专业服务
扫码关注
京东云开发者公众号