2. TypeScript 特性

TypeScript 特性

相对 JavaScript，TypeScript 增加了许多关键功能，特别是围绕类型系统和代码结构的增强功能。
TypeScript 的一些关键特性：

• 静态类型检查：TypeScript 在编译时就会检查代码的类型是否匹配，能够发现很多潜在的错误。即使是简单的错误（例如拼写错误或类型不一致），也可以在编写代码时被捕获到。

• 类型推断：TypeScript 能够自动推断变量的类型。比如当你声明一个变量并赋值时，TypeScript 会根据赋值来推断这个变量的类型，不需要每次都显式声明类型。

• 接口和类型定义：TypeScript 提供了 interface 和 type 关键字，允许你定义复杂的数据结构。这对于项目中不同部分的代码协作和数据交互来说非常重要。

• 类和模块支持：TypeScript 支持面向对象编程中的类（class）概念，增加了构造函数、继承、访问控制修饰符（如 public、private、protected），并且支持 ES 模块化规范。

• 工具和编辑器支持：TypeScript 拥有良好的编辑器支持，特别是与 Visual Studio Code 集成时，能提供智能提示、自动补全、重构等工具，使开发过程更高效。

• 兼容 JavaScript：TypeScript 是 JavaScript 的超集，这意味着所有合法的 JavaScript 代码都是合法的 TypeScript 代码。这使得 JavaScript 项目可以逐步迁移到 TypeScript，而无需完全重写。

以下是 TypeScript 增加的主要功能：

1. 静态类型
   TypeScript 的最大特性就是增加了静态类型系统。在 TypeScript 中，开发者可以显式地声明变量、参数、返回值的类型，这样可以在编译时捕获很多潜在的类型错误。常见类型包括 number、string、boolean、array、tuple、enum 等，此外也支持自定义类型。

let name: string = "Alice";
let age: number = 25;

2. 类型推断
   TypeScript 可以自动推断变量类型，即使不显式声明类型，TypeScript 也会根据变量的赋值内容来推断类型，从而在大多数情况下减少类型注解的书写量。

let name = "Alice"; // 推断为 string

3. 接口 (Interfaces)
   TypeScript 提供了接口，允许定义复杂的对象结构。接口可以定义属性和方法，还可以通过 implements 关键字实现接口，或者通过 extends 进行扩展，便于定义复杂的数据类型。

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

class Student implements Person {
  constructor(public name: string, public age: number) {}

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

4. 类型别名 (Type Aliases)
   类型别名 (type) 可以为复杂的类型定义简短的别名，便于代码复用。

type StringOrNumber = string | number;
let value: StringOrNumber = 42;

5. 枚举 (Enums)
   TypeScript 引入了 enum 类型，用于定义一组命名的常量，提高代码的可读性。枚举在 JavaScript 中没有直接的对应。

enum Direction {
  Up,
  Down,
  Left,
  Right,
}
let dir: Direction = Direction.Up;

6. 元组 (Tuples)
   元组允许定义具有固定数量和类型的数组。它适用于需要固定数据结构的场景，比如坐标或 RGB 颜色值。

let point: [number, number] = [10, 20];

7. 访问控制修饰符 (Access Modifiers)
   TypeScript 在类中提供了 public、private 和 protected 修饰符，允许控制属性或方法的可见性，支持更好的封装。

class Person {
  private name: string;
  protected age: number;
  public constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

8. 抽象类 (Abstract Classes)
   TypeScript 支持抽象类，抽象类不能直接实例化，需要由子类实现。抽象类适用于定义通用行为和抽象方法的类层次结构。

abstract class Animal {
  abstract makeSound(): void;
}

class Dog extends Animal {
  makeSound() {
    console.log("Woof!");
  }
}

9. 泛型 (Generics)
   TypeScript 支持泛型，允许在类、接口和函数中使用参数化类型，使得代码可以适应不同的类型需求，同时保持类型安全。

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

let num = identity<number>(42);

10. 模块和命名空间
    TypeScript 提供了基于 ES6 的模块系统，使用 import 和 export 导入和导出模块。此外，TypeScript 还支持命名空间（Namespace），用于组织代码和避免命名冲突。

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

// main.ts
import { add } from "./math";
console.log(add(2, 3));

11. 类型守卫 (Type Guards)
    TypeScript 提供了类型守卫，可以在代码中检查变量类型，帮助编译器推断更加具体的类型。这对于联合类型尤为重要。

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

12. 可选链和空值合并运算符
    TypeScript 增加了 JavaScript 的可选链 (?.) 和空值合并运算符 (??)，简化了代码中对可能为 null 或 undefined 值的处理。

let user = { name: "Alice", address: { city: "Wonderland" } };
console.log(user?.address?.city); // 如果 address 存在则输出 city，否则返回 undefined

let value = null;
console.log(value ?? "default"); // 如果 value 为 null 或 undefined，则返回 "default"

13. 类型兼容性和工具类型
    TypeScript 提供了一些工具类型，如 Partial、Pick、Readonly、Record 等，这些类型可以帮助生成新的类型，简化类型定义。

interface Todo {
  title: string;
  description: string;
}

let partialTodo: Partial<Todo> = { title: "Learn TypeScript" }; // 可选属性

14. 编译期错误检查
    TypeScript 提供的编译期错误检查可以捕获 JavaScript 中不易发现的错误，如拼写错误、类型不匹配等，帮助提升代码质量。

15. ES 新特性支持
    TypeScript 提前支持了一些还未在所有环境中普及的 ES 特性，如装饰器（Decorators）、异步迭代器等，且能够将其编译成兼容 JavaScript 版本。
    通过这些特性，TypeScript 提供了更安全、更结构化的代码能力，在大型项目和多人协作中尤其具有优势。

TypeScript 基础语法

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

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

第一个 TypeScript 程序

我们可以使用以下 TypeScript 程序来输出 "Hello World" ：
Runoob.ts 文件代码：

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

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

tsc Runoob.ts

得到如下 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 常用编译参数如下表所示：

TypeScript 保留关键字

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

空白和换行

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

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

TypeScript 区分大小写

TypeScript 区分大写和小写字符。

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

以下代码都是合法的：

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

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

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

TypeScript 注释

注释是一个良好的习惯，虽然很多程序员讨厌注释，但还是建议你在每段代码写上文字说明。
注释可以提高程序的可读性。
注释可以包含有关程序一些信息，如代码的作者，有关函数的说明等。
编译器会忽略注释。

TypeScript 支持两种类型的注释

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

注释实例：

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

TypeScript 与面向对象

面向对象是一种对现实世界理解和抽象的方法。
TypeScript 是一种面向对象的编程语言。
面向对象主要有两个概念：对象和类。

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

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

TypeScript 面向对象编程实例：

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

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

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

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

var Site = /** @class */ (function () {
    function Site() {
    }
    Site.prototype.name = function () {
        console.log("Runoob");
    };
    return Site;
}());
var obj = new Site();
obj.name();

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

TypeScript 基础类型

基础类型可以开发者更准确地描述数据的结构和意图。
TypeScript 包含的数据类型如下表:

1、string 字符串
表示文本数据，只能存储字符串，通常用于描述文字信息。

let message: string = "Hello, TypeScript!";

模板字符串：TypeScript 支持 模板字符串，用反引号\(\`\)（记住不是单引号 '）来定义，允许在字符串中插入变量或表达式，非常适合多行文本和拼接变量。

let name: string = "Alice";
let greeting: string = `Hello, ${name}! Welcome to TypeScript.`;
console.log(greeting); // 输出：Hello, Alice! Welcome to TypeScript.

2、number 数字
TypeScript 使用 number 表示所有数字，包括整数和浮点数。

let age: number = 25;
let temperature: number = 36.5;

3、boolean 布尔值
表示逻辑值 true 或 false，用于条件判断。

let isCompleted: boolean = false;

4、array 数组
可以表示一组相同类型的元素。可以使用 type[] 或Array<type> 两种方式表示。

let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["Alice", "Bob"];

5、tuple 元组
表示已知数量和类型的数组。每个元素可以是不同的类型，适合表示固定结构的数据。

let person: [string, number] = ["Alice", 25];

6、enum 枚举
用来定义一组命名常量。默认情况下枚举的值从 0 开始递增。

enum Color {
  Red,
  Green,
  Blue,
}
let favoriteColor: Color = Color.Green;

7、any 类型
以表示任何类型。适合不确定数据类型的情况，但使用时需谨慎，因为 any 会绕过类型检查。

let randomValue: any = 42;
randomValue = "hello";

任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型，它常用于以下三种情况。
1、变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查，示例代码如下：

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型

改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查，示例代码如下：

let x: any = 4;
x.ifItExists();    // 正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed();    // 正确

定义存储各种类型数据的数组时，示例代码如下：

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

8、void 空类型
用于没有返回值的函数。声明变量时，类型 void 意味着只能赋值 null 或 undefined。

function logMessage(message: string): void {
  console.log(message);
}

9、null 和 undefined
null 和 undefined分别表示"空值"和"未定义"。在默认情况下，它们是所有类型的子类型，但可以通过设置 strictNullChecks 严格检查。

let empty: null = null;
let notAssigned: undefined = undefined;

null

在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是 object。

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined。而在TypeScript中启用严格的空校验（--strictNullChecks）特性，就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型，示例代码如下：

// 启用 --strictNullChecks
let x: number;
x = 1; // 编译正确
x = undefined;    // 编译错误
x = null;    // 编译错误

上面的例子中变量 x 只能是数字类型。如果一个类型可能出现 null 或 undefined， 可以用 | 来支持多种类型，示例代码如下：

// 启用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 编译正确
x = undefined;    // 编译正确
x = null;    // 编译正确

更多内容可以查看：JavaScript typeof, null, 和 undefined

10、never 类型
表示不会有返回值，通常用于抛出错误或进入无限循环的函数，表示该函数永远不会正常结束。

function throwError(message: string): never {
  throw new Error(message);
}

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环），示例代码如下：

let x: never;
let y: number;

// 编译错误，数字类型不能转为 never 类型
x = 123;

// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确，never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

11、object 对象类型
表示非原始类型的值，适用于复杂的对象结构。

let person: object = { name: "Alice", age: 30 };

12、联合类型 (Union)
表示一个变量可以是多种类型之一。通过 | 符号实现。

let id: string | number;
id = "123";
id = 456;

13、unknown 不确定的类型
与 any 类似，但更严格。必须经过类型检查后才能赋值给其他类型变量。

let value: unknown = "Hello";
if (typeof value === "string") {
  let message: string = value;
}

14、.类型断言 (Type Assertions)
类型断言可以让开发者明确告诉编译器变量的类型，常用于无法推断的情况。可以使用 as 或尖括号语法。

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

15、字面量类型
字面量类型可以让变量只能拥有特定的值，用于结合联合类型定义变量的特定状态。

let direction: "up" | "down" | "left" | "right";
direction = "up";

通过这些类型，TypeScript 提供了更强的类型安全性和代码检查能力，使开发者能够更清晰、准确地表达数据和意图，减少运行时错误。

实例

以下实例展示了 TypeScript 中主要基础类型的定义和使用，模拟一个用户对象和相关的操作函数

// 定义枚举类型，用于表示用户的角色
enum Role {
  Admin,
  User,
  Guest,
}

// 使用 interface 定义用户的结构
interface User {
  id: number;               // number 类型，用于唯一标识用户
  username: string;         // string 类型，表示用户名
  isActive: boolean;        // boolean 类型，表示用户是否激活
  role: Role;               // enum 类型，用于表示用户角色
  hobbies: string[];        // array 类型，存储用户的兴趣爱好
  contactInfo: [string, number]; // tuple 类型，包含电话号码的元组，格式为：[区域码, 电话号码]
}

// 创建用户对象，符合 User 接口的结构
const user: User = {
  id: 1,
  username: "Alice",
  isActive: true,
  role: Role.User,
  hobbies: ["Reading", "Gaming"],
  contactInfo: ["+1", 123456789],
};

// 定义一个返回字符串的函数来获取用户信息
function getUserInfo(user: User): string {
  return `User ${user.username} is ${user.isActive ? "active" : "inactive"} with role ${Role[user.role]}`;
}

// 使用 void 类型定义一个函数，专门打印用户信息
function printUserInfo(user: User): void {
  console.log(getUserInfo(user));
}

// 定义一个 union 类型的函数参数，接受用户 ID（number）或用户名（string）
function findUser(query: number | string): User | undefined {
  // 使用 typeof 来判断 query 的类型
  if (typeof query === "number") {
    // 如果是数字，则根据 ID 查找用户
    return query === user.id ? user : undefined;
  } else if (typeof query === "string") {
    // 如果是字符串，则根据用户名查找用户
    return query === user.username ? user : undefined;
  }
  return undefined;
}

// 定义一个 never 类型的函数，用于处理程序的异常情况
function throwError(message: string): never {
  throw new Error(message);
}

// 使用 any 类型处理未知类型的数据
let unknownData: any = "This is a string";
unknownData = 42; // 重新赋值为数字，类型为 any

// 使用 unknown 类型处理不确定的数据，更加安全
let someData: unknown = "Possible data";
if (typeof someData === "string") {
  console.log(`Length of data: ${(someData as string).length}`);
}

// 调用各个函数并测试
printUserInfo(user);                    // 打印用户信息
console.log(findUser(1));               // 根据 ID 查找用户
console.log(findUser("Alice"));         // 根据用户名查找用户

// 使用 null 和 undefined 类型的变量
let emptyValue: null = null;
let uninitializedValue: undefined = undefined;

TypeScript 变量声明

变量是一种使用方便的占位符，用于引用计算机内存地址。
我们可以把变量看做存储数据的容器。
TypeScript 变量的命名规则：

• 变量名称可以包含数字和字母。
• 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
• 变量名不能以数字开头。

变量使用前必须先声明，我们可以使用 var 来声明变量。
我们可以使用以下四种方式来声明变量：
声明变量的类型及初始值：

var [变量名] : [类型] = 值;

例如：

var uname:string = "Runoob";

声明变量的类型，但没有初始值，变量值会设置为 undefined：

var [变量名] : [类型];

例如：

var uname:string;

声明变量并初始值，但不设置类型，该变量可以是任意类型：

var [变量名] = 值;

例如：

var uname = "Runoob";

声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：

var [变量名];

例如：

var uname;

实例

var uname:string = "Runoob";
var score1:number = 50;
var score2:number = 42.50
var sum = score1 + score2
console.log("名字: "+uname)
console.log("第一个科目成绩: "+score1)
console.log("第二个科目成绩: "+score2)
console.log("总成绩: "+sum)

注意：变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。

使用 tsc 命令编译以上代码，得到如下 JavaScript 代码：

var uname = "Runoob";
var score1 = 50;
var score2 = 42.50;
var sum = score1 + score2;
console.log("名字: " + uname);
console.log("第一个科目成绩: " + score1);
console.log("第二个科目成绩: " + score2);
console.log("总成绩: " + sum);

执行该 JavaScript 代码输出结果为：

名字: Runoob
第一个科目成绩: 50
第二个科目成绩: 42.5
总成绩: 92.5

TypeScript 遵循强类型，如果将不同的类型赋值给变量会编译错误，如下实例：

var num:number = "hello"     // 这个代码会编译错误

类型断言（Type Assertion）

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

语法格式：

<类型>值

或:

值 as 类型

实例

var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 类型
console.log(str2)

TypeScript 是怎么确定单个断言是否足够

当 S 类型是 T 类型的子集，或者 T 类型是 S 类型的子集时，S 能被成功断言成 T。这是为了在进行类型断言时提供额外的安全性，完全毫无根据的断言是危险的，如果你想这么做，你可以使用 any。

它之所以不被称为类型转换，是因为转换通常意味着某种运行时的支持。但是，类型断言纯粹是一个编译时语法，同时，它也是一种为编译器提供关于如何分析代码的方法。

编译后，以上代码会生成如下 JavaScript 代码：

var str = '1';
var str2 = str;  //str、str2 是 string 类型
console.log(str2);

执行输出结果为：

1

类型推断

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。

如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

var num = 2;    // 类型推断为 number
console.log("num 变量的值为 "+num); 
num = "12";    // 编译错误
console.log(num);

• 第一行代码声明了变量 num 并=设置初始值为 2。 注意变量声明没有指定类型。因此，程序使用类型推断来确定变量的数据类型，第一次赋值为 2，num 设置为 number 类型。
• 第三行代码，当我们再次为变量设置字符串类型的值时，这时编译会错误。因为变量已经设置为了 number 类型。

error TS2322: Type '"12"' is not assignable to type 'number'.

变量作用域

变量作用域指定了变量定义的位置。
程序中变量的可用性由变量作用域决定。
TypeScript 有以下几种作用域：

• 全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
• 类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
• 局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。
  以下实例说明了三种作用域的使用：

var global_num = 12          // 全局变量
class Numbers { 
   num_val = 13;             // 实例变量
   static sval = 10;         // 静态变量
   
   storeNum():void { 
      var local_num = 14;    // 局部变量
   } 
} 
console.log("全局变量为: "+global_num)  
console.log(Numbers.sval)   // 静态变量
var obj = new Numbers(); 
console.log("实例变量: "+obj.num_val)

以上代码使用 tsc 命令编译为 JavaScript 代码为：

var global_num = 12; // 全局变量
var Numbers = /** @class */ (function () {
    function Numbers() {
        this.num_val = 13; // 实例变量
    }
    Numbers.prototype.storeNum = function () {
        var local_num = 14; // 局部变量
    };
    Numbers.sval = 10; // 静态变量
    return Numbers;
}());
console.log("全局变量为: " + global_num);
console.log(Numbers.sval); // 静态变量
var obj = new Numbers();
console.log("实例变量: " + obj.num_val);

执行以上 JavaScript 代码，输出结果为：
全局变量为: 12
10
实例变量: 13

如果我们在方法外部调用局部变量 local_num，会报错：
error TS2322: Could not find symbol 'local_num'.

TypeScript 运算符

运算符用于执行程序代码运算，会针对一个以上操作数项目来进行运算。
考虑以下计算：

7 + 5 = 12

以上实例中 7、5 和 12 是操作数。
运算符 + 用于加值。
运算符 = 用于赋值。
TypeScript 主要包含以下几种运算：

• 算术运算符
• 逻辑运算符
• 关系运算符
• 按位运算符
• 赋值运算符
• 三元/条件运算符
• 字符串运算符
• 类型运算符

算术运算符
假定 y=5，下面的表格解释了这些算术运算符的操作：

var num1:number = 10 
var num2:number = 2
var res:number = 0
    
res = num1 + num2 
console.log("加:        "+res); 

res = num1 - num2; 
console.log("减: "+res) 

res = num1*num2 
console.log("乘:    "+res) 

res = num1/num2 
console.log("除:   "+res)
    
res = num1%num2 
console.log("余数:   "+res) 

num1++ 
console.log("num1 自增运算: "+num1) 

num2-- 
console.log("num2 自减运算: "+num2)

使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

var num1 = 10;
var num2 = 2;
var res = 0;
res = num1 + num2;
console.log("加:        " + res);
res = num1 - num2;
console.log("减: " + res);
res = num1 * num2;
console.log("乘:    " + res);
res = num1 / num2;
console.log("除:   " + res);
res = num1 % num2;
console.log("余数:   " + res);
num1++;
console.log("num1 自增运算: " + num1);
num2--;
console.log("num2 自减运算: " + num2);

执行以上 JavaScript 代码，输出结果为：

加:        12
减: 8
乘:    20
除:   5
余数:   0
num1 自增运算: 11
num2 自减运算: 1

关系运算符

关系运算符用于计算结果是否为 true 或者 false。

x=5，下面的表格解释了关系运算符的操作：

var num1:number = 5;
var num2:number = 9;
 
console.log("num1 的值为: "+num1); 
console.log("num2 的值为:"+num2);
 
var res = num1>num2 
console.log("num1 大于n num2: "+res)
 
res = num1<num2 
console.log("num1 小于 num2: "+res)  
 
res = num1>=num2 
console.log("num1 大于或等于  num2: "+res)
 
res = num1<=num2
console.log("num1 小于或等于 num2: "+res)  
 
res = num1==num2 
console.log("num1 等于 num2: "+res)  
 
res = num1!=num2  
console.log("num1 不等于 num2: "+res)

使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

var num1 = 5;
var num2 = 9;
console.log("num1 的值为: " + num1);
console.log("num2 的值为:" + num2);
var res = num1 > num2;
console.log("num1 大于n num2: " + res);
res = num1 < num2;
console.log("num1 小于 num2: " + res);
res = num1 >= num2;
console.log("num1 大于或等于  num2: " + res);
res = num1 <= num2;
console.log("num1 小于或等于 num2: " + res);
res = num1 == num2;
console.log("num1 等于 num2: " + res);
res = num1 != num2;
console.log("num1 不等于 num2: " + res);

执行以上 JavaScript 代码，输出结果为：

num1 的值为: 5
num2 的值为:9
num1 大于n num2: false
num1 小于 num2: true
num1 大于或等于  num2: false
num1 小于或等于 num2: true
num1 等于 num2: false
num1 不等于 num2: true

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

var avg:number = 20; 
var percentage:number = 90; 
 
console.log("avg 值为: "+avg+" ,percentage 值为: "+percentage);
    
var res:boolean = ((avg>50)&&(percentage>80)); 
console.log("(avg>50)&&(percentage>80): ",res);
 
var res:boolean = ((avg>50)||(percentage>80)); 
console.log("(avg>50)||(percentage>80): ",res);
 
var res:boolean=!((avg>50)&&(percentage>80)); 
console.log("!((avg>50)&&(percentage>80)): ",res);

使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

var avg = 20;
var percentage = 90;
console.log("avg 值为: " + avg + " ,percentage 值为: " + percentage);
var res = ((avg > 50) && (percentage > 80));
console.log("(avg>50)&&(percentage>80): ", res);
var res = ((avg > 50) || (percentage > 80));
console.log("(avg>50)||(percentage>80): ", res);
var res = !((avg > 50) && (percentage > 80));
console.log("!((avg>50)&&(percentage>80)): ", res);

执行以上 JavaScript 代码，输出结果为：

avg 值为: 20 ,percentage 值为: 90
(avg>50)&&(percentage>80):  false
(avg>50)||(percentage>80):  true
!((avg>50)&&(percentage>80)):  true

短路运算符(&& 与 ||)

&& 与 || 运算符可用于组合表达式。 && 运算符只有在左右两个表达式都为 true 时才返回 true。

考虑以下实例：

var a = 10 
var result = ( a<10 && a>5)

以上实例中 a < 10 与 a > 5 是使用了 && 运算符的组合表达式，第一个表达式返回了 false，由于 && 运算需要两个表达式都为 true，所以如果第一个为 false，就不再执行后面的判断(a > 5 跳过计算)，直接返回 false。

|| 运算符只要其中一个表达式为 true ，则该组合表达式就会返回 true。

考虑以下实例：

var a = 10 
var result = ( a>5 || a<10)

以上实例中 a > 5 与 a < 10 是使用了 || 运算符的组合表达式，第一个表达式返回了 true，由于 || 组合运算只需要一个表达式为 true，所以如果第一个为 true，就不再执行后面的判断(a < 10 跳过计算)，直接返回 true。

位运算符

var a:number = 2;   // 二进制 10 
var b:number = 3;   // 二进制 11
    
var result; 
        
result = (a & b);     
console.log("(a & b) => ",result)
            
result = (a | b);          
console.log("(a | b) => ",result)  
        
result = (a ^ b);  
console.log("(a ^ b) => ",result);
    
result = (~b); 
console.log("(~b) => ",result);
 
result = (a << b); 
console.log("(a << b) => ",result); 
 
result = (a >> b); 
console.log("(a >> b) => ",result);
 
result = (a >>> 1); 
console.log("(a >>> 1) => ",result);

使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

var a = 2; // 二进制 10 
var b = 3; // 二进制 11
var result;
result = (a & b);
console.log("(a & b) => ", result);
result = (a | b);
console.log("(a | b) => ", result);
result = (a ^ b);
console.log("(a ^ b) => ", result);
result = (~b);
console.log("(~b) => ", result);
result = (a << b);
console.log("(a << b) => ", result);
result = (a >> b);
console.log("(a >> b) => ", result);
result = (a >>> 1);
console.log("(a >>> 1) => ", result);

执行以上 JavaScript 代码，输出结果为：

(a & b) =>  2
(a | b) =>  3
(a ^ b) =>  1
(~b) =>  -4
(a << b) =>  16
(a >> b) =>  0
(a >>> 1) =>  1

赋值运算符

赋值运算符用于给变量赋值。

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

类似的逻辑运算符也可以与赋值运算符联合使用：<<=, >>=, >>>=, &=, |= 与 ^=。

var a: number = 12 
var b:number = 10  
 
a = b 
console.log("a = b: "+a)
 
a += b
console.log("a+=b: "+a)
 
a -= b 
console.log("a-=b: "+a)
 
a *= b 
console.log("a*=b: "+a)
 
a /= b 
console.log("a/=b: "+a)    
 
a %= b 
console.log("a%=b: "+a)

使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

var a = 12;
var b = 10;
a = b;
console.log("a = b: " + a);
a += b;
console.log("a+=b: " + a);
a -= b;
console.log("a-=b: " + a);
a *= b;
console.log("a*=b: " + a);
a /= b;
console.log("a/=b: " + a);
a %= b;
console.log("a%=b: " + a);

执行以上 JavaScript 代码，输出结果为：

a = b: 10
a+=b: 20
a-=b: 10
a*=b: 100
a/=b: 10
a%=b: 0

三元运算符 (?)

三元运算有 3 个操作数，并且需要判断布尔表达式的值。该运算符的主要是决定哪个值应该赋值给变量。

Test ? expr1 : expr2
Test − 指定的条件语句
expr1 − 如果条件语句 Test 返回 true 则返回该值
expr2 − 如果条件语句 Test 返回 false 则返回该值

让我们看下以下实例：

var num:number = -2 
var result = num > 0 ? "大于 0" : "小于 0，或等于 0" 
console.log(result)

实例中用于判断变量是否大于 0。

使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

var num = -2;
var result = num > 0 ? "大于 0" : "小于 0，或等于 0";
console.log(result);

以上实例输出结果如下：
小于 0，或等于 0

类型运算符

typeof 运算符

typeof 是一元运算符，返回操作数的数据类型。

查看以下实例:

var num = 12 
console.log(typeof num);   //输出结果: number

使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

var num = 12;
console.log(typeof num); //输出结果: number

以上实例输出结果如下：
number

instanceof

instanceof 运算符用于判断对象是否为指定的类型，后面章节我们会具体介绍它。
其他运算符
负号运算符(-)
更改操作数的符号，查看以下实例：

var x:number = 4 
var y = -x; 
console.log("x 值为: ",x);   // 输出结果 4 
console.log("y 值为: ",y);   // 输出结果 -4

使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

var x = 4;
var y = -x;
console.log("x 值为: ", x); // 输出结果 4 
console.log("y 值为: ", y); // 输出结果 -4

以上实例输出结果如下：

x 值为:  4
y 值为:  -4

字符串运算符: 连接运算符 (+)

• 运算符可以拼接两个字符串，查看以下实例：

var msg:string = "RUNOOB"+".COM" 
console.log(msg)

使用 tsc 命令编译以上代码得到如下 JavaScript 代码：

var msg = "RUNOOB" + ".COM";
console.log(msg);

以上实例输出结果如下：
RUNOOB.COM