前端学习-TypeScript入门

JavaScript 是弱类型语言，经常运行是出现因为类型原因导致代码报错。

TypeScript 是 JavaScript 的一个超集，只是在 JavaScript 的基础之上增加了一些类型标记语法；浏览器并不认识 TypeScript，最终还是要编译成 JavaScript 才能执行。

一.为什么要使用 TypeScript？

1. 使用 TypeScript 定义：IDE 智能提醒，减少代码低级错误。
2. 修改 TypeScript 定义：修改公共组件、公共方法时，所有受影响使用不对的地方都会有标记。 

二.TypeScript 常用类型定义

• 布尔值：

  const isDone: boolean = false;

• 数字：

  const price: number = 6;

• 字符串：

  const firstName: string = 'Xu';

• Void：

  function log(a: string): void{
      console.log('test');
  }

  null 和 undefined 只能赋值给 void 或它们各自的类型。

• undefined & null：

  const a: undefined = undefined;
  const a: null = null;

• 枚举：

  enum key{
      VIEW = 1,
      EDIT = 2
  }

  枚举对象不能用来遍历，key 值和枚举变量需要大写。

三.数组&对象

数组：

// js 写法
let list = [1, 2, 3];

// 写法一
let list: number[] = [1, 2, 3];

// 写法二:数组泛型
let list: Array<number> = [1, 2, 3];

对象：

// js 写法
let obj = {
    b: 2
}

//直接定义
let obj: {b: number} = {
    b: 2
}

//索引属性
let obj: {[key: string]: number} = {
    b: 2
}

四.类型别名

可选属性：

接口的属性在某些条件才存在，不是必须的；用 ? 表示。

type Obj = {
    a: string;
    b?: number;
};

const obj: Obj = { a: '1' }

函数类型： 

接口也可以描述函数类型。

type Fn = {
    {a: number}: void
};
const log: Fn = function(a){
    console.log(a);
}

五.交叉类型&联合类型

联合类型（|）：表示其中之一

类型之一：

const a: number|string = 2

具体值之一：

const a: 'blue' | 'red' = 'red';

交叉类型（&）：表示叠加在一起

type A = {a: string};
type B = {b: number};

type C = A & B;
//C 等价于
type C = {
    a: string;
    b: number;
}

本文章整理自上课ppt，仅供学习使用。