ts语法基础——基础类型

TS 语法

TS 基础类型

TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用

TS 支持的变量类型如下：

类型	描述
boolean	限制为布尔类型， true 或者 false
number	限制为任意的数字。 二进制，八进制，十进制，十六进制均可
string	限制为任意的字符串。单引号，双引号，反引号均可
字面量	限制为某个字面量的值
any	限制为任意类型
void	限制为 undefined, 一般用来限制函数的返回值
never	限制函数没有返回值
object	限制为对象类型
array	限制为数组类型
tuple 元组	限制为固定长度与类型的数组
enum 枚举	限制为枚举的数据

布尔类型

最基本的数据类型就是简单的 true/false 值，在JavaScript 和 TypeScript 里叫做 boolean（其它语言中也一样）。

let isDone: boolean = false;
isDone = true;
// isDone = 2 // error

数字类型

除了支持十进制和十六进制字面量，也支持二进制和八进制字面量。

let a1: number = 10 // 十进制
let a2: number = 0b1010  // 二进制
let a3: number = 0o12 // 八进制
let a4: number = 0xa // 十六进制

字符串类型

JavaScript 程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样，我们使用 string 表示文本数据类型。 和 JavaScript 一样，可以使用双引号（"）或单引号（'）表示字符串。

let name:string = 'tom'
name = 'jack'
// name = 12 // error
let age:number = 12
const info = `My name is ${name}, I am ${age} years old!`

字面量类型

TS 允许限制某个变量为固定的某个值

let z: 521 = 521;
let z2: 'love' = 'love';
// z='abc'; //类型不符 error

any

any 类型允许变量的值为任意类型, 并且可以进行任意类型的赋值

let a: any = 100;
a = 'iloveyou';

void

void 限制值为 undefined

let v: void = undefined;
function fn():void{
  return undefined;
}

对象

object 限制类型为对象, 用的比较少

//object 类型
let o: object = {}
o = [];

数组

TypeScript 像 JavaScript 一样可以操作数组元素。 有两种方式可以定义数组。

第一种，可以在元素类型后面接上[]，表示由此类型元素组成的一个数组：

第二种方式是使用数组泛型，Array<元素类型>：

let arr: number[] = [1,2,3];
// arr.push('abc');// error
let arr2: Array<number> = [4,5,6];

元组

元组（Tuple）类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

let t1: [string, number] = ['james', 30];
console.log(t1[0].toUpperCase());
//console.log(t1[1].slice(1));// error

枚举

枚举（enum）类型是对 JavaScript 标准数据类型的一个补充。 使用枚举类型可以为一组数值赋予友好的名字。 一般用于组织一些有相似之处的常量，让这些常量更规范、更统一。

enum Gender{
  Female,
  Male,
  Secret
}

let me: object = {
  gender: Gender.Male,
}

console.log(me);

联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。

let v1: number | string;
v1 = 5211314;
v1 = 'iloveyou'

类型断言

类型断言（Type Assertion）可以告诉编译器，“相信我，我知道自己在干什么，别报错，出了事我负责”。

(async () => {
  let v: number | string;
  v = await new Promise((resolve) => {
    resolve(3.14);
  })
  //方式一  as
  console.log((v as number).toFixed(2));
  //方式二  <类型>
  console.log((<number>v).toFixed(2));
})()

类型推断

TS 会在没有明确的指定类型的时候推测出一个类型。主要有下面两种情况

1. 变量声明时赋值了，推断为值对应的类型
2. 变量声明时没有赋值， 推断为 any 类型

let v3 = 100; // number 类型
// v3 = 'loveyou'; //类型 error
let v4; // any 类型
v4 = 100; 
v4 = 'loveyou';

函数

TypeScript 为 JavaScript 函数添加了额外的功能

参数与返回值类型

TypeScript 可以为参数与返回值设置类型，代码示例如下：

function add(x: number, y: number): number {
  return x + y
}

let sub = function(x: number, y: number): number { 
  return x + y
}

let times = (a: number, b: number): number => {
    return a * b;
}

TypeScript 能够根据返回语句自动推断出返回值类型，因此我们通常省略返回值的类型。

函数声明的完整形式

现在我们已经为函数指定了类型，下面让我们写出函数的完整类型。

let divide: (bei: number, chu: number) => number = function(a: number, b: number): number{
    return a / b;
}

可选参数

TypeScript 默认要求函数实参数量要与形参的数量保持一致，不过可以使用『 ?: 』设置参数为可选参数

//截取字符串
function slice(str: string, start: number, end ?: number): string{
    return 'iloveyou';
}

参数默认值

TypeScript 与 JavaScript 一样，允许为参数设置默认值

//构建手机号
function buildPhone(code:string, area : string = '+86'){
    return area + code;
}

剩余参数

针对不定个数参数的函数时，我们可以使用 ES6 提供的 rest 参数来处理。不过在 TypeScript 中需要设置类型。

//剩余参数
function add(a: number, b: number, ...args: number[]){
  //求和
  args = [a, b, ...args];
  return args.reduce((prev: number, current: number) => {
    return prev + current;
  })
}