TypeScript中的函数和类你了解吗

当谈及JavaScript的类型系统时，TypeScript就成为了开发者的一个选择。TypeScript是一种编程语言，可以编译成JavaScript，它包括JavaScript的所有特性，同时带来了很多其他优势，例如静态类型检测、类型推断、接口、类、命名空间、泛型等等。在这篇文章中，我们将重点讨论TypeScript中的函数和类。

函数

函数式编程

JavaScript已经越来越多的支持函数式编程，而TypeScript进一步扩展了这项功能。一个函数可以视为输入值到输出值的映射，而且在TypeScript中，函数还可以是对象的一等公民。

例如，下面这个简单的函数将两个数相加：

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

这里，函数名是add，它的两个参数都是数字类型，函数会返回两个数字的和。在函数的最后，我们返回了a + b的结果，它的类型是number。我们可以使用函数的类型声明来指定这个函数需要什么类型的参数，和应该返回什么类型的数据。

箭头函数

箭头函数是另一种定义函数的方式，它们使用更少的语法，并且更容易读懂，特别是当函数被定义为一个表达式的时候。下面是一个箭头函数的例子：

const greet = (name: string): string => {
  return `Hello, ${name}!`;
}

这个例子定义了一个名为greet的函数，接受一个字符串参数name，并返回一个模板字符串。这个箭头函数返回的类型是string，跟这个函数的参数是一致的。可以使用参数列表和返回类型指定出函数的签名。

可选参数和默认参数

在TypeScript中，函数可以定义可选参数或默认参数。可选参数声明跟普通参数一样，但在参数名后面加上一个问号?，而默认参数会在定义参数时指定，它们代表了函数的默认值。

function buildName(firstName: string, lastName = 'Smith'): string {
  if (firstName) {
    return firstName + ' ' + lastName;
  } else {
    return lastName;
  }
}

name1 = buildName('Bob');  // 返回 "Bob Smith"
name2 = buildName('Bob', 'Adams');  // 返回 "Bob Adams"
name3 = buildName(null);  // 返回 "Smith"

在这个例子中，我们定义了一个函数buildName，它有两个参数，firstName和lastName （默认值为'Smith'）。当我们给firstName传递一个值，那么函数就会返回全名，如果没有传递，就会返回'Smith'。

剩余参数

TypeScript中还引入了剩余参数的概念，这意味着一个函数可以接收一个任意数量的参数，把它们放入一个数组中，并在函数中进行操作。下面是定义一个剩余参数的函数的例子：

function buildName(firstName: string, ...restOfName: string[]): string {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

这个例子定义了一个函数buildName，它的第一个参数是一个字符串firstName，后面定义了一个不确定数量的字符串参数，参数在函数内被整合成一个数组restOfName。在这个函数中，我们使用了join方法和空格作为参数，将数组中所有值以空格连接，并最终返回拼接后的字符串。

类

简介

JavaScript中经常会使用面向对象的编程方式来组织代码，而TypeScript支持这种方式，并且可以使用类的语言特性来实现更强大、更容易重用的代码。

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return `Hello, ${this.greeting}!`;
  }
}

const myGreeter = new Greeter('world');
console.log(myGreeter.greet());  // 输出 "Hello, world!"

这个例子定义了一个名字叫做Greeter的类，它有一个名为greeting的成员变量和一个名为greet的方法，当greet被调用时，它会在greeting前加上"Hello, "，然后返回一个拼接后的字符串。我们还定义了一个构造函数，它会被调用来初始化greeting。

当我们创建一个myGreeter对象时，它调用了我们的构造函数，并将一个初始值'world'传入为message。我们可以调用类的成员方法（greet），或者直接访问类的成员变量（greeting）。

继承

通过继承，在类之间共享代码是常见的。在TypeScript中，我们使用extends这个关键字来创建一个子类，子类支持继承父级类的属性和方法。

class Animal {
  name: string;

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

  move(distance: number) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name);
  }

  bark() {
    console.log(`Woof! Woof!`);
  }
}

const myDog = new Dog('Rover');
myDog.bark();  // 输出 "Woof! Woof!"
myDog.move(10);  // 输出 "Rover moved 10m."

在这个例子中，我们定义了一个名为Animal的类，它有一个名为name的成员变量和一个名为move的方法。然后，我们定义了一个名为Dog的子类，它继承了Animal类，并新增了一个名为bark的方法。

当我们创建一个Dog对象时，它调用父类的constructor，并将name作为参数传递进去。我们也可以调用子类的bark方法和父类的move方法。

修饰符

TypeScript中引入了修饰符的概念，它们可以控制类的访问权限。我们可以在变量或函数前面添加public、private、protected，来确定其可见性。

• public： 修饰的成员在类内和类外都能访问，这也是默认的修饰符。
• private： 修饰符的成员只能在类内部访问。
• protected: 修饰的成员可以在类内部和子类中访问，但不能在类外部被访问。

class Animal {
  protected name: string;

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

  protected move(distance: number) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

class Dog extends Animal {
  private breed: string;

  constructor(name: string, breed: string) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`Woof! Woof!`);
  }

  jump(distance: number) {
    this.move(distance);
    console.log(`I'm a ${this.breed}, and I jumped!`);
  }
}

const myDog = new Dog('Rover', 'Beagle');
myDog.bark();  // 输出 "Woof! Woof!"
myDog.jump(10);  // 输出 "Rover moved 10m. I'm a Beagle, and I jumped!"

在这个例子中，我们定义了一个名为Animal的类，并在其内部和构造函数上使用protected修饰符。我们还定义了一个名为Dog的子类，它使用了private修饰符和一个新的函数jump，该函数在类内部调用move来改变Dog实例的位置。在Dog类的实例上，我们可以调用bark和jump方法。