TypeScript自学笔记01——数据类型以及变量的声明和解构

前言：ts相比于js的特性

1. 类型注解

   function log (msg: string) {
       console.log(msg);
   }
   log('hello world');
   

2. 接口
   定义一种有意义的对象，并不是前后端的接口

   interface Person {
       name: string,
       age: number,
       sex: string
   }
   
   function logPerson (person: Person) {
       console.log(person.name, person.age, person.sex)    
   }
   
   let xiaoming = {
       name: '小明',
       age: 23,
       sex: 'female'
   }
   
   logPerson(xiaoming)
   

3. 类Class
   需要先声明属性，类似java

   class Dog {
       name: string
       age: number
   
       constructor (name: string, age: number) {
           this.name = name
           this.age = age
       }
   }
   
   let pangpang = new Dog('pangpang', 1)
   

   编译后的结果，以后可以规范地写js

   var Dog = /** @class */ (function () {
       function Dog(name, age) {
           this.name = name;
           this.age = age;
       }
       return Dog;
   }());
   var pangpang = new Dog('pangpang', 1);
   
   

1 数据类型

1.1 字符串、数值、布尔类型

字符串

string类型
let name1: string = '茉莉蜜茶'
let name2: string = "脉动"
let info: string = `我最喜欢喝${name1}和${name2}`

数值

number类型
let age: number = 16 		// 10
let age2: number = 0x10 	// 16
let age3: number = 0o20 	// 8
let age4: number = 0b10000 	// 2

布尔

let flag: boolean = false

1.2 数组、元组、枚举

数组

let names: string[] = ['haha', 'xixi', 'heihei']
// 数组泛型
let numarr: Array<number> = [1,2,3,4]

元组

元组是一种已知长度和类型的变量，变量必须一一对应，但与golang的数组有一定区别

let tuple: [string, number]
tuple = ['张三', 20]
tuple = [20, '张三'] // 错误

当访问一个越界的元素，会使用联合类型替代
在长度之外赋值，会根据已声明的类型进行组合成联合类型
tuple[3] = '李四' // 允许，tuple[3]是(string|number)联合类型

枚举

enum Color {
    red,
    green,
    blue
}

let c: Color = Color.red	// 0
let c2: number = Color.blue	// 2
// 从值来反向取名字
let color: string = Color[0]

从上面这个例子可以看出，枚举类型其实就是数值类型，只不过产生了一个映射，默认从0开始，以1递增。也可以手动赋值：

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

1.3 any、void、null\undefined、never、object

any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。

当你只知道一部分数据的类型时，any类型也是有用的。 比如，你有一个数组，它包含了不同的类型的数据：

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

let list: any[] = [1, true, "free"];

void

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void。

声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null：

function warnUser(): void {
    console.log("This is my warning message");
}

// 这并没有什么意义，但是是允许的
let unusable: void = undefined;
let unusable: void = null;

null\undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。 和 void相似，它们的本身的类型用处不是很大。默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。

let u: undefined = undefined;
let n: null = null;

然而，当你指定了–strictNullChecks标记，null和undefined只能赋值给void和它们各自。 这能避免 很多常见的问题。 也许在某处你想传入一个 string或null或undefined，你可以使用联合类型string | null | undefined。
再次说明，稍后我们会介绍联合类型。

注意：我们鼓励尽可能地使用–strictNullChecks，但在本手册里我们假设这个标记是关闭的。

never

never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。

下面是一些返回never类型的函数：

返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

推断的返回值类型为never
function fail() {
    return error("Something failed");
}

返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

object

object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。

使用object类型，就可以更好的表示像Object.create这样的API。例如：

我们知道，js中的object是最最常用的一种数据类型，它无处不在，但是就我目前的学习来看，它在ts中好像并不常用。

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

1.4 类型断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

类比类型转换更好理解，但不是真正的类型转换，只是逻辑上的。

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
or
let strLength: number = (someValue as string).length;

2 变量声明与解构

2.1 变量的声明

var，let，const。

其中var能不用就不用，注意作用域和变量提升的问题。
let不谈了
const常量类型，一旦赋值就不能改变，但对于引用类型来说，不能改变对应的地址。

2.2 解构

解构能说的就有很多了
记住(cosnt {a, b} = require(‘xxx’))
展开运算符…对数组和对象

类似于深拷贝的效果
let defultoptions = {
	speed: 1,
	width: 1
}
function init (options = {}) {
	defaultoptions = {...defaultoptions, ...options}
}

展开数组，合并数组
let [first, ...rest] = [1,2,3,4,5,6,7]
let all = [...a, ...b]

交换元素，这样很慢
[a,b] = [b,a]