Menu Close

TypeScript

TypeScript是由微软进行开发和维护[4]的一种开源的编程语言。TypeScript是JavaScript的严格语法超集,提供了可选的静态类型检查。

typescript
typescript

TypeScript的知名开发者有C#的首席架构师兼Delphi和Turbo Pascal的创始人——安德斯·海尔斯伯格[5][6][7][8]

TypeScript是为开发大型应用程序而设计的,且可转译成JavaScript[9]。由于TypeScript是JavaScript的严格语法超集,因此任何现有的JavaScript程序都是合法的TypeScript程序。

TypeScript支持为现存JavaScript函数库添加类型信息的定义文件,方便其他程序像使用静态类型的TypeScript实体一样,使用现有程序库中的值,就像是C++的头文件可以描述目标文件(objectfile)的结构一样。有许多第三方头文件为热门函数库像是jQuery、MongoDB、Node.js和D3.js等提供定义文件。

TypeScript编译器本身也是用TypeScript编写,并被转译为JavaScript,以Apache许可证第二版发布。

TypeScript(TS)JavaScript超集(Superset),由 Microsoft(微软) 开发。它在 JavaScript 的基础上增加了静态类型(Static Typing),让开发者可以在编写代码时提前发现错误,提高代码质量和可维护性。

强类型系统(可选的静态类型检查)
完全兼容 JavaScript(可以运行任何 JS 代码)
支持最新的 ES6/ESNext 特性(如 async/await、装饰器等)
更好的代码提示和 IDE 支持(如 VS Code)
支持面向对象编程(OOP)classinterfaceenum
支持模块化import/export

一句话总结:TypeScript = JavaScript + 类型检查 + ES6/ESNext 特性 + 更好的开发体验

一、TypeScript背景

经过微软两年的内部开发后,TypeScript于2012年10月首次发布(0.8版本)。[10][11]在发布后不久,Miguel de Icaza认可了这门语言,但批评了其糟糕的IDE支持性,仅有Microsoft Visual Studio IDE支持其代码,但此IDE当时未在Linux和OS X操作系统上发布[12][13]。如今,在其他IDE中(例如:Eclipse),通过Palantir Technologies提供的插件支持,能支持TypeScript语法[14][15]。大部分主流的文本编辑器,例如:Emacs、Vim、WebStorm、Atom[16]和微软发布的Visual Studio Code也能支持TypeScript语法[17]

2013年发布的 TypeScript 0.9增加了对泛型的支持[18]。TypeScript 1.0在2014年的微软开发者大会上发布。[19]Visual Studio 2013 Update 2为TypeScript提供了原生支持[20]

2014年7月,开发团队发布了新的TypeScript编辑器,声称其性能提高了5倍。同时,代码托管由CodePlex迁移至GitHub[21]

2016年9月22日,TypeScript 2.0发布,其中引入了几个功能,例如开发者可以选择不为变量分配空值等[22]

2018年7月30日,TypeScript 3.0发布[23],其中包含许多新功能,例如剩余参数(页面存档备份,存于互联网档案馆)、展开语法(页面存档备份,存于互联网档案馆)、带有元组的剩余参数、带有通用类型的剩余参数等[24]

二、TypeScript设计背景

TypeScript起源于JavaScript在微软以及客户中开发大型应用中遇到的缺点[25]。处理复杂JavaScript代码带来的挑战使他们需要自定义工具来简化组件开发流程[26]

TypeScript开发者寻求一种不破坏现有标准兼容性和跨平台支持的解决方案。直到ECMAScript标准为未来基于类编程提供支持后,Typescript开发便基于此方案。这形成了包含一组新的语法扩展的一个JavaScript编译器,一个基于此提案的超集,可将TypeScript语法编译为常规的JavaScript。从这个意义上来讲,TypeScript是ECMAScript2015预期内容的预览版本。提案中未包括的可选静态类型被添加到了TypeScript中,有助于促进工具和IDE支持。

ECMAScript 6支持

TypeScript添加了ECMAScript 2015标准中定义的类、模块和箭头函数等语法的支持。

三、TypeScript语言特性

TypeScript是一种为JavaScript添加特性的语言扩展。增加的功能包括:

  • 类型批注和编译时类型检查
  • 类型推断
  • 类型擦除
  • 接口
  • 枚举
  • Mixin
  • 泛型编程
  • 命名空间
  • 元组
  • async/await

以下功能是从ECMA 2015反向移植而来:

  • 模块[27]
  • 匿名函数的箭头语法
  • 可选参数以及默认参数

在语法上,TypeScript很类似JScript .NET,它是另外一个微软对ECMA-262语言标准的实现,添加了对静态类型、经典的面向对象语言特性(如类、继承、接口和命名空间等)的支持。

四、TypeScript 语法

4.1. 变量声明(强类型)

let name: string = "Alice";  // 字符串
let age: number = 25;        // 数字
let isStudent: boolean = true;  // 布尔值

 

错误示例:

let age: number = "twenty-five";  // ❌ 报错:不能将 string 赋值给 number

4.2. 函数(参数 & 返回值类型)

function add(a: number, b: number): number {
  return a + b;
}
console.log(add(5, 3)); // ✅ 输出 8

 

错误示例:

add("hello", 3);  // ❌ 报错:参数类型不匹配

 


4.3. 可选参数 & 默认参数

function greet(name: string, age?: number): string {
  return age ? `Hello ${name}, you are ${age} years old.` : `Hello ${name}!`;
}
console.log(greet("Alice"));  // ✅ "Hello Alice!"
console.log(greet("Bob", 25)); // ✅ "Hello Bob, you are 25 years old."

4.4. 接口(Interface)

interface Person {
  name: string;
  age: number;
  greet(): void;
}

const user: Person = {
  name: "Alice",
  age: 25,
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

user.greet(); // ✅ "Hello, my name is Alice."

 


4.5. 类(Class)

class Animal {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }

  speak(): void {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak(): void {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // ✅ "Buddy barks."

 


4.6. 泛型(Generics)

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

console.log(identity<number>(5));  // ✅ 5
console.log(identity<string>("Hello"));  // ✅ "Hello"

 


4.7. 类型别名(Type Alias)

type ID = string | number;

let userID: ID = 123;
userID = "ABC123";  // ✅ 允许
// userID = true;   // ❌ 报错:布尔值不是 ID 类型

4.8.模块和命名空间

在TypeScript中,模块和命名空间是被区分开的。这两项功能在TypeScript中皆支持将类型、接口、函数和变量封装至容器内。命名空间(旧称内部模块)使用JavaScript的立即调用函数表达式来封装代码,而模块(旧称外部模块)则是以JavaScript函数库模式来达成(异步模块定义或CommonJS)。

五、与JavaScript的兼容性

TypeScript是JavaScript的超集。默认情况下编译器以ECMA Script 3(ES3)为目标但ES5也是受支持的一个选项。一个TypeScript应用可以利用已存在的JavaScript脚本。编译后的TypeScript脚本也可以在JavaScript中使用。

现有框架如jQuery和Node.js等受到完全支持。这些库的类型声明在源代码中提供。

六、支持的浏览器和平台

没有任何浏览器或者运行时能够直接执行不经处理的TypeScript代码,因为TypeScript中的类型注解等特性并不在ECMAScript规范之中。[28]

Node.js自22.6.0版本开始,便提供了少部分实验性的TypeScript支持。[29]Bun、Deno等JavaScript运行时也提供了直接运行TypeScript文件的功能,编译到JavaScript的工作会在内部发生,不需要用户手动进行操作。[30][31]

七、开发工具

7.1. 编译器

TypeScript编译器,叫做tsc,本身也是用TypeScript写成的。可以将TypeScript编译为可以在任何JavaScript引擎(如浏览器)中执行的标准JavaScript。编译器包也包含了脚本解释器,用来执行编译器。同时也有个Node.js包,在Node.js平台执行。

另外还有一个用JavaScript写的alpha版本的客户端编译器,它在页面加载时,实时执行TypeScript代码。[32]

这种编译器的当前版本默认支持ECMAScript 2015。一个选项是允许以ECMAScript 2015为目标,以利用该版本独有的语言特性(比如生成器)。类是ECMAScript 2015标准的一部分,在这两个模式下都可以使用。

7.2. IDE和编辑器支持

  • 微软为Visual Studio 2012和WebMatrix提供了一个插件,在Visual Studio 2013和Visual Studio 2015中内嵌了支持,也为Sublime Text、Emacs和Vim提供了基本的文本编辑器支持。[33]
  • Visual Studio Code是一个开源的、跨平台的代码编辑器,是微软在Electron的基础上开发的。它支持TypeScript,同时也支持其他几个语言,同时提供了调试和自动代码补全的功能。
  • JetBrains在他们的IDE系列中支持TypeScript,而且已经发行了具有部分支持的PhpStorm 6和WebStorm 6以及IntelliJ IDEA。[34]同时他们的Visual Studio扩展ReSharper (页面存档备份,存于互联网档案馆)8.1也支持。[35]
  • Atom也有一个TypeScript插件, 由Basarat开发,支持代码补全、跳转、格式化和快速完成。
  • 在线的Cloud9 IDE和Codenvy也支持TypeScript。
  • NetBeans也有一个插件
  • Eclipse IDE(Kepler)也有一个插件
  • TypEcs也是一个Eclipse IDE插件
  • Microsoft为Sublime Text提供了TypeScript插件
  • 跨平台云IDE Codeanywhere支持TypeScript
  • Webclipse 是一个Eclipse插件,用于开发TypeScript 和 Angular 2
  • Angular IDE是一个可以从npm安装的IDE,可以开发TypeScript和Angular 2应用,集成终端支持
  • Tide (页面存档备份,存于互联网档案馆) — Emacs的TypeScript交互开发环境

八、开源

TypeScript是开源的,其源代码可以在Apache 2 License下从Github获得。这个项目由Microsoft维护,但是任何人可以通过在Github项目页发送反馈、提出建议和提交bugfixes而做出贡献。[36]

已有一些批评提到,TypeScript鼓励强类型,当前只有Microsoft Visual Studio支持在该语言上方便开发。最初的方案是在其它的编辑器上带来强类型,IntelliSense、代码完成和代码重构的功能,但这可能不是一个简单的任务。[37]此外,支持TypeScript开发的Visual Studio扩展不是开源的。最好的TypeScript开发体验是在Microsoft Windows上,[38]然而随着时间的流逝以及这种语言的开放性,加之编译器自我托管,而且用TypeScript自身写的,这很有可能会改变。通过编译器的源代码访问到AST(抽象句法树)以及详细的语言规范文档,社群已开始构建一个跨平台的编辑器,[39][40]利用和Visual Studio所用到的相同的语言服务以提供一个增强的编辑体验。编辑器仍然在概念检验的阶段,但已经运行于Linux、macOS和Windows,提供功能强度相同的IntelliSense、代码完成和句法高亮方法。

九、TypeScript 的应用领域

TypeScript(TS)因为其强类型、安全性、现代化特性,已经在多个领域广泛应用,特别是在前端、后端、跨平台开发等方面表现突出。以下是 TypeScript 的主要应用领域:

9.1. 前端开发(Web 开发)

🔹 TypeScript + React

  • React 官方推荐 TypeScript,许多大型项目(如 Microsoft、Meta、Airbnb)都在用 TS + React。

  • 好处

    • 类型安全,避免 undefined 错误

    • 更好的组件开发体验(Props & State 类型)

    • 与 Redux、Context API 结合更流畅

  • 示例

    interface ButtonProps {
      label: string;
      onClick: () => void;
    }
    
    const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
      return <button onClick={onClick}>{label}</button>;
    };
    

🔹 TypeScript + Vue

  • Vue 3 直接内置了 TS 支持,可以使用 TS 开发组件和 Vuex 状态管理。

  • 示例(Vue 3 Composition API)

    import { defineComponent, ref } from 'vue';
    
    export default defineComponent({
      setup() {
        const count = ref<number>(0);
        const increment = () => count.value++;
    
        return { count, increment };
      },
    });
    

🔹 TypeScript + Angular

  • TypeScript 是 Angular 官方默认语言,Angular 本身就是基于 TS 开发的。

  • 适用于企业级应用,如银行、政府系统、后台管理系统。


9.2. 后端开发(Node.js)🖥️

🔹 TypeScript + Express

  • Express 是 Node.js 最流行的后端框架,使用 TS 可提高代码安全性和可维护性。

  • 示例(Express + TS)

    import express, { Request, Response } from 'express';
    
    const app = express();
    const PORT = 3000;
    
    app.get('/', (req: Request, res: Response) => {
      res.send('Hello TypeScript with Express!');
    });
    
    app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
    

🔹 TypeScript + NestJS

  • NestJS 是基于 TypeScript 开发的 Node.js 框架,适用于企业级后端应用

  • 支持 依赖注入(DI),类似 Java 的 Spring 框架。

  • 适用于 REST API、GraphQL、微服务架构(Microservices)


9.3. 跨平台开发 📱

🔹 TypeScript + React Native(移动端开发)

  • React Native 允许使用 TypeScript 开发 iOS 和 Android 应用。

  • 示例(React Native + TS)

    import React from 'react';
    import { Text, TouchableOpacity, View } from 'react-native';
    
    interface Props {
      title: string;
      onPress: () => void;
    }
    
    const Button: React.FC<Props> = ({ title, onPress }) => (
      <TouchableOpacity onPress={onPress}>
        <Text>{title}</Text>
      </TouchableOpacity>
    );
    

🔹 TypeScript + Electron(桌面应用开发)

  • Electron 允许使用 TypeScript 开发 Windows、Mac、Linux 的桌面应用。

  • VS Code 就是用 TypeScript + Electron 开发的!


9.4. 游戏开发 🎮

🔹 TypeScript + Phaser.js

  • Phaser.js 是一个 HTML5 游戏开发框架,支持 TypeScript,适用于 2D 游戏开发。

  • 示例

    import Phaser from 'phaser';
    
    class MyGame extends Phaser.Scene {
      constructor() {
        super('MyGame');
      }
    
      preload() {
        this.load.image('logo', 'assets/logo.png');
      }
    
      create() {
        this.add.image(400, 300, 'logo');
      }
    }
    
    new Phaser.Game({
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      scene: MyGame,
    });
    

9.5. 云计算 & DevOps ☁️

🔹 TypeScript + AWS Lambda

  • AWS Lambda 是一个无服务器计算平台,支持 TypeScript 开发无服务器(Serverless)应用。

  • 示例(Lambda 函数)

    import { APIGatewayEvent, Context } from 'aws-lambda';
    
    export async function handler(event: APIGatewayEvent, context: Context) {
      return {
        statusCode: 200,
        body: JSON.stringify({ message: "Hello from TypeScript Lambda!" }),
      };
    }
    

🔹 TypeScript + Terraform(基础设施即代码)

  • Pulumi、CDK for Terraform 允许使用 TypeScript 编写基础设施代码(IaC)。

  • 示例(AWS S3 创建)

    import * as aws from "@pulumi/aws";
    
    const bucket = new aws.s3.Bucket("my-bucket");
    
    export const bucketName = bucket.id;
    

9.6. 人工智能 & 数据科学 🤖

🔹 TypeScript + TensorFlow.js

  • TensorFlow.js 允许使用 TypeScript 进行机器学习(ML)。

  • 示例(简单神经网络)

    import * as tf from "@tensorflow/tfjs";
    
    const model = tf.sequential();
    model.add(tf.layers.dense({ units: 10, inputShape: [1] }));
    model.compile({ optimizer: "sgd", loss: "meanSquaredError" });
    
    const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
    const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);
    
    model.fit(xs, ys, { epochs: 10 }).then(() => {
      model.predict(tf.tensor2d([5], [1, 1])).print();
    });
    

9.7. 低代码 / 无代码平台 🏗️

  • 许多 低代码 / 无代码(Low-Code / No-Code)平台 使用 TypeScript 作为扩展脚本语言

  • 示例

    • Retool(企业内部工具)

    • OutSystems(企业级低代码平台)

    • Mendix(无代码应用开发)


总结 🎯

应用领域 框架 / 工具
前端开发 React, Vue, Angular
后端开发 Node.js, Express, NestJS
跨平台开发 React Native, Electron
游戏开发 Phaser.js
云计算 & DevOps AWS Lambda, Terraform
人工智能 TensorFlow.js
低代码平台 Retool, OutSystems

🚀 TypeScript 让 JavaScript 更强大、更安全、更高效!

无论是 前端、后端、桌面、移动端、云计算,甚至 AI,TypeScript 都能胜任!

参考资料

^ TypeScript. CodePlex. [2015-04-26]. (原始内容存档于2015-04-03).

  1. ^ Release v5.8.2.
  2. ^ Type Compatibility. TypeScript. [2018-03-21]. (原始内容存档于2018-03-12).
  3. ^ TypeScript GitHub官网. (原始内容存档于2017-01-04).
  4. ^ Foley, Mary Jo. Microsoft takes the wraps off TypeScript, a superset of JavaScript. ZDNet. CBS Interactive. 2012-10-01 [2015-04-26]. (原始内容存档于2014-11-13).
  5. ^ Somasegar, S. Somasegar’s blog. Somasegar’s blog. Microsoft. 2012-10-01 [2015-04-26]. (原始内容存档于2015-04-22).
  6. ^ Baxter-Reynolds, Matt. Microsoft TypeScript: Can the father of C# save us from the tyranny of JavaScript?. ZDNet. 2012-10-01 [2015-04-26]. (原始内容存档于2014-08-03).
  7. ^ Jackson, Joab. Microsoft Augments Javascript for Large-scale Development. CIO. IDG Enterprise. 2012-10-01 [2015-04-26]. (原始内容存档于2013-12-17).
  8. ^ Microsoft TypeScript: the JavaScript we need, or a solution looking for a problem? | Ars Technica. [2012-10-09]. (原始内容存档于2015-03-29).
  9. ^ Microsoft augments JavaScript for large-scale development. InfoWorld. IDG. 1 October 2012 [26 April 2015]. (原始内容存档于2013-05-31).
  10. ^ Turner, Jonathan. Announcing TypeScript 1.0. TypeScript Language team blog. Microsoft. 2 April 2014 [26 April 2015]. (原始内容存档于2015-05-02).
  11. ^ Microsoft TypeScript: Can the father of C# save us from the tyranny of JavaScript?. ZDNet. 1 October 2012 [12 October 2012]. (原始内容存档于2014-08-03). And I think this is a pretty big misstep. If you’re building web apps that run on anything other than Windows, you’re likely using a Mac and most likely not using Visual Studio. You need the Visual Studio plug-in to get the IntelliSense. All you get without Visual Studio is the strong-typing. You don’t get the productivity benefits you get from IntelliSense..
  12. ^ Miguel de Icaza. TypeScript: First Impressions. 1 October 2012 [12 October 2012]. (原始内容存档于2019-02-24). But TypeScript only delivers half of the value in using a strongly typed language to Unix developers: strong typing. Intellisense, code completion and refactoring are tools that are only available to Visual Studio Professional users on Windows. There is no Eclipse, MonoDevelop or Emacs support for any of the language features
  13. ^ TypeScript-Unterstützung für Eclipse. heise Developer. 6 August 2013 [26 April 2015]. (原始内容存档于2018-07-11).
  14. ^ TypeScript. Eclipse Marketplace. Eclipse Foundation. [26 April 2015]. (原始内容存档于2018-10-10).
  15. ^ TypeStrong: The only TypeScript package you will ever need. [21 July 2016]. (原始内容存档于2018-12-19).
  16. ^ Hillar, Gastón. Working with TypeScript in Visual Studio 2012. Dr. Dobb’s Journal. 14 May 2013 [26 April 2015]. (原始内容存档于2018-09-29).
  17. ^ TypeScript 0.9 arrives with new compiler, support for generics. The Register. 18 June 2013 [26 April 2015]. (原始内容存档于2018-03-11).
  18. ^ Hejlsberg, Anders. TypeScript. Channel 9. Microsoft. 2 April 2014 [26 April 2015]. (原始内容存档于2015-05-25).
  19. ^ Jackson, Joab. Microsoft TypeScript graduates to Visual Studio. PC World. IDG. 25 February 2014 [26 April 2015]. (原始内容存档于2016-03-11).
  20. ^ Turner, Jonathan. New Compiler and Moving to GitHub. TypeScript Language team blog. Microsoft. 21 July 2014 [26 April 2015]. (原始内容存档于2015-10-27).
  21. ^ Bright, Peter. TypeScript, Microsoft’s JavaScript for big applications, reaches version 2.0. Ars Technica. Condé Nast. 22 September 2016 [22 September 2016]. (原始内容存档于2018-12-21).
  22. ^ Announcing TypeScript 3.0. 30 July 2018 [16 March 2020]. (原始内容存档于2020-05-30).
  23. ^ TypeScript 3.0. 30 July 2018 [16 March 2020]. (原始内容存档于2020-06-06).
  24. ^ Anders Hejlsberg. What is TypeScript and why with Anders Hejlsberg. www.hanselminutes.com. 5 October 2012 [15 January 2014]. (原始内容存档于2018-12-27).
  25. ^ S. Somasegar. TypeScript: JavaScript Development at Application Scale. msdn.com. 1 October 2012 [27 November 2013]. (原始内容存档于2015-04-22).
  26. ^ 存档副本. [2012-11-10]. (原始内容存档于2012-11-13).
  27. ^ TypeScript: Documentation – 基础. TypeScript Handbook. [2025-01-04]. (原始内容存档于2024-12-24). 类型注解并不属于 JavaScript(或者专业上所说的 ECMAScript)的内容,所以没有任何浏览器或者运行时能够直接执行不经处理的 TypeScript 代码。
  28. ^ Modules: TypeScript. Node.js Documentation. [2025-01-04]. (原始内容存档于2025-02-06).
  29. ^ TypeScript – Runtime. Bun Docs. [2025-01-04]. (原始内容存档于2025-02-08). Bun can directly execute TypeScript, you may not need to transpile your TypeScript to run in production. Bun internally transpiles every file it executes
  30. ^ TypeScript support. Deno Docs. [2025-01-04]. You can run or import TypeScript without installing anything more than the Deno CLI. With its built-in TypeScript compiler, Deno will compile your TypeScript code to JavaScript with no extra config needed.
  31. ^ niutech/typescript-compile. GitHub. [2015-04-26]. (原始内容存档于2018-06-11).
  32. ^ Olivier Bloch. Sublime Text, Vi, Emacs: TypeScript enabled!. Microsoft. 2012-10-01 [2012-10-28]. (原始内容存档于2012-10-29).
  33. ^ TypeScript support in WebStorm 6. JetBrains. [2016-12-17]. (原始内容存档于2016-06-02).
  34. ^ TypeScript support in ReSharper 8.1. JetBrains. [2016-12-17]. (原始内容存档于2014-02-02).
  35. ^ 存档副本. [2016-12-17]. (原始内容存档于2017-01-04).
  36. ^ Miguel de Icaza. TypeScript: First Impressions. 2012-10-01 [2012-10-12]. (原始内容存档于2019-02-24). But TypeScript only delivers half of the value in using a strongly typed language to Unix developers: strong typing. Intellisense, code completion and refactoring are tools that are only available to Visual Studio Professional users on Windows. There is no Eclipse, MonoDevelop or Emacs support for any of the language features
  37. ^ Microsoft TypeScript: Can the father of C# save us from the tyranny of JavaScript?. ZDNet. 2012-10-01 [2012-10-12]. (原始内容存档于2014-08-03). And I think this is a pretty big misstep. If you’re building web apps that run on anything other than Windows, you’re likely using a Mac and most likely not using Visual Studio. You need the Visual Studio plug-in to get the IntelliSense. All you get without Visual Studio is the strong-typing. You don’t get the productivity benefits you get from IntelliSense..
  38. ^ Code Assistant for TypeScript. [2013-01-07]. (原始内容存档于2013-01-21).
  39. ^ TypeScript Editor. 2012-11-21 [2013-01-07]. (原始内容存档于2013-02-18).

 

 

 

Entires个相关

除教程外,本网站大部分文章来自互联网,如果有内容冒犯到你,请联系我们删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Leave the field below empty!