技术 | TypeScript

Posted 2021-04-25 子曰五溪

如图：快速

第一次接触TypeScript还是和一帮兄弟在居民楼里撸每日优鲜App的时候，没有想过那么多，只想可以快速实现和快速落地，于是我们选择ionic这个Hybrid框架，而它又是基于Angularjs的，为了在某些方面保持一致性和快速迭代，我们选择了TypeScript。它的收益现在回过头来再来看三年前我们的选择，强大的静态类型系统，类，先进的javascript高级特性，在保持快速落地时，有极强大的推进作用。虽然，那一年的TypeScript有些简陋，不过我们已然给出了答案。相信如果有朋友看过Vue的源码，肯定对其中的泛型，类型有疑惑。不错，这就是TypeScript，有兴趣的朋友，一定要尝试一番。 构建大型应用，TypeScript在某些方面要比纯粹的ES6要强大的多的多，传送门：

TypeScript是微软开发并且开源的编程语言，本质上它是对JavaScript的一种增强，说到增强又不得不提及另一个CoffeeScript，这算是代表了两种不同的方向。而TypeScript对JavaScript的增强到达了静态类型系统，通过在编译期的推断，来避免错误的发生，这对于构建大型软件设计至关重要。不过，它最终会生产JavaScript，这也意味着可以运行在任何可以运行JavaScript引擎容器中。“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.” 这就是TypeScript官网给予的重要介绍。

说到类型系统，我们不得不说一些强类型语言，Objective-C就是，既然增加了“静态”二字，必然是与运行时的类型检查机制有所不同。静态类型系统必然是处于编译期的一种类型检查推断，有了这个，在某种意义上来说，你可以推断整个程序较为复杂的运行逻辑。

第一种收益是可以推断错误，比如你定义了一个String类型，传入的参数又是Number，用普通的JavaScript来执行一下，不会出现错误，但是这违背了一些预期的原则。如果用TypeScript来编译一次，那么通过类型系统，你就可以很快的推断出来错误，对程序加以修正，回到正确的轨道上来。第二种收益是通过类型系统来强化编程规范，众所周知JavaScript的弱鸡特性是非常灵活的，在项目较小时，也许可以很随意的处理。但是对于大型软件设计，这就是天然的暴露出来很危险的一些处理方式。那么一个复杂的系统模块，可以通过TypeScript的接口来进行抽象，这样的接口设计往往会成为一个大型系统的基石。第三个收益则是TypeScript给予提供的优秀工具链，包括IDE，Doc等等。

想起《湾区日报》曾经推送过一则国外的“段子”，为什么C井在企业应用市场里大量的使用，那是因为它足够稳定，足够为大型软件设计而生，却不够炫酷，微软在JavaScript也为我们带来了一种选择。

TypeScript提供了两种方式处理编译，一是基于Node.js编译，二是Visual Studio插件，对于我们互联网人来说，相信前一种会是比较适合的，通过npm命令来全局安装吧。

npm install -g typescript

TypeScript的文件后缀是ts，你可以输入如下代码：

function greeter(person: string) {    
    return 'Hello, ' + person;
}
greeter('icepy'); 
greeter(123);

然后输入 tsc hello.ts 来感受一下类型系统的魅力。

看看interface与可选型

说到可选型让我想到了Swift，这比Swift要早了很多，它对于程序的健壮起到了决定性的作用，如果一个属性是nil时，正常情况下，是需要做一次if判断的，但有了可选型之后，你只需要xx?.name，就避免的报错。

interface SquareConfig {
  color?: string;
  width?: number;
}
function createSquare(config: SquareConfig): {color: string; area: number} {  
    let newSquare = {color: "white", area: 100};  
    if (config.color) {    
        newSquare.color = config.color;
    }  
    if (config.width) {    
        newSquare.area = config.width * config.width;
    }  
    return newSquare;
}

let mySquare = createSquare({color: "black"});

接口就好比是一个描述，通过这些描述，类型检查就能推断出来通过接口你代码中的类型命名或者与第三方定义的契约描述，在实现上是否有错误，降低开发协作的成本。

关于类和ES2015非常像

TypeScript的类描述和ES2015的定义非常像，类是面向对象编程的一切基石，关于什么是面向对象，你要自行了悟。TypeScript对于类增强的特性，不是一点点，而是较好的完成了大量修饰符的工作。

class Animal {    
    private name: string;    
    protected age: number;    
    public constructor(theName: string) { 
        this.name = theName; 
    }    
    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }    
    constructor(theName: string) { this.name = theName; }
}

abstract class Animal {
    abstract makeSound(): void;    
    move(): void {        
        console.log('roaming the earch...');
    }
}

ES2015并没有去实现这些修饰符，以及抽象类等等，有了这些，才能构建一出一个完整的类，当你不想暴露出来某些属性时，这就可以通过private修饰符来定义私有属性。当然TypeScript也实现了存取器（getter/setter）,存取器有时候的作用是非常有用的，这也非常像Vue里的计算属性，你可以通过get/set方法来处理一些事务。

泛型为你的大型软件设计提供了灵活性

如果你的某些设计既支持当前的数据类型，又可以支持未来的数据类型，那么泛型就是你唯一的选择，它可以为你的重复使用的类，支持不同的数据类型。

function identity<T>(arg: T): T {    
    return arg;
}

在某些情况下，我们需要一种方式来使入参的类型与出参的类型一致，在不是泛型的情况下，第一次传入number，你返回了正确的类型，第二次传入string，那么必然丢失了类型信息。

这是一个很抽象的问题，再来看另外一个例子：

function identity1(arg: number): number {    
    return arg;
}

function identity2(arg: string): string {    
    return arg;
}

为了保障类型一致，你的设计可能就需要多个函数了，那如果使用了泛型，就的设计就只需要一个函数，就能正确的返回类型，这在某些情况下的设计，是非常重要的。

TypeScript还有很多非常优秀的设计，剩下的就需要你慢慢发掘了。不要犹豫，喜欢就赶快学习，实践，用起来吧。

聊完技术，我还想聊聊最近我关注的一部纪录片《航拍中国》，这又是一次为央视点赞极好的纪录片，和前几年《舌尖上的中国》一般，涨了知识，又是佳作。这部纪录片以空中视角俯瞰中国,立体化展示我国历史人文景观、自然地理风貌及经济社会发展，全景式俯瞰一个观众既熟悉又新鲜的美丽中国、生态中国、文明中国。说实话，我看了第一集《海南》，就被里面的风景所震撼了。很想抽时间和找机会，能再次走上旅途，去欣赏这大好河川风光，也不枉人生来了这么一次。说起来在旅途，还是很多年前的事情了，很像有那么一种感觉，找三两好友，骑着摩托车，环游全中国，这是我高中时代立志的一件事情，至今还未实现，和我的农业梦想等同。

读万卷书，行万里路。

你身边如果有朋友对混合领域（跨技术栈）或全栈，编程感悟感兴趣，可以转发给他们看哦，^_^先谢过啦。

---