TypeScript 糖语法

TypeScript 是 JavaScript 的超集，提供了额外的语言特性以及类型检测。在 TypeScript 中，有一些糖语法可以帮助我们更加方便地编写代码。下面就来介绍一下 TypeScript 的糖语法吧。

类型别名

类型别名可以让我们给一个类型起一个新的名字，这样就可以方便地在代码中使用这个新名字。

type Name = string
type Age = number
type Person = {
  name: Name,
  age: Age,
}

使用 type 关键字可以定义一个类型别名。上面的代码定义了三个类型别名 Name、Age、Person。

可选属性

在 JavaScript/TypeScript 中，对象的属性是可以动态添加或删除的。如果我们需要定义一个对象，它具有一些必需的属性，但也可能有一些可选的属性，那么可以使用可选属性的语法。

type Person = {
  name: string,
  age: number,
  height?: number,
  weight?: number,
}

在属性名后面加上 ? 就表示这个属性是可选的。上面的代码定义了一个 Person 类型，它有两个必需的属性 name 和 age，还有两个可选的属性 height 和 weight。

索引签名

当我们不知道一个对象会有哪些属性时，可以使用索引签名来定义一个对象类型。索引签名允许我们使用一个类型来描述对象的键和值的类型。

type Obj = {
  [key: string]: string,
}

上面的代码定义了一个 Obj 类型，它的键是字符串类型，值也是字符串类型。这个类型可以用来表示一个键是字符串类型，值也是字符串类型的对象。

只读属性

有时候我们希望对象的某些属性只允许读取，不允许修改。这时可以使用只读属性的语法。

type Person = {
  readonly name: string,
  readonly age: number,
}

在属性名前面加上 readonly 就表示这个属性是只读的。上面的代码定义了一个 Person 类型，它有两个只读属性 name 和 age。

箭头函数

箭头函数是 ES6 中新增的一种函数定义方式，它的语法比普通函数更加简洁：

const add = (a: number, b: number): number => a + b

上面的代码定义了一个箭头函数 add，它接受两个参数 a 和 b，返回它们的和。

空值合并运算符

空值合并运算符 ?? 可以用来判断一个值是否为 null 或 undefined，如果是，就返回一个默认值。这个运算符的语法比三元表达式更加简洁：

const foo = null ?? 'bar' // 'bar'
const bar = 'baz' ?? 'qux' // 'baz'

上面的代码演示了如何使用空值合并运算符。如果左侧的值是 null 或 undefined，就返回右侧的值。否则返回左侧的值。

可选链操作符

可选链操作符 ?. 可以用来访问一个对象的属性或方法，即使对象不存在或属性/方法不存在也不会出现运行时错误。

const person = {
  name: 'Alice',
  address: {
    city: 'Shanghai',
    postcode: '200000',
  },
}

const postcode = person.address?.postcode

上面的代码访问了 person 对象的 address 属性的 postcode 属性。如果 address 不存在，那么 postcode 就为 undefined，而不会出现运行时错误。

总结

上面介绍了 TypeScript 的一些糖语法，包括类型别名、可选属性、索引签名、只读属性、箭头函数、空值合并运算符和可选链操作符。这些糖语法可以帮助我们更加方便地编写代码，提高代码的可读性和可维护性。