此生无悔入 TypeScript

想来,我已经用 TypeScript 已经有一段时间了,它可以算得上是前端领域的一门 “平淡生活” 的语言。

640?wx_fmt=jpeg

平淡生活,我的意思是:生活可以从此多一点乐趣——毕竟 bug 少了一些。

最近的一年多里,我造轮子的时候,基本上选用的是 TypeScript:

  • Mooa,用于 Angular 的微前端框架

  • ADR,轻量级架构决策记录工具

  • mest,interface 契约测试工具

  • Solla,封面矢量图片生成库

  • Stepping,EventStorming 记录工具

这一点也可以在我的 GitHub 首页上体现:

640?wx_fmt=png

Phodal GitHub

我是从 Ionic 2 beta (混合应用开发框架)开始使用 TypeScript,大概是在 16 年。Ionic 1 是基于 Angular.js,Ionic 2 也就基于 Angular 2,因此 Ionic 使用的便是 TypeScript。

协作性

起先,由于多数是用在个人的 side project 里,我便觉得 TypeScript 是一门繁琐的语言——每次创建一个函数的时候,我总得想一下这个对象的类型。

如果只是 const apps: any[] = [],倒还算是不错的。可是,在多数时候,它是 any,又或者是:

registerApplication(appConfig?: any, customProps: object = {}) {	
	
}

这样的代码,TSLint 或者 ng build --prod 的话,也是能通过的。可当 Angular 框架开始流行开来时,便发现事情不一样了。

当别人调用你的函数时,如果你返回的 type 是 any,那么调用方可能需要这么去声明返回的变量:

const blabla: any = somethings()

又需要这么去写代码:

(something as any).callMethod()

而如果使用的语言不是 typescript 的话,那么可能是这样子的:

if (somethings && somethings. hasOwnProperty('callMethod') {}

这样一来,总算是体现出了 TypeScript 的优势。对,这个东西就是智能感知:

640?wx_fmt=png

与 JavaScript 相比,TypeScript 的强类型,可以由 IDE/编辑器 赋予开发者更智能的开发提示,如某个对象拥有哪些可以调用的方法,获取的值。

类型

TypeScript 顾名思义是一门以 Type 为核心的语言,它可以做很多类型相关的事情。

在 ES20xx 到来之前,它显然是最完善的 JavaScript 方言之一。尽管 ES6/ES7 不断的在尝试推出一些新的特性,但是对于旧的浏览器而言,显然是需要 Babel 之类的转义为 ES5。与此同时一些高级的语言特性,ES6/ES7 还只在草案中,等到被 Node.js、各有大浏览器支持,不知道要到何年何月。

因而在这个时候,与其一点点跟进语言特性,还不如拥抱 TypeScript。

类型检查

类型检,测除了用于正常的变量声名:

private authService: AuthService;	
private role: any;	
public githubUser: UserResponse;	
private http: HttpClient;

在 Angular 的 HTTPClient 中还可以对 HTTP 返回结果进行类型检查:

this.http.get<UserResponse>('https://api.github.com/users/phodal')	
 .subscribe(	
 data => this.githubUser = data,	
 err => console.log(err)	
 );

对,这样就可以 GET 到你想要的对象了。

OOP

TypeScript 是一门对 OOP(object-oriented programming,面向对象编程) 特别友好的语言——实现接口,可以强制一个类去符合 interface:

export interface AbstractBuilder {	
 setStart (startSting: any)	
 setBody (handleBody: any)	
 setEnd (endString: any)	
 build ()	
}

对应的实现类:

export class GenerateBuilder implements AbstractBuilder {	
 ...	
}

以及常见的继承:

export default class SearchListGenerateBuilder extends GenerateBuilder {	
 ...	
}

除此还有各种组合式用法,如:接口继承类。

当然了,FRP(functional reactive programming,函数式响应式编程) 与 OOP(object-oriented programming,面向对象编程)并不是完全对立的,而是互相结合的。这一点在 JavaScript(ES6+) 及 TypeScript 上的体现更加明显。

未来

我不是说 TypeScript 有多好,而是在说 JavaScript (ES5)真的不行。诸如 CoffeeScript 是之前最受欢迎的 JavaScript 方言,Angular 默认使用的是 TypeScript,并且 Vue 和 React 也提供了 TypeScript 支持。

未来,ES20xx 足够完善的时候,我们就可以继续用 EcmaScript。在那之前,不妨试试 TypeScript。

什么是TypeScriptTypeScript是JavaScript的加强版,它给JavaScript添加了可选的静态类型和基于类的面向对象编程,它拓展了JavaScript的语法。 不过,你不必担心TypeScript跟浏览器不兼容,因为在编译时,它产生的都是JavaScript代码。 为什么要学TypeScritpt? TypeScript是一门很有前景和钱景的语言; 它能大幅的提高工作效率,并且减少错误; 这堂课我们能学到什么? 随着前端行业越来越受到重视,前端的逻辑也越来越复杂,对前端从业者的职业要求也越来越高,Vue、Angular、React和一些新的框架层出不穷,而作为Angular等框架的推荐语言TypeScript也在市场中得到了认可和追捧,不管是前端、还是游戏引擎、以及一些大型项目开发都中开始展露头角。但是这方面学习资源相对较少。 课程特点: 本堂课程通过深浅出的讲解,幽默风趣的风格; 让大家在3个小时的课程中能够掌握大部分TypeScript的核心知识; 同时能够使用TypeScript进行React等框架的项目开发; 为大家的学习和在工作中使用TypeScript打下坚实的基础。 课程大纲: 1.TS的初步配置 2.TS 数据类型 any 枚举 3.函数的参数和返回值类型 4.类非常重要 非常重要 5.静态类属性和方法 Math 6.泛型 7.模块化 systemjs 8.项目 TS+react+webpack结合的工作流应 类型管理 js->tsx 2.0 如何用TS开发react->TSX(难点->官网 项目) 工作流 package.json -> npm start npm run build  适用人群: 1.Typescript零基础想掌握ts正确学习姿势和门的初学者 2.经验丰富的jser想拓宽自己知识掌握ES6和ES7新功能的从业者 3.想在工作和项目中使用ts结合VAR框架的人员 4.有志于成为全栈开发人员却苦于无法门后端和跟后端沟通不畅的开发者 5.想深了解和使用angular的人员
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页