TypeScript组件解释 – TypeScript开发教程

上一章TypeScript教程请查看：TypeScript的特征以及和JavaScript的区别

这一章我们介绍TypeScript组件的基本原理，为后面的开发打好基础。

TypeScript的组件

TypeScript语言在内部分为三个主要层，每一层都被划分为子层或组件，在下面的图中，我们可以看到这三个层及其内部组件，这些是：

• 语言
• TypeScript编译器
• TypeScript语言服务

1. 语言

它以TypeScript语言元素为特色，它包括语法、关键字和类型注释等元素。

2. TypeScript编译器

TypeScript编译器(TSC)将TypeScript程序转换为JavaScript代码，它还执行从TypeScript代码到JavaScript代码的解析和类型检查。

Browser不直接支持TypeScript代码的执行。因此，用TypeScript编写的程序必须用JavaScript等价代码重写，这样可以直接在浏览器中执行代码。为了实现这一点，TypeScript附带了一个名为“tsc”的TypeScript编译器。默认情况下，TypeScript编译器的当前版本支持ES6。它编译源代码在任何模块，如ES6, SystemJS, AMD等。

我们可以通过本地、全局或与任何npm包一起安装TypeScript编译器。安装完成后，我们可以通过在命令行上运行“tsc”命令来编译TypeScript文件。

例子:

$ tsc helloworld.ts   // 它将TS文件helloworld编译为helloworld.js文件。

TS编译器配置

TypeScript编译器配置在tsconfig.json文件中给出，如下图所示:

{  
  "compilerOptions": {  
    "declaration": true,  
    "emitDecoratorMetadata": false,  
    "experimentalDecorators": false,  
    "module": "none",  
    "moduleResolution": "node",  
    "noFallthroughCasesInSwitch": false,  
    "noImplicitAny": false,  
    "noImplicitReturns": false,  
    "removeComments": false,  
    "sourceMap": false,  
    "strictNullChecks": false,  
    "target": "es3"  
  },  
  "compileOnSave": true  
}  

声明文件

当我们编译TypeScript源代码时，它提供了一个选项来生成扩展名为.d.ts的声明文件，此文件作为已编译JavaScript中的组件的接口。果文件的扩展名是.d.ts，每个根级定义必须在其前面加上declare关键字。它明确表示不会有TypeScript发出的代码，从而确保声明的项在运行时存在，声明文件为JavaScript库(如jQuery)提供智能感知。

3.TypeScript语言服务

语言服务提供信息，帮助编辑器和其他工具提供更好的辅助功能，如自动重构和智能感知。它暴露了围绕核心编译器管道的一个附加层。它支持一些标准的典型编辑器操作，如代码格式化和大纲、着色、语句完成、签名帮助等。