TypeScript 中的識別符號和關鍵字


在本教程中,我們將學習 TypeScript 中的識別符號和關鍵字。識別符號和關鍵字是 TypeScript(JavaScript 的靜態型別超集)中的兩個基本概念。識別符號是我們賦予程式碼中變數、函式、類和其他內容的名稱。關鍵字是 TypeScript 中具有特定含義的特殊單詞,不能用作識別符號。

為了避免語法錯誤,識別符號在命名變數、函式和類時必須遵循某些規則。另一方面,將關鍵字用作識別符號會導致錯誤,並使我們的程式碼難以閱讀和理解。

TypeScript 中識別符號和關鍵字的規則和最佳實踐

在 TypeScript 中,識別符號和關鍵字在編寫可維護且無錯誤的程式碼中起著至關重要的作用。

識別符號

以下是在使用 TypeScript 中的識別符號時需要記住的一些規則和最佳實踐:

  • 識別符號只能包含字母、數字、下劃線 (_) 和美元符號 ($)。

  • 識別符號必須以字母、下劃線或美元符號 ($) 開頭。它們不能以數字開頭。

  • 識別符號區分大小寫。例如,“myVariable”和“myvariable”是兩個不同的識別符號。

  • 識別符號應該具有描述性和意義。

  • 識別符號不應與保留關鍵字相同。這可能會導致程式碼中的語法錯誤。為避免這種情況,請使用清晰地指示識別符號用途的描述性名稱。

TypeScript 中常用的識別符號包括變數、函式、類、介面和常量。

以下是一些 TypeScript 中有效識別符號的示例:

const myVariable: string = "Hello world";
let myNumber: number = 42;

另一方面,以下是一些無效的識別符號:

let 123invalid: string; // identifier cannot start with a digit
const my-variable: string = "Invalid"; // identifier cannot contain a hyphen
let class: string = "Invalid"; // 'class' is a keyword and cannot be used as an identifier 

關鍵字

以下是在使用 TypeScript 中的關鍵字時需要記住的一些規則和最佳實踐:

  • 我們不應將保留關鍵字用作識別符號。

  • 使用者需要熟悉 TypeScript 中常用的關鍵字。

  • 如果必須在函式或類中使用保留關鍵字,可以使用尾部下劃線 (_) 來將其與關鍵字區分開來。例如,class MyClass_ { }。

以下是一些 TypeScript 中常用的關鍵字:

  • let、const、var - 用於宣告變數。

  • function - 用於宣告函式。

  • class - 用於宣告類。

  • if、else - 用於建立條件語句。

  • for、while、do - 用於建立迴圈。

  • interface - 用於宣告介面。

  • implements - 用於實現介面。

  • enum - 用於宣告列舉。

這是一個無效關鍵字的示例:

let let = "Invalid"; // 'let' is a keyword and cannot be used as an identifier 

示例(變數識別符號)

在下面的示例中,我們包含了一個變數識別符號。變數 languageName 儲存語言的名稱。

// Variable identifier
const languageName: string = "TypeScript";
console.log(`The name of the language is ${languageName}.` ); 

編譯後,它將生成以下 JavaScript 程式碼:

// Variable identifier
var languageName = "TypeScript";
console.log("The name of the language is ".concat(languageName, ".")); 

示例(函式識別符號)

在下面的示例中,我們包含了一個函式識別符號。函式 greetPerson 接受一個 name 引數並輸出問候語。

// Function identifier
function greetPerson(name: string): void {
   console.log( `Hello, ${name}!` );
}
greetPerson("Subhman"); 

編譯後,它將生成以下 JavaScript 程式碼:

// Function identifier
function greetPerson(name) {
   console.log("Hello, ".concat(name, "!"));
}
greetPerson("Subhman"); 

示例(類識別符號)

在下面的示例中,我們包含了一個類識別符號。類 Animal 具有 name 屬性和 speak 方法。

// Class identifier
class Animal {
   private name: string;

   constructor(name: string) {
      this.name = name;
   }
   public speak(): void {
      console.log(`${this.name} makes a sound.`);
   }
}

const dog = new Animal("Dog");
dog.speak(); 

編譯後,它將生成以下 JavaScript 程式碼:

// Class identifier
var Animal = /** @class */ (function () {
   function Animal(name) {
      this.name = name;
   }
   Animal.prototype.speak = function () {
      console.log("".concat(this.name, " makes a sound."));
   };
   return Animal;
}());
var dog = new Animal("Dog");
dog.speak(); 

示例(介面識別符號)

在下面的示例中,我們包含了一個介面識別符號。介面 Shape 定義了一個 color 屬性和一個返回數字的 area 方法。Rectangle 類實現 Shape 介面,並新增 width 和 height 屬性以及計算矩形面積的 area 方法。

// Interface identifier
interface Shape {
   color: string;
   area() : number;
}

class Rectangle implements Shape {
   color: string;
   width: number;
   height: number;

   constructor(color: string, width: number, height: number) {
      this.color = color;
      this.width = width;
      this.height = height;
   }

   area(): number {
      return this.width * this.height;
   }
}
const rect = new Rectangle("red", 5, 10);
console.log(`The area of the ${rect.color} rectangle is ${rect.area()}.`);

編譯後,它將生成以下 JavaScript 程式碼:

var Rectangle = /** @class */ (function () {
   function Rectangle(color, width, height) {
      this.color = color;
      this.width = width;
      this.height = height;
   }
   Rectangle.prototype.area = function () {
      return this.width * this.height;
   };
   return Rectangle;
}());
var rect = new Rectangle("red", 5, 10);
console.log("The area of the ".concat(rect.color, " rectangle is ").concat(rect.area(), "."));

示例(const、let、if、function 和 class 關鍵字)

在這個例子中,我們在 TypeScript 中使用了 const、let、if、function 和 class 關鍵字。這些都是具有特定含義和用途的內建關鍵字。

// TypeScript keyword example

// TypeScript keyword : 'const'
const pi: number = 3.14;

// TypeScript keyword : 'let'
let count: number = 0;

// TypeScript keyword : 'if'
if (count === 0) {
   console.log(" Count is zero ");
}

// TypeScript keyword : 'function'
function multiply(a: number, b: number): number {
   return a * b;
}

// TypeScript keyword : 'class'
class Person {
   private name: string;
   private age: number;
   constructor(name: string, age: number) {
      this.name = name;
      this.age = age;
   }
   public getAge(): number {
      return this.age;
   }
}
const john = new Person("John", 30);
console.log(john.getAge());

編譯後,它將生成以下 JavaScript 程式碼:

// TypeScript keyword example

// TypeScript keyword : 'const'
var pi = 3.14;

// TypeScript keyword : 'let'
var count = 0;

// TypeScript keyword : 'if'
if (count === 0) {
   console.log(" Count is zero ");
}

// TypeScript keyword : 'function'
function multiply(a, b) {
   return a * b;
}

// TypeScript keyword : 'class'
var Person = /** @class */ (function () {
   function Person(name, age) {
      this.name = name;
      this.age = age;
   }
   Person.prototype.getAge = function () {
      return this.age;
   };
   return Person;
}());
var john = new Person("John", 30);
console.log(john.getAge()); 

在本教程中,我們探討了 TypeScript 識別符號和關鍵字的各個方面。我們瞭解到 TypeScript 有一些具有預定義含義的保留關鍵字,不能用作識別符號。我們還看到了有效和無效識別符號和關鍵字的示例,以及它們如何在 TypeScript 程式碼中使用。

第一個示例演示了使用變數、函式、類和介面識別符號來定義語言結構。第二個示例展示了使用內建關鍵字在語言中執行不同操作。

瞭解識別符號和關鍵字對於使用 TypeScript 至關重要,因為它使我們能夠編寫更易讀且無錯誤的程式碼。透過遵循 TypeScript 的命名約定,我們可以編寫更易於理解和維護的一致程式碼。

更新於:2023年3月7日

2K+ 次瀏覽

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.