前端开发基础（4）TypeScript

TypeScript 是 JavaScript 的超集，添加了静态类型检查和一些新的语言特性。

一. 数据类型

const [变量名] : [类型] = 值;
TypeScript 遵循强类型，如果将不同的类型赋值给变量会编译错误。

• 任意类型：any
• 数字：number
• 字符串：string
• 布尔类型：boolean
• 数组
  • 在元素类型后加 []：let arr: number[] = [1, 2];
  • 数组泛型：let arr: Array<number> = [1, 2];
• 枚举：enum

enum Color { Red, Green, Blue };	// 想当于 enum Color {Red = 0, Green = 1, Blue = 2}；
let c: Color = Color.Blue;
console.log(c);    // 输出 2

• 对象

interface User {
	name: string,
	age: number,
	email?: string, 
}
let user: User = {name: 'John', age: 18};

• 联合类型：通过管道（|）设置多种类型。

var value: string | number; 

二. 函数

• 一般格式

const add = (x: number, y: number): number => {
	return x + y;
}

• 可选参数 ?:

const getName = (firstName: string, lastName?: string) => {
	return lastName ? firstName + ' ' + lastName : firstName;
}

• 默认参数

const getDiscount = (price: number, rate: number = 0.5) => {
	return price * rate;
}

• 剩余参数

const getName = (firstName: string, ...restName: string[]) => {
	return firstName + ' ' + restName.join(' ');
}

三. 接口

接口（interface）：用来定义对象的结构和类型，可以通过 export 导出。

interface Person = {
  name: string;
  age: number;
  tags?: string[];
};

const person: Person = {
  name: 'John',
  age: 18,
};

const datas: Person[] = [
  {
	name: 'John',
	age: 18,
  },{
	name: 'Alice',
	age: 17,
	tags: ['nice'],
  },
];