总结TypeScript 的一些知识点：TypeScript 基础语法

雨点打透心脏的1/2处 2023-10-10 22:57 31阅读 0赞

# [TypeScript 基础语法][TypeScript] #

TypeScript 程序由以下几个部分组成：

*  模块
 *  函数
 *  变量
 *  语句和表达式
 *  注释

### [第一个 TypeScript 程序][TypeScript 1] ###

我们可以使用以下 TypeScript 程序来输出 "Hello World" ：

## [Runoob.ts 文件代码：][Runoob.ts] ##

const hello : string = "Hello World!"
    console.log(hello)

以上代码首先通过 **tsc** 命令编译：

tsc Runoob.ts

得到如下 js 代码：

## [Runoob.js 文件代码：][Runoob.js] ##

var hello = "Hello World!";
    console.log(hello);

最后我们使用 node 命令来执行该 js 代码。

$ node Runoob.js
    Hello World

整个流程如下图所示：

我们可以同时编译多个 ts 文件：

tsc file1.ts file2.ts file3.ts

tsc 常用编译参数如下表所示：

<table> 
 <thead> 
  <tr> 
   <th>序号</th> 
   <th>编译参数说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1.</td> 
   <td><strong>--help</strong>&nbsp;显示帮助信息</td> 
  </tr> 
  <tr> 
   <td>2.</td> 
   <td><strong>--module</strong>&nbsp;载入扩展模块</td> 
  </tr> 
  <tr> 
   <td>3.</td> 
   <td><strong>--target</strong>&nbsp;设置 ECMA 版本</td> 
  </tr> 
  <tr> 
   <td>4.</td> 
   <td><strong>--declaration</strong>&nbsp;额外生成一个 .d.ts 扩展名的文件。&nbsp;<code>tsc ts-hw.ts --declaration</code>&nbsp;以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。</td> 
  </tr> 
  <tr> 
   <td>5.</td> 
   <td><strong>--removeComments</strong>&nbsp;删除文件的注释</td> 
  </tr> 
  <tr> 
   <td>6.</td> 
   <td><strong>--out</strong>&nbsp;编译多个文件并合并到一个输出的文件</td> 
  </tr> 
  <tr> 
   <td>7.</td> 
   <td><strong>--sourcemap</strong>&nbsp;生成一个 sourcemap (.map) 文件。 sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。</td> 
  </tr> 
  <tr> 
   <td>8.</td> 
   <td><strong>--module noImplicitAny</strong>&nbsp;在表达式和声明上有隐含的 any 类型时报错</td> 
  </tr> 
  <tr> 
   <td>9.</td> 
   <td><strong>--watch</strong>&nbsp;在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## [TypeScript 保留关键字][TypeScript 2] ##

TypeScript 保留关键字如下表所示：

<table> 
 <tbody> 
  <tr> 
   <td>break</td> 
   <td>as</td> 
   <td>catch</td> 
   <td>switch</td> 
  </tr> 
  <tr> 
   <td>case</td> 
   <td>if</td> 
   <td>throw</td> 
   <td>else</td> 
  </tr> 
  <tr> 
   <td>var</td> 
   <td>number</td> 
   <td>string</td> 
   <td>get</td> 
  </tr> 
  <tr> 
   <td>module</td> 
   <td>type</td> 
   <td>instanceof</td> 
   <td>typeof</td> 
  </tr> 
  <tr> 
   <td>public</td> 
   <td>private</td> 
   <td>enum</td> 
   <td>export</td> 
  </tr> 
  <tr> 
   <td>finally</td> 
   <td>for</td> 
   <td>while</td> 
   <td>void</td> 
  </tr> 
  <tr> 
   <td>null</td> 
   <td>super</td> 
   <td>this</td> 
   <td>new</td> 
  </tr> 
  <tr> 
   <td>in</td> 
   <td>return</td> 
   <td>true</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>any</td> 
   <td>extends</td> 
   <td>static</td> 
   <td>let</td> 
  </tr> 
  <tr> 
   <td>package</td> 
   <td>implements</td> 
   <td>interface</td> 
   <td>function</td> 
  </tr> 
  <tr> 
   <td>new</td> 
   <td>try</td> 
   <td>yield</td> 
   <td>const</td> 
  </tr> 
  <tr> 
   <td>continue</td> 
   <td>do</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

### [空白和换行][Link 1] ###

TypeScript 会忽略程序中出现的空格、制表符和换行符。

空格、制表符通常用来缩进代码，使代码易于阅读和理解。

### [TypeScript 区分大小写][TypeScript 3] ###

TypeScript 区分大写和小写字符。

### [分号是可选的][Link 2] ###

每行指令都是一段语句，你可以使用分号或不使用， 分号在 TypeScript 中是可选的，建议使用。

以下代码都是合法的：

console.log("Runoob")
    console.log("Google");

如果语句写在同一行则一定需要使用分号来分隔，否则会报错，如：

console.log("Runoob");console.log("Google");

### [TypeScript 注释][TypeScript 4] ###

注释是一个良好的习惯，虽然很多程序员讨厌注释，但还是建议你在每段代码写上文字说明。

注释可以提高程序的可读性。

注释可以包含有关程序一些信息，如代码的作者，有关函数的说明等。

编译器会忽略注释。

### [TypeScript 支持两种类型的注释][TypeScript 5] ###

*  **单行注释 ( // )** − 在 // 后面的文字都是注释内容。
 *  **多行注释 (/\* \*/)** − 这种注释可以跨越多行。

注释实例：

// 这是一个单行注释
     
    /* 
     这是一个多行注释 
     这是一个多行注释 
     这是一个多行注释 
    */

--------------------

## [TypeScript 与面向对象][TypeScript 6] ##

面向对象是一种对现实世界理解和抽象的方法。

TypeScript 是一种面向对象的编程语言。

面向对象主要有两个概念：对象和类。

*  **对象** ：对象是类的一个实例（**对象不是找个女朋友**），有状态和行为。例如，一条狗是一个对象，它的状态有：颜色、名字、品种；行为有：摇尾巴、叫、吃等。
 *  **类**：类是一个模板，它描述一类对象的行为和状态。
 *  **方法**：方法是类的操作的实现步骤。

下图中 **girl、boy** 为类，而具体的每个人为该类的对象：

TypeScript 面向对象编程实例：

class Site { 
       name():void { 
          console.log("Runoob") 
       } 
    } 
    var obj = new Site(); 
    obj.name();

以上实例定义了一个类 Site，该类有一个方法 name()，该方法在终端上输出字符串 Runoob。

new 关键字创建类的对象，该对象调用方法 name()。

编译后生成的 JavaScript 代码如下：

执行以上 JavaScript 代码，输出结果如下:

[TypeScript]: http://kxdang.com/topic/typescript/ts-basic-syntax.html#typescript-%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95
[TypeScript 1]: http://kxdang.com/topic/typescript/ts-basic-syntax.html#%E7%AC%AC%E4%B8%80%E4%B8%AA-typescript-%E7%A8%8B%E5%BA%8F
[Runoob.ts]: http://kxdang.com/topic/typescript/ts-basic-syntax.html#runoobts-%E6%96%87%E4%BB%B6%E4%BB%A3%E7%A0%81
[Runoob.js]: http://kxdang.com/topic/typescript/ts-basic-syntax.html#runoobjs-%E6%96%87%E4%BB%B6%E4%BB%A3%E7%A0%81
[TypeScript 2]: http://kxdang.com/topic/typescript/ts-basic-syntax.html#typescript-%E4%BF%9D%E7%95%99%E5%85%B3%E9%94%AE%E5%AD%97
[Link 1]: http://kxdang.com/topic/typescript/ts-basic-syntax.html#%E7%A9%BA%E7%99%BD%E5%92%8C%E6%8D%A2%E8%A1%8C
[TypeScript 3]: http://kxdang.com/topic/typescript/ts-basic-syntax.html#typescript-%E5%8C%BA%E5%88%86%E5%A4%A7%E5%B0%8F%E5%86%99
[Link 2]: http://kxdang.com/topic/typescript/ts-basic-syntax.html#%E5%88%86%E5%8F%B7%E6%98%AF%E5%8F%AF%E9%80%89%E7%9A%84
[TypeScript 4]: http://kxdang.com/topic/typescript/ts-basic-syntax.html#typescript-%E6%B3%A8%E9%87%8A
[TypeScript 5]: http://kxdang.com/topic/typescript/ts-basic-syntax.html#typescript-%E6%94%AF%E6%8C%81%E4%B8%A4%E7%A7%8D%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%B3%A8%E9%87%8A
[TypeScript 6]: http://kxdang.com/topic/typescript/ts-basic-syntax.html#typescript-%E4%B8%8E%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1