TypeScript4技术概述

最新推荐文章于 2024-05-14 02:07:45 发布

呵呵你真行

最新推荐文章于 2024-05-14 02:07:45 发布

阅读量896

点赞数 1

分类专栏：大前端文章标签： typescript javascript 前端架构编程语言

本文链接：https://blog.csdn.net/huiskai/article/details/109607898

版权

大前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

系统环境

操作系统：MacOS Catalina | node版本：12.18 | npm 版本：6.14.4 | 编辑器：WebStorm 2020.2

前言

JavaScript之痛，Big JavaScript apps are hard。JavaScript的设计初衷是小而灵活的脚本语言，这种灵活性也限制了它本身在大型应用中的使用，如果采用纯JavaScript构建大型程序将是巨大的灾难。随着互联网和移动互联网的快速发展，JavaScript的推动作用无可替代，而互联网产品普遍规模呈爆发式发展，此时迫切需要弥补JavaScript和构建大型应用的强类型语言之间的鸿沟。各路大神发挥自己的聪明才智，推出了新语言和工具，主要思路是采用强类型语言进行编码，然后编译成JavaScript代码。本文将重点介绍当前流行的强类型语言TypeScript（下文简称TS），主要讲述了TS是什么，TS的特性有哪些。

一、发展概况

JavaScript构建大型程序之间的主要鸿沟在于类型的完备性，这是面向对象编程的至关重要的一点，为此广大的开发者们发挥出巨大的创造力，创造出了各种新型语言和工具去弥补这一点，他们的重要功能就是将更实用的代码语言编译成JavaScript语言，其中业界将能编译到JavaScript到语言统称为ALTJS。TS就是属于其中一员，作为后起之秀，TS以完备的类型，强实用性，优雅的表达迅速赢得了广大开发者的喜爱，近几年更是呈现爆发式发展，2020年Github热度排名超越C#、C++、PHP等主流语言占据第四，仅次于JavaScript、Python和Java。

1.1 能编译到JavaScript的语言

在所有ALTJS中应用比较广泛的有CofffeeScript、Kotlin、ReScript、Jangaroo、Dart、Objective-J、HAXE、PyJS、asmjs、FlowType和本文主要介绍的主角TS。

图 1.1 能编译到JavaScript到语言

1.2 TypeScript和伙伴们

目前最成功的要数TS。TS的三个重要特性是：

JavaScript结合静态类型；
具有非常完善的工具集，如VSCode；
TS更贴合最新的ES标准；

TS接近的语言和工具主要有：CoffeeScript、BulkleScript、FlowType。
CoffeScript是一种动态类型的语法糖，它的特点是转化的JavaScript没有任何优化，入手难度较低，但是工具链较差，一些纯文本编辑器进行了支持，像Vim、Emacs、gedit、jEdit以及IntelliJ IDEA也分别有插件提供了对CoffeeScript的支持。BuckleScript是一种将OCaml语言编译到JavaScript的编译器（号称最快速的JS编译器），脱胎于OCaml，具有强大的类型系统，并且编译高度优化，缺点是语法疏远，上手较难。FlowType是一种静态类型检测工具，采用JavaScript + 类型标注的原理进行检查，它也能够准确地跟踪变量的类型，就像运行时那样。FlowType的特点是工具相对完善，上手容易，和TS相似。

1.3 TypeScript发展历程

TS的发明人是著名的大神Anders Hejlsberg，大神是几大著名语言和工具C#、Pascal compiler、Visual J++的发明人。TS最初是个微软内部项目，叫Strada，致力于提升大型JS项目（当时内部需求是 Bing Maps、Office Web Apps甚至Windows 8 apps）的可靠性和可维护性。2010 年开始开发，并于2012年发布了第一个版本TS 0.8。
在2013年的0.9版本中加入了泛型，在2014到2015年的1.x版本中加入了联合类型、交集类型和字面类型。在2016年的2.0版本中加入了可空类型。随后的类型中加入了其他TS特有类型。截止文章发表前，最新版本是4.1。

图 1.2 TS发展时间线

二、创建一个TS Demo项目

在介绍TS特性之前，先创建一个TS项目，方便读者进行验证。

2.1 安装依赖项

在node官方网站上下载并安装nodejs。安装完成后验证node版本：

$ node -v

在全局安装npm：

$ npm install npm -g

全局安装TS：

$ npm -g install typescript

验证TS编译器安装成功：

$ which tsc

新建一个文件夹存放项目文件，如ts-demo。

$ mkdir ts-demo

创建 tsconfig.json文件。

$ cd ts-demo
$ tsc --init

$ yarn init

安装 ts 作为开发阶段的依赖项。

$ yarn add typescript -D

安装 @types/node 让 node 的核心包具备类型提示。

$ yarn add @types/node -D

安装 ts-node-dev，能直接执行并且监听 ts 文件的变化。

$ yarn add ts-node-dev -D

2.2 Hello World

新建一个ts文件，并在文件中添加执行语句。

$ touch demo.ts

添加：

Console.log('Hello World!');

在 package.json 中定义一个启动脚本：

"scripts": {
    "start": "ts-node-dev --respawn ./demo.ts"
}

运行ts代码，打印Hello World！则代表成功：

$ npm run start
>> Hello World!

三、基本特性

3.1 类（Classes）

类是ES6支持的特性，TS很好的实现了相关标准，因此对于面向对象编程具有友好的使用体验。如下是一个典型的类。一个类的修饰符包括class类型的修饰符，类的名字（Greeter），类的成员变量（greeting），构造函数（constructor），成员函数（greet()）。一个类不占用任何空间，只有在实例化的时候才会占用空间。在实例化一个时，通过new修饰符，在new后面加上类名称（Greeter）并传入初始化成员变量的参数（“world”），然后将整个表达式赋值个变量greeter即完成了实例化，greeter称为类（Greeter）的一个实例，通过点号运算的方式调用成员函数。

//类
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
//类实例化
let greeter = new Greeter("world");
//实例的使用方法
greeter.greet();  //输出 "Hello，world"

3.2 类继承（Inheritance）

在TS里，我们可以使用常用的面向对象模式。基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。如被继承类（Animal）和继承类（Dog），Dog通过操作符extends实现对Animal类的继承，继承之后，Dog就包含Animal的全部成员变量、成员函数。实例化Dog之后就能使用Animal的相关特性。

//被继承类
class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}
//继承类
class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}
//实例化
const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();

3.3 接口（Interfaces）

TS的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TS里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。接口主要有一下特性。

3.3.1 接口参数检查

类型检查器会查看printLabel的调用。printLabel有一个参数，并要求这个对象参数有一个名为label类型为string的属性。需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。

interface LabelledValue {
    label: string;
}

function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

3.3.2 接口的实现

与C#或Java里接口的基本作用一样，TypeScript也能够用它来明确的强制一个类去符合某种契约。比如定义一个接口ClockInterface，它具有参数currentTime和方法setTime。如果有需求定义一个类，这个类正好包含接口ClockInterface里面定义的参数和方法，那么，可以使用implements关键字来实现一个接口。

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

3.3.3 接口的继承

和类一样，接口也可以相互继承。这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。一个接口（Shape）具有属性（color），另一接口（Square）也具有属性（color），那么就能使用继承（extends）来扩展接口（Square）。

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;

3.3.4 混合类型

先前我们提过，接口能够描述JavaScript里丰富的类型。因为JavaScript其动态灵活的特点，有时你会希望一个对象可以同时具有上面提到的多种类型。一个例子就是，一个对象可以同时做为函数和对象使用，并带有额外的属性。比如想定义一个新类型（Counter），这个类型同时包含以number传入参数（start）返回为string类型的无名函数子类型；number类型的子类型（interval）；返回为空的函数子类型（reset）。定义完成之后，就像其他基础类型一样进行使用。如下，定义一个返回类型为Counter类型的函数getCounter，在函数体内部，可以这样使用，定义一个类型为Counter类型的无名函数counter，它的传入参数为start，那么就能使用counter的interval属性参数和对reset函数进行具体实现。

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}
function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

3.3.5 接口继承类

当接口继承了一个类类型时，它会继承类的成员但不包括其实现。就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。接口同样会继承到类的private和protected成员。这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implements）。

class Control {
    private state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

class Button extends Control implements SelectableControl {
    select() {}
}

class TextBox extends Control {
    select() {}
}

3.4 类型推论（Type Inference）

TS里，在有些没有明确指出类型的地方，类型推论会帮助提供类型。如下面的例子：

//例子一、自动推断为数字类型
let x = 3;  
//例子二、推断为联合类型(Rhino | Elephant | Snake)[]
let zoo = [new Rhino(), new Elephant(), new Snake()]; 
//例子三、明确的指出类型
let zoo: Animal[] = [new Rhino(), new Elephant(), new Snake()]; 
function createZoo(): Animal[] {
    return [new Rhino(), new Elephant(), new Snake()];
}

在例子一中，变量x的类型被推断为数字。这种推断发生在初始化变量和成员，设置默认参数值和决定函数返回值时。
在例子二中，由于最终的通用类型取自候选类型，有些时候候选类型共享相同的通用类型，但是却没有一个类型能做为所有候选类型的类型。我们想让zoo被推断为Animal[]类型，但是这个数组里没有对象是Animal类型的，因此不能推断出这个结果。为了更正，当候选类型不能使用的时候我们需要明确的指出类型，如例子三。

3.5 泛型（Generics）

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。比如想定义一个函数head，预期传入一个array的数组类型，然后返回数组第一个值，这样做其实是不安全的，有时候可能传入的是一个空，那么可能会报错。那么可以限定传入参数为Array，返回为any。还有进一步的需求，要求传入的Array的成员类型为统一的类型，同时穿出类型也为数组成员相同的类型，那么这是可以用到泛型，表示方法如下，函数head的传入参数类型为T表示任何类型（表示为<T>），传入参数类型为对应元素类型T的数组(表示为Array<T>)，函数返回为类型T（表示为T）。

function head(arry) {
    return array[0];
}
function head(arry: Array): any {
    return array[0];
}
function head<T>(arry: Array<T>):T {
    return array[0];
}

3.5.1 泛型上界

有时候想操作某类型的一组值，并且我们知道这组值具有什么样的属性和方法，这时我们可以直接操作，如下面的例子，定义一个函数（mySort），对传入对数组（array）使用方法（compare）进行排序。但是编译器并不能证明每种传入对数组类型都有方法（compare），所以有可能会报错。但是有一种发发可以满足这个需求，就是对传入对所有数组类型进行扩展，让传入的数组元素都添加上方法（compare），具体写法是（<T extends Compare>）。

//普通函数表示法
function mySort(arry) {
    array.sort((x, y) => x.compare(y));
    return array;
}

//定义一个接口
interface Compare {
     compare(y: Compare): boolean
}
function mySort(array: Array<Compare>): Array<Compara> {
     array.sort((x, y) => x.compare(y));
     return array;
}

//通过泛型
function mySort<T extends Compare>(array: Array<T>) : Array<T>{
     array.sort((x, y) => x.compare(y));
     return array;
}

3.6 联合类型（Union Types）

偶尔会遇到这种情况，一个函数希望传入string或正则表达式或者数组类型的参数。例如下面的函数：

//需求：能够接受多种类型的输入
testPath (’/path/’)
testPath (/path/)
testPath ([‘path’, /path/])

testPath存在一个问题，path参数的类型指定成了any。这就是说我们可以传入一个既不是string也不是正则表达式类型也不是数组类型的参数，但是TS却不报错。
在传统的面向对象语言里，我们可能会将这两种类型抽象成有层级的类型。这么做显然是非常清晰的，但同时也存在了过度设计。testPath原始版本的好处之一是允许我们传入原始类型。这样做的话使用起来既简单又方便。如果我们就是想使用已经存在的函数的话，这种新的方式就不适用了。

//解决方案1：采用分支判断
function testPath (path: any) {
    if (typeof path === ‘string’) {
        return path.toLowerCase() === ‘path’;
    } else if (path instanceof RegExp) {
        return path.test(‘/path’);
    } else {
        return path.some(testPath);
    }
}

代替any，我们可以使用联合类型做为path的参数：

//解决方案2：使用联合类型
type PathParam = string | RegExp | Array<string | RegExp>
function testPath (path: PathParam) {
    if (typeof path === ‘string’) {
        return path.toLowerCase() === ‘path’;
    } else if (path instanceof RegExp) {
        return path.test(‘/path’);
    } else {
        return path.some(testPath);  // path.length is an error
    }
}

联合类型表示一个值可以是几种类型之一。我们用竖线（|）分隔每个类型，所以 number | string | boolean表示一个值可以是 number、string或 boolean。

3.7 交集类型（Intersection Types）

交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。例如，Person & Serializable & Loggable同时是 Person 和 Serializable 和 Loggable。就是说这个类型的对象同时拥有了这三种类型的成员。
我们大多是在混入（mixins）或其它不适合典型面向对象模型的地方看到交叉类型的使用。如下面的例子，有一个需求，要合并两个对象（{name: ‘moe’}和{age: 50}），一般情况下可能直接定义带两个传入参数（fst，snd）的函数merge。现在有更优雅的方法，可以定义一个接口（Merged），属性包括合并之后的属性（name，age），那么我们可以使用带注解的方式定义函数如merge<Merged>({name: ‘moe’}, {age: 50})。也可以使用泛型的方法进行定义如：merge<T, U> (fst: T, snd: U): T&U，输入参数为T和U两个中类型的数据，返回值为T&U交集类型的数据。

//需求：实现不同对象的合并
merge({name: ‘moe’}, {age: 50});   // => {name: ‘moe’, age: 50}

//解决方案1：
function merge (fst, snd) {
     let ret = {};
     for (id in fst) ret[id] = fst[id];
     for (id in snd) ret[id] = snd[id];
     return ret;
}

//解决方案2：使用注解
interface Merged {
    name: string;
    age: number;
}
merge<Merged>({name: ‘moe’}, {age: 50});

//解决方案3：不使用注解
function merge<T, U> (fst: T, snd: U): T&U {
     let ret = <any>{};
     for (id in fst) ret[id] = fst[id];
     for (id in snd) ret[id] = snd[id];
     return ret;
}

merge({name: ‘moe’}, {age: 50});

3.8 字面量类型（Literal Types）

字符串字面量类型允许你指定字符串必须的固定值。在实际应用中，字符串字面量类型可以与联合类型，类型保护和类型别名很好的配合。通过结合使用这些特性，你可以实现类似枚举类型的字符串。比如定义一个动画方法（animate），它能沿着x方向移动一定对距离，y方向移动一定的距离，并且移动效果是固定的。这时可以定义一个接口对这个函数进行标准化，比如x、y的类型是number类型。移动特效（ease）可以定义成两种（‘ease-in’和‘ease-out’），当你输入特效参数为‘ease-inout‘则会报错，因为‘ease-inout‘不属于联合类型（‘ease-in’｜‘ease-out’）。像‘ease-in’就属于字面量类型。

$element.animate({
    x: 114,
    y: 514,
    ease: ‘ease-in’,
})

interface AnimateParam {
   x: number,
   y: number,
   ease: string,
}

$element.animate({
    x: 114,
    y: 514,
    ease: ‘ease-out’, //typo
})

interface AnimateParam {
   x: number,
   y: number,
   ease: ’ease-in’ | ‘ease-out’,
}

$element.animate({
    x: 114,
    y: 514,
    ease: ‘ease-inout’,  //typo
})

3.9 可空类型（Nullable Types）

TS具有两种特殊的类型，null和undefined，它们分别具有值null和undefined。默认情况下，类型检查器认为null与undefined可以赋值给任何类型。null与undefined是所有其它类型的一个有效值。这也意味着，你阻止不了将它们赋值给其它类型，就算是你想要阻止这种情况也不行。null的发明者，Tony Hoare，称它为价值亿万美金的错误。

图 3.1 非零、零、空（null）、未定义（undefined）的示意图比如定义一个函数（len），输入参数为arr，意图是输入一个数组类型的值（arr），返回值是arr的长度，在JS里面没有类型约束，用户如果不按照预想输入参数，比如输入一个null，则会报错。在TS里面，则支持null类型的值判断，可以直接判断是否为null类型的值。因此我们重新定义一个函数（lenNullable），可以先判断是否为null，是的话直接返回0，不是的话就返回arr的长度。

function len(arr) {
   return arr.length;
}

function lenNullable(arr) {
   if (arr != null) {
      return arr.length; 
   }
   return 0;
}

len([1, 2, 3])  //ok
len(null) //compare error
lenNullable([1, 2, 3])  //ok
lenNullable(null) //ok

四、TS的适用场景

任何语言都有其适用的场景，TS具有优秀的特性，但是也有其主要解决的问题。本部分将简单讨论一下什么情况下绝对应该使用 TypeScript，什么情况下不应该用它，而是继续使用原生 JS。

表 4.1 TS的适用场景

场景	适用性
性能系统问题	X
嵌入式系统问题	X
复杂领域问题	X
大规模代码	✓
较小的团队和编码风格	✓
生产软件与宠物项目	✓
缺乏单元测试	✓
初创企业	X
大团队	✓
显而易见的改进	✓
架构	✓

性能系统问题：对于需要高IO并发、高QPS等问题归属为性能问题，这种问题通常和网络、硬件相关，大多是C或者C++，而且更关注的是程序的高效运行，是否使用严格类型的语言就不是首要考虑的问题。
嵌入式系统问题：嵌入式系统是计算机硬件和软件的组合，其目的是控制系统的机械或电气部分。我们今天使用的大多数系统都是建立在非常复杂的代码层之上的，这些代码要么是C或C++，要么就是能编译为这两种语言。C是程序性的，所以我们想要用它编写出简洁的代码就很困难。程序员还需要了解底层细节才能解决很多问题。C++确实具有面向对象的特性，能明显改善开发体验，但还是需要程序员与底层硬件细节进行直接交互。因为这些场景中能使用的语言实际上没有太多选择。TS在这些场景下应用意义不大。
复杂领域问题：对于某些场景来说，程序员面临的挑战不是要处理大量请求，而是扩展代码库的大小。很多企业需要解决现实生活中的一些很复杂问题。在这些公司中，最大的工程挑战通常是：（1）在逻辑层面（通过域）将单体组件分解成较多小应用，在物理层面（通过微服务在限界上下文中）将它们拆分，并分配不同团队维护。（2）处理应用之间的集成和同步；（3）建模领域概念并实际解决领域问题；（4）创建一种通用语言，功开发人员和领域专家共享；（5）避免陷在规模庞大的代码泥潭中，也不会沦落到要添加新功能就一定要破坏已有功能的地步。
大规模代码：代码大小通常与复杂领域问题有关，在复杂领域问题中，一个大型代码库对应着一个复杂领域，但并非总是如此。当项目的代码量达到一定大小时，开发人员就很难跟踪已有的所有内容，并且经常会重复实现一些已经存在的代码部分。当开发新手开始在一个体积已经很大的代码库上编程时，这个问题就会特别明显。这时候就要考虑使用TS去实现各个部分了，类、接口、强类型等工具能有效降低重复。如果一个项目会一直保持简单且小巧的设计，或者它到最后肯定会被放弃，那么我就不那么推荐使用 TS了。
生产软件：指的是你很在乎的那些代码，或者是一旦跑不起来就会给你带来麻烦的那些代码。你的测试也是针对这些代码编写的。如果缺乏测试，但是TS的特性使用能够提增强使用者的信心。宠物项目：正如其字面意义所言。你想做什么就可以做什么。你不需要什么专业承诺，用不着坚持任何工业标准。但是在特定条件下宠物项目可能会升级为生产项目，因此，建议宠物项目也采用TS开发。
缺乏单元测试：如果没有单元测试，那么你能选择的最佳方案就是使用TS进行编译时检查。但是，编译时检查不能取代单元测试。单元测试的优点在于它可以用任何语言编写——因此这里的TS参数是无关紧要的。重点在于我们要编写测试，并且对代码能有信心。
初创企业：在这一时期，你选择哪种语言并没那么重要。你要做的最重要的事情就是验证你的产品。在这种情况下请使用你最喜欢的风格：有没有类型都可以。当你构建出了人们真正想要的东西之后，随时可以将其重构为更好的设计。
大团队工作：根据团队的规模和所使用的框架，TS可能会带来帮助或者引发灾难。但是对于大团队，往往需要较强的编程规范，清晰的模块划分，可扩展的架构，使用 TS时，我们可以节省大量时间并提高沟通效率。而且设计模式也可以通过明确的类型严格语言来轻松传达。因此大团队应该首选TS作为开发语言。
显而易见的改进：使用TS我们立刻就能知道某类是抽象的，并且可以通过实体类来实例化抽象类，而不必每次创建新类，这是显而易见的改进的一种，并且能很好的提高效率。但在 JavaScript 示例中我们得研究半天。如果你在一个大型团队中工作，并且需要尽量减少他人滥用你的代码的潜在途径，TS正确设置了相应的限制。因此，TS 就是帮助你解决这类问题的好帮手。
架构：架构一般包含了大量的设计模式、抽象模型、可复用的接口和可扩展的数据结构，正如前文所述，这种情况下，TS应该成为首选开发语言，这样能降低沟通成本，使架构的传播更迅速，如Anuglar。
总之，TS具有相应的适用场景，应该综合考虑，以提高效率、降低成本、提高可维护性为总体原则选择开发语言。

五、语言排名

近几年来，TS呈爆发性增长，TS在《2020 年度 GitHub Octoverse 报告》中排名第四。相较于其他老牌语言，TS也将在本月迎来十周岁。TS的流行，对于开发者而言，虽然有些出乎意料，但似乎也在情理之中，对此，Anders Hejlsberg曾表示：“JavaScript 和TypeScript 的主要用途在前端，也是唯一能运行在浏览器中的语言，除了 WebAssembly之外。因此，二者之间自然非常亲近。如果要编写 Web 应用程序，你肯定会选择使用JavaScript 或TypeScript。”
由于TS是JavaScript 的超集，因此你也可以将JavaScript 视为TS的子集。这意味着我们的整个TS工具链都非常乐于处理JavaScript，并在JavaScript之上提供所有服务。从某种意义上说，JavaScript 就像没有类型注释的TS。也正因此，如今，TS已成为构建在浏览器中运行的应用时最常使用的编程语言。

图 5.1 2020年Github语言流行度排名

六、知名项目

目前大量开源项目采用TS作为主开发语言，TS的受欢迎程度可见一般。在Github上的TypeScript主题下面，具有超过50000个开源项目，其中比较著名的有VS Code，开源前端框架Angular、前端UI库Ant Design、桌面开发框架Electron、UI库Material UI、格式规范工具TSLint、Github桌面版Github Desktop、移动端开发框架Ionic等等。TS正以快速融入各个开源项目。