Typescript 系列课程 – 1

Typescript简介

Typescript是一个javascript的超集，他并不能在js及nodejs的环境中运行，需要通过编译器先转换为js代码，TS添加了许多js中没有的功能，在编译阶段也会把出现的问题抛出来，例如类型检查功能，在大型项目的开发中提供了更好的开发体验。

当然事情都有两面性，ts的缺点是必须经过编译才能运行在环境中。第二个缺点是coding起来需要有一定的规则，这也意味着在大型多人合作的项目中大家也都遵循同样的规则写代码，这对后期的维护提供了极大的方便。

TypesScript类型

TS中类型分为两类，一类是JS中原有的类型，包括原始类型(primitive type) number, string, boolean, null, undefined, Symbol; 对象类型 Object

第二类是TS新增的类型，包括自定义类型(alias), 联合类型，交叉类型，字面量类型， void， any等等，下面详细介绍下TypeScript中新增的类型

1.自定义类型

例如在创建一个员工的对象时，如果每次都在创建时写下这个对象的类型就会很麻烦，遵循DRY(Don’t repeat yourself)原则，诞生了类型别名

let employee: {
    id: number,
    name: string,
    retire: (date: Date) => void
} = { 
    id: 1,
    name: null,
    retire: (date: Date) => {
      console.log(date);
    }
}

遵循DRY(Don’t repeat yourself)原则，诞生了类型别名

type Employee = {
  readonly id: number,
  name: string,
  retire: (date: Date) => void
}

let employee: Employee = {
  id: 1,
  name: 'John',
  retire: (date: Date) => {}
}

2. 联合类型

当处理可能是多种类型的值时，我们可以使用联合类型，例：

function kgToLbs(weight: number | string): number {
    if (typeof weight === 'number') {
      return weight * 2.2;
    } else {
      return parseInt(weight, 10) * 2.2;
    }
}
kgToLbs(10)
kgToLbs("10kg")

3. 交叉类型

type Draggable = {
    drag: () => void;
  }

  type Resizable = {
    resize: () => void;
  }

  type UIWidget = Draggable & Resizable

  let textBox: UIWidget = {
    drag: () => {},
    resize: () => {}
  }

4. 字面量类型

有时我们需要限定变量只能使用我们规定好的几个值，这时就可以使用字面量类型了

type Quantity = 50 | 100
let quantity: Quantity = 50

type Metric = 'cm' | 'inch'

5. 可选链，例

type Customer = {
  birthday: Date,
}
function getCustomer(id: number): Customer | null {
  return id === 0 ? null : {birthday: new Date()}
}

let customer = getCustomer(0)
// console.log(customer.birthday)
// 注意getCustomer是可能返回null的，这是是没有birthday属性的，因此可以用typescript的可选写法，等同于
// if (customer) { console.log(customer.birthday) }
console.log(customer?.birthday)

// 可选链也可用在其他地方，如customers?.[0]

// Optional call
let log: any = null
log?.('a')

6. Type Casting，类型断言

使用as作为关键字，将覆盖原有的类型，如：
let x: unknown = ‘hello’;
console.log((x as string).length);

注意：断言并不会改变值的原有类型
let x: unknown = 4;
console.log((x as string).length); // prints undefined since numbers don’t have a length