笙亿网络策划

TypeScript 基本语法怎么写？新手入门基础规则有哪些？

约 7 分钟读完 43 阅
文章导读
上一个 测验 下一个 语法定义了编写程序的一组规则。每种语言规范都定义了自己的语法。一个 TypeScript 程序由以下部分组成 −
📋 目录
  1. 壹 你的第一个 TypeScript 代码
  2. 贰 编译和执行 TypeScript 程序
  3. 叁 编译器标志
  4. 肆 TypeScript 中的标识符
  5. 伍 TypeScript 关键字
  6. 陆 TypeScript 中的注释
  7. 柒 TypeScript 和面向对象
A A

TypeScript - 基本语法

上一个
测验
下一个

语法定义了编写程序的一组规则。每种语言规范都定义了自己的语法。一个 TypeScript 程序由以下部分组成 −

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

你的第一个 TypeScript 代码

让我们从传统的 Hello World 示例开始 −

var message:string = "Hello World" 
console.log(message)

编译后，它将生成以下 JavaScript 代码。

var message = "Hello World";
console.log(message);

  • 第 1 行声明了一个名为 message 的变量。变量是程序中存储值的机制。

  • 第 2 行将变量的值打印到提示符中。这里，console 指的是终端窗口。函数 log () 用于在屏幕上显示文本。

编译和执行 TypeScript 程序

让我们看看如何使用 Visual Studio Code 编译和执行 TypeScript 程序。请按照以下步骤操作 −

步骤 1 − 将文件保存为 .ts 扩展名。我们将文件保存为 Test.ts。代码编辑器会在保存时标记代码中的任何错误。

步骤 2 − 在 VS Code 的资源管理器窗格中的“正在处理的文件”选项下右键单击 TypeScript 文件。选择“在命令提示符中打开”选项。

Compile and Execute

步骤 3 − 在终端窗口中使用以下命令编译文件。

tsc Test.ts

步骤 4 − 文件被编译为 Test.js。要运行编写的程序，在终端中输入以下内容。

node Test.js

编译器标志

编译器标志允许您在编译过程中更改编译器的行为。每个编译器标志都暴露了一个设置，允许您更改编译器的行为方式。

下表列出了一些与 TSC 编译器相关的常用标志。典型的命令行用法会使用部分或所有开关。

序号 编译器标志 & 描述
1.

--help

显示帮助手册
2.

--module

加载外部模块
3.

--target

设置目标 ECMA 版本
4.

--declaration

生成额外的 .d.ts 文件
5.

--removeComments

从输出文件中移除所有注释
6.

--out

将多个文件编译到一个输出文件中
7.

--sourcemap

生成 sourcemap (.map) 文件
8.

--module noImplicitAny

禁止编译器推断 any 类型
9.

--watch

监视文件更改并即时重新编译

注意 − 可以同时编译多个文件。

tsc file1.ts, file2.ts, file3.ts

TypeScript 中的标识符

标识符是程序中元素（如变量、函数等）的名称。标识符的规则如下 −

  • 标识符可以包含字符和数字。但是，标识符不能以数字开头。

  • 标识符不能包含特殊符号，除了下划线 (_) 或美元符号 ($)。

  • 标识符不能是关键字。

  • 它们必须是唯一的。

  • 标识符区分大小写。

  • 标识符不能包含空格。

下表列出了一些有效和无效标识符的示例 −

有效标识符 无效标识符
firstName Var
first_name first name
num1 first-name
$result 1number

TypeScript 关键字

关键字在语言上下文中具有特殊含义。下表列出了 TypeScript 中的一些关键字。

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

空白字符和换行

TypeScript 会忽略程序中出现的空格、制表符和换行符。你可以在程序中自由使用空格、制表符和换行符，并以整洁一致的方式格式化和缩进程序，使代码易于阅读和理解。

TypeScript 区分大小写

TypeScript 区分大小写。这意味着 TypeScript 会区分大写和小写字符。

分号是可选的

每行指令称为 statement。在 TypeScript 中，分号是可选的。

示例

console.log("hello world")
console.log("We are learning TypeScript")

单行可以包含多个语句。但是，这些语句必须用分号分隔。

TypeScript 中的注释

注释是一种提高程序可读性的方式。注释可用于包含有关程序的额外信息，如代码作者、函数/结构的提示等。编译器会忽略注释。

TypeScript 支持以下类型的注释 −

  • 单行注释 ( // ) − // 和行尾之间的任何文本都被视为注释

  • 多行注释 (/* */) − 这些注释可以跨越多行。

示例

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

TypeScript 和面向对象

TypeScript 是面向对象的 JavaScript。面向对象是一种遵循现实世界建模的软件开发范式。面向对象将程序视为通过称为方法（methods）的机制相互通信的对象集合。TypeScript 也支持这些面向对象组件。

  • Object − 对象是任何实体的实时表示。根据 Grady Brooch 的说法，每个对象必须具有三个特性 −

    • State − 由对象的属性描述

    • Behavior − 描述对象将如何行事

    • Identity − 一个唯一值，用于将对象与其他类似对象区分开来。

  • Class − 在 OOP 中，class 是创建对象的蓝图。class 封装了对象的数据。

  • Method − 方法促进对象之间的通信。

示例：TypeScript 和面向对象

class Greeting { 
   greet():void { 
      console.log("Hello World!!!") 
   } 
} 
var obj = new Greeting(); 
obj.greet();

上面的示例定义了一个 Greeting class。该 class 有一个 greet () 方法。该方法在终端上打印字符串 Hello World。new 关键字创建了该 class 的一个对象（obj）。该对象调用了 greet () 方法。

编译后，将生成以下 JavaScript 代码。

var Greeting = (function () {
   function Greeting() {
   }
   Greeting.prototype.greet = function () {
      console.log("Hello World!!!");
   };
	return Greeting;
}());

var obj = new Greeting();
obj.greet()

上述程序的输出如下 −

Hello World!!!