TypeScript 基础语法

TypeScript 的基础语法与 JavaScript 非常相似，但添加了一些额外的特性，如类型注解、接口、泛型等。本文将介绍 TypeScript 的基础语法。

1. 注释

TypeScript 支持两种类型的注释：单行注释和多行注释。

单行注释

使用 // 开始单行注释：

// 这是一个单行注释
let name: string = "John"; // 这也是一个单行注释

多行注释

使用 /* */ 包围多行注释：

/*
这是一个多行注释
可以跨越多行
*/
let age: number = 30;

2. 分号

TypeScript 中，语句末尾的分号是可选的。但是，为了代码的一致性和可读性，建议始终使用分号。

// 带分号的语句
let name: string = "John";
let age: number = 30;

// 不带分号的语句（也可以工作，但不推荐）
let name: string = "John"
let age: number = 30

3. 标识符

标识符是用来命名变量、函数、类、接口等的名称。在 TypeScript 中，标识符必须遵循以下规则：

• 只能包含字母、数字、下划线（_）和美元符号（$）
• 不能以数字开头
• 不能使用 TypeScript 的关键字作为标识符
• 区分大小写

// 有效的标识符
let name: string;
let _age: number;
let $salary: number;
let firstName: string;

// 无效的标识符
let 123abc: string; // 不能以数字开头
let let: string; // 不能使用关键字
let first-name: string; // 不能使用连字符

4. 关键字

TypeScript 保留了一些关键字，这些关键字不能用作标识符。以下是 TypeScript 中的一些关键字：

• abstract
• as
• any
• boolean
• break
• case
• catch
• class
• const
• continue
• debugger
• declare
• default
• delete
• do
• else
• enum
• export
• extends
• false
• finally
• for
• from
• function
• if
• implements
• import
• in
• infer
• interface
• let
• module
• namespace
• never
• new
• null
• number
• object
• of
• package
• private
• protected
• public
• readonly
• require
• return
• static
• string
• super
• switch
• symbol
• this
• throw
• true
• try
• type
• typeof
• var
• void
• while
• with
• yield

5. 类型注解

TypeScript 的一个核心特性是类型注解，它允许你为变量、函数参数和返回值指定类型。

变量类型注解

let name: string = "John";
let age: number = 30;
let isStudent: boolean = true;

函数参数和返回值类型注解

function add(a: number, b: number): number {
  return a + b;
}

function greet(name: string): string {
  return `Hello, ${name}!`;
}

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

6. 函数声明

TypeScript 支持两种函数声明方式：函数声明和函数表达式。

函数声明

function add(a: number, b: number): number {
  return a + b;
}

// 调用函数
let result = add(1, 2);
console.log(result); // 3

函数表达式

const add = function(a: number, b: number): number {
  return a + b;
};

// 调用函数
let result = add(1, 2);
console.log(result); // 3

箭头函数

TypeScript 也支持箭头函数，它是一种更简洁的函数表达式语法。

const add = (a: number, b: number): number => {
  return a + b;
};

// 更简洁的写法（当函数体只有一条返回语句时）
const add = (a: number, b: number): number => a + b;

// 调用函数
let result = add(1, 2);
console.log(result); // 3

7. 变量声明

TypeScript 支持三种变量声明方式：var、let 和 const。

var

var 是 JavaScript 中传统的变量声明方式，它具有函数作用域。

function test() {
  var x: number = 10;
  if (true) {
    var x: number = 20; // 同一个变量
    console.log(x); // 20
  }
  console.log(x); // 20
}

test();

let

let 是 ES6 引入的变量声明方式，它具有块级作用域。

function test() {
  let x: number = 10;
  if (true) {
    let x: number = 20; // 不同的变量
    console.log(x); // 20
  }
  console.log(x); // 10
}

test();

const

const 用于声明常量，一旦赋值就不能修改。它也具有块级作用域。

const PI: number = 3.14159;
// PI = 3.14; // 错误：不能修改常量

const person = {
  name: "John",
  age: 30
};

// 可以修改对象的属性
person.age = 31;
console.log(person.age); // 31

// 但不能重新赋值整个对象
// person = { name: "Jane", age: 25 }; // 错误：不能修改常量

8. 表达式和语句

表达式

表达式是会产生一个值的代码片段。

// 表达式
1 + 2 // 产生值 3
"Hello" + " " + "World" // 产生值 "Hello World"
add(1, 2) // 产生函数的返回值
person.name // 产生对象的属性值

语句

语句是执行一个操作的代码片段，它不会产生值（或产生 undefined）。

// 语句
let x: number = 10;
if (x > 5) {
  console.log("x is greater than 5");
}
for (let i = 0; i < 5; i++) {
  console.log(i);
}

9. 代码块

代码块是由花括号 {} 包围的一组语句。

// 代码块
if (true) {
  // 代码块开始
  let x: number = 10;
  console.log(x);
  // 代码块结束
}

function test() {
  // 代码块开始
  let y: number = 20;
  console.log(y);
  // 代码块结束
}

10. 导入和导出

TypeScript 支持 ES 模块系统，可以使用 import 和 export 语句来导入和导出模块。

导出

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

export function subtract(a: number, b: number): number {
  return a - b;
}

export const PI: number = 3.14159;

导入

// app.ts
import { add, subtract, PI } from "./math";

console.log(add(1, 2)); // 3
console.log(subtract(5, 3)); // 2
console.log(PI); // 3.14159

// 导入所有内容
import * as MathUtils from "./math";

console.log(MathUtils.add(1, 2)); // 3
console.log(MathUtils.subtract(5, 3)); // 2
console.log(MathUtils.PI); // 3.14159

// 导入默认导出
// math.ts
export default function multiply(a: number, b: number): number {
  return a * b;
}

// app.ts
import multiply from "./math";
console.log(multiply(2, 3)); // 6

11. 类型断言

类型断言允许你告诉 TypeScript 编译器某个值的类型，当你比编译器更了解某个值的类型时使用。

使用尖括号语法

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

使用 as 语法

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

12. 模板字符串

模板字符串允许你在字符串中嵌入表达式，使用反引号（`）包围。

let name: string = "John";
let age: number = 30;

// 使用模板字符串
let message: string = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(message); // Hello, my name is John and I am 30 years old.

// 模板字符串可以跨多行
let multiLineMessage: string = `
Hello,
My name is ${name},
I am ${age} years old.
`;
console.log(multiLineMessage);
// 输出：
// Hello,
// My name is John,
// I am 30 years old.

13. 解构赋值

解构赋值允许你从数组或对象中提取值并赋值给变量。

数组解构

let numbers: number[] = [1, 2, 3];

// 数组解构
let [a, b, c] = numbers;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

// 跳过某些元素
let [x, , z] = numbers;
console.log(x); // 1
console.log(z); // 3

// 剩余元素
let [first, ...rest] = numbers;
console.log(first); // 1
console.log(rest); // [2, 3]

对象解构

let person = {
  name: "John",
  age: 30,
  email: "john@example.com"
};

// 对象解构
let { name, age } = person;
console.log(name); // John
console.log(age); // 30

// 使用不同的变量名
let { name: firstName, age: personAge } = person;
console.log(firstName); // John
console.log(personAge); // 30

// 提供默认值
let { name, age, address = "Unknown" } = person;
console.log(address); // Unknown

14. 展开运算符

展开运算符（...）允许你将数组或对象的元素展开。

数组展开

let numbers1: number[] = [1, 2, 3];
let numbers2: number[] = [4, 5, 6];

// 合并数组
let combined: number[] = [...numbers1, ...numbers2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

// 复制数组
let copy: number[] = [...numbers1];
console.log(copy); // [1, 2, 3]

对象展开

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

// 复制对象
let copy = { ...person };
console.log(copy); // { name: "John", age: 30 }

// 合并对象
let personWithEmail = {
  ...person,
  email: "john@example.com"
};
console.log(personWithEmail); // { name: "John", age: 30, email: "john@example.com" }

// 覆盖属性
let updatedPerson = {
  ...person,
  age: 31
};
console.log(updatedPerson); // { name: "John", age: 31 }

总结

TypeScript 的基础语法与 JavaScript 非常相似，但添加了一些额外的特性，如类型注解、接口、泛型等。本文介绍了 TypeScript 的基础语法，包括：

• 注释
• 分号
• 标识符
• 关键字
• 类型注解
• 函数声明
• 变量声明
• 表达式和语句
• 代码块
• 导入和导出
• 类型断言
• 模板字符串
• 解构赋值
• 展开运算符

掌握这些基础语法是学习 TypeScript 的第一步，它们将帮助你编写更安全、更可维护的代码。