TS(一)数据类型与高级类型相关

本文目录：

1.TS中常见的数据类型
- 1.1.数字类型
- 1.2.字符串
- 1.3.布尔类型
- 1.4.Null和Undefined
- 1.5.void类型
- 1.6.enum枚举类型
- 1.7.数组
- 1.8.元组
- 1.9.Any类型
- 1.10.Object 类型
2.高级类型相关
- 2.1.联合类型
- 2.2.类型推论
- 2.3.类型断言
- 2.4.类型别名
- 2.5.字符串字面量类型

1.TS中常见的数据类型

JS里面有七种数据类型。Number，String，Boolean, Null, Undefined, Symbol, Object
TS中的常用的数据类型有（内置类型）Number, String, Boolean, Null, Undefined， Void, enum，Array，Any，Object，元组，接口等

1.1.数字类型

1.ts里面的数字类型表示双精度64位浮点值。它可以用来表示整数和分数。
2.支持二进制(0b1010)、八进制(0o744)、十进制、十六进制(0xf00d)

let decimal: number = 6; //十进制，无前缀
let hex: number = 0xf00d; //十六进制，十六进制
let binary: number = 0b1010; //二进制
let octal: number = 0o744; //八进制0o开头

1.2.字符串

1.使用双引号（ "）或单引号（'）表示字符串；但是我们使用了prettier，会自动的将js里面的字符串转换为单引号，因为eslint规范的是单引号
2.还可以使用模板字符串，两个反引号，中间使用${xxx} 嵌入表达式

let color: string = "blue";
color = 'red';
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }. I'll be ${ age + 1 } years old next month.`;

1.3.布尔类型

1.布尔类型是boolean，只有两个值true/false
2.使用new Boolean() 返回的不是一个布尔值，而是一个Boolean对象

let isDone: boolean = true;
let bool1: boolean = new Boolean();  //代码会报错

1.4.Null和Undefined

1.在typescript中，null和undefined是所有类型的子类型；也就是说 undefined 类型的变量，可以赋值给任意类型的变量

let num1: number = undefined
let num2:number = null

上面代码都不会报错
2.undefined表示未定义的值，一个变量最原始的状态，例如声明了变量没有赋值
3.null是空值的意思，表示一个对象被人为的重置为空对象。内存里的表示就是栈中的变量没有指向堆中的内存对象。一般的如果要释放某个对象就将它的值设置为null

console.log(null == undefined)  //true
console.log(null ===undefined)  //false

1.5.void类型

1.JavaScript 没有空值（Void）的概念，在TypeScript 中，可以用 void 表示没有任何返回值的函数;表示没有任何类型

function warnUser(): void {
 console.log('这就是一个警示功能的函数，没有return')
 console.log("This is my warning message");
}

1.6.enum枚举类型

1.枚举类型可以为一组数值赋予友好的名字
2.默认从索引号0开始，也可以手动赋值
通过enum关键字，创建了枚举类型Color，表示一组颜色

enum Color {Red, Green, Blue}
let c1: Color = Color.Greent

c1此时是1
因为ts中的枚举还做了反向映射
enum类型默认从0开始，但是也可以手动赋值来改变每个成员的值

enum Color {Red = 1, Green, Blue}
let c2: Color = Color.Green;

此时c2是2

enum Color {Red, Green = 6, Blue}

此时Red依然是0.Grenn被我们手动改成了6，Blue就是7
此外枚举前面的索引还可以是字符串，称为字符串枚举

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}
const value = 'UP'
if (value === Direction.Up) {
  console.log('go up!')
}

运行代码，控制台可以打印出来go up!

1.7.数组

1.ts里面定义数组的几种方式
数组的项中不允许出现其他的类型；有时候可以通过any类型来允许出现任意类型

第一种方式：类型+方括号的表示法例如 number[], 这种类型的数组里面是不允许有除了number之外的类型
第二种方式：数组泛型 Array+ <类型> 例如 Array
第三种方式：接口表示数组，利用索引签名

let list: number[] = [1, 2, 3];
lsit1 = [1,2,'3']  //这样会报错
let list2: Array = [1, 2, 3];

interface selfArray {
    [index: number]: numer
}
let list3: selfArray = [1,2,3]

注意一下类数组

function test() {
    console.log(arguments)
}

类数组有length属性以及也可以通过索引获取其值

console.log(arguments.length)
console.log(arguments[0])

但是类数组没有数组的相关方法，比如arguments.forEach，这样是错误的。
在typescript中，也不能把类数组赋值给数组

let arr: any[] = arguments

上面这样写是错误的。

1.8.元组

数组是合并了相同类型的对象，而元组Tuple合并了不同类型的对象
元祖的表示和数组非常类似，只不过它将类型写在了里面这就对每一项起到了限定的作用

let list:[number, string] = [1, 'a']

上面的代码是正确的，但是当我们写少一项就会报错同样写多一项也会有问题

list= [20,'molly', true]

1.9.Any类型

1.any类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查
2.Any类型有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型，如用户输入或者ajax或者第三方库；这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用 any类型来标记这些变量
3.使用场景是，当我们需要把公司现有的javascript项目迁移到typescript上面来的时候，就可以给变量声明any类型，后面再逐个的去优化，能让我们的老项目迅速切换到typescirpt

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;

1.10.Object 类型

Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法，即便它真的有这些方法

let notSure: any = 4;
notSure.age; 
notSure.toFixed();

上面的代码可以正常运行

let prettySure: Object = 4;
prettySure.toFixed();

但是Object不可以调用任意方法，经过实践，我们发现Object不是不可以调用任意方法，只是不能调用其原型上的任意方法。比如：

let prettySure: Object = 4;
prettySure.toFixed();
prettySure.toString();

toString方法是可以进行调用的

2.高级类型相关

2.1.联合类型

表示取值可以为多种类型中的一种，使用竖线（|）分割每个类型

let myNumber: string | number;
myNumber = 'nine';
myNumber = 9;
   
console.log(myNumber);
myNumber = true;

这里允许myNumber的数据类型是 string和number，不能是其他类型; 如果赋值为boolean则会报编译错误

联合类型的属性或方法,只能访问它的所有类型里共有的属性或方法

function getParam(argc: number | string) {
    console.log(argc.toFixed());  //Property ‘toFixed’ does not exist on type 'string'
    console.log(argc.toString());  //这个方法就可以正常运行
}
getParam(1);

补充联合类型相当于由类型构成的枚举类型

2.2.类型推论

TS类型推论的存在，让JS的代码可以不经过任何改动就可以在TS中正常运行。

TypeScript里，在有些没有明确指出类型的地方，类型推论会帮助提供类型
发生时机：推断发生在初始化变量和成员，设置默认参数值和决定函数返回值时

let x = 3;
x = 'three';

变量x的类型被推断为数字,如果再赋值为字符串，就会报类型错误
上面的代码等价于

x: number = 3;
x = 'AA';

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查

let x;
x = 'string';
x = 'number';
// 函数的参数和返回值使用的类型推论， 默认都是any类型
function f1(a, b) {
   console.log(a, b);
}

2.3.类型断言

类型断言可以用来手动指定一个值的类型
语法： <类型>值或者值 as 类型，在jsx里面只能使用第二种
用来告诉编译器你比它更了解这个类型，并且它不应该再发出错误；相当于告诉他不要去对这个值进行类型检查
下面的代码直接运行的结果会报错

function fn(param: number | string):number {
  return param.length
}
console.log(fn('hello'))

加上类型断言，就可以让该处代码跳过tsc的类型检查，并且成功打印出我们期待的值：5

function fn(param: number | string):number {
  return (param).length
}
console.log(fn('hello'))

如果在调用的时候我们传入的不是字符串，比如说是一个数字1呢

function fn(param: number | string):number {
  return (param).length
}
console.log(fn(1))

打印结果是undefined
类型断言的使用一定要逻辑严谨，不能乱指定，必要的时候需要加上ifelse判定，用来减少不可控因素的副作用。
访问联合类型的属性或方法有个特点，只能访问此联合类型的所有公共的属性或者方法，比如toString()方法，但是length属性只有字符串有，所以不行，报类型错误

function fn(x: number | string): any {
   // return x.length;
  if (typeof x === 'string') {
    // 使用类型断言 告诉编译器我知道这个是字符串类型，不用再检查了
    // return (x).length; 
    return (x as string).length;
  } else {
     return x.toString().length;
  }
}
console.log(fn('hello'));
console.log(fn(123));

双重类型断言：

let x:number | string;
x = 123
let y = (x as any) as string

后面的类型必须是前面类型的子类型

2.4.类型别名

这个别名仅作了解就可以了，实际工作中都会用接口interface

类型别名用来给一个类型起个新名字
起别名不会新建一个类型 - 它创建了一个新名字来引用那个类型；一般给原始类型起别名没什么用
工作里面尽量使用后面我们会学习的接口来代替类型别名

// 语法结构是 type + 自定义变量名  然后再赋值一个已存在的类型
type Name = string;
type NameNS = string | number;
   
let goodsName: Name = 'iphone';
let goodsName1: NameNS = 12;

2.5.字符串字面量类型

这个类型的概念有点像前面学的enum枚举类型，定义方式和类型别名的定义方式一样，都是用type进行定义

字符串string字面量类型用来约束取值只能是某几个字符串中的一个
字符串字面量类型与类型别名都是使用 type 进行定义
TypeScript 同样也提供 boolean 和 number 的字面量类型

type MoveDirection = 'up' | 'down' | 'left' | 'rigth';
function move(direction: MoveDirection) {
  console.log(`向：${direction} 方向移动`);
}
move('up');  //向up方向移动
move('下');  //报错

TypeScript 同样也提供 boolean 和 number 的字面量类型：例如

type oneToThree = 1 | 2 | 3;
type myBool = true | false;
   
let myNum:oneToThree  = 3;  
let myboo:myBool  = false;
console.log(myNum, myboo); //正常运行