返回

TypeScript 基础语法:掌握 JavaScript 下一代的编程利器

前端

TypeScript 作为 JavaScript 的超集,凭借其强大的类型系统、编译器支持,以静态类型检查的方式确保代码的可靠性。学习 TypeScript 可以让你开发出更加健壮的 JavaScript 程序。本文将为你介绍 TypeScript 的基本语法,帮助你快速入门 TypeScript 开发。

变量

TypeScript 中的变量类型包括 number、string、boolean、null、undefined 等基本数据类型,以及数组、对象、枚举、类等复杂数据类型。

let num: number = 1; // 声明 number 类型的变量 num 并赋值
let str: string = "hello"; // 声明 string 类型的变量 str 并赋值
let bool: boolean = true; // 声明 boolean 类型的变量 bool 并赋值
let arr: number[] = [1, 2, 3]; // 声明 number 类型的数组 arr 并赋值

函数

TypeScript 中的函数使用 function 声明,支持可选参数、默认参数、剩余参数、箭头函数等多种函数类型。

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

// 调用函数
let result = sum(1, 2);

TypeScript 中的类使用 class 关键字声明,支持属性、方法、构造函数、继承、重载等多种特性。

class Person {
  private name: string;
  private age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  getName() {
    return this.name;
  }
}

// 创建 Person 类的实例
let person = new Person("John Doe", 30);

// 访问类的方法
let name = person.getName();

接口

TypeScript 中的接口使用 interface 关键字声明,定义了一组方法和属性的规范,其他类型可以实现该接口。

interface IPerson {
  getName(): string;
  getAge(): number;
}

class Person implements IPerson {
  // 实现 IPerson 接口的方法
  getName() {
    return this.name;
  }

  getAge() {
    return this.age;
  }
}

枚举

TypeScript 中的枚举使用 enum 关键字声明,定义了一组常量值。

enum Color {
  Red,
  Green,
  Blue
}

let color = Color.Red;

泛型

TypeScript 中的泛型使用 等符号声明,可以定义类型参数,实现类型重用。

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

let num = identity<number>(1); // 泛型参数为 number
let str = identity<string>("hello"); // 泛型参数为 string

模块

TypeScript 中的模块使用 module 关键字声明,可以将相关的代码组织在一起,实现模块化开发。

module Utils {
  export function sum(a: number, b: number): number {
    return a + b;
  }
}

// 使用模块中的函数
let result = Utils.sum(1, 2);

命名空间

TypeScript 中的命名空间使用 namespace 关键字声明,可以将相关的类、接口、枚举等组织在一起,实现命名空间管理。

namespace MyNamespace {
  export class Person {
    private name: string;
    private age: number;

    constructor(name: string, age: number) {
      this.name = name;
      this.age = age;
    }

    getName() {
      return this.name;
    }
  }
}

// 使用命名空间中的类
let person = new MyNamespace.Person("John Doe", 30);

总结

本篇文章介绍了 TypeScript 的基本语法,包括变量、函数、类、接口、枚举、泛型、模块、命名空间等。通过学习这些基本语法,你可以快速入门 TypeScript 开发,从而提升前端开发效率。