typescript上手-准备\基础类型（一）

因为平时的项目中鲜有用到面向对象的场景，对ts的学习也一直没有正式的提上日程，随着vue3的一直吵闹ts支持的消息充斥圈子，也决心系统学习下，毕竟可以不用，但是不能不会。

安装

官网的介绍，可以直接通过vscode的插件进行安装，我一向是sublime的簇拥，这里还是通过传统的npm进行安装

	npm install -g typescript

编译

随便敲两行ts的代码，保存为ts文件；

	function domWrite(ops:string) {
	    return "Hi, " + ops;
	}
	document.write(domWrite('佳佳布鲁根'))

script直接引用ts肯定是会报error的，毕竟只会解析js的语法；这里就需要通过ts指令对ts文件进行编译，输出js

	tsc index.ts

假设这里错误的使用了函数定义的参数，传入Number(312),则在编译的过程中就会曝出错误，这也是ts的优势之一，早发现早治疗

当然ts的编译可以通过开发工具或者webpack的ts-load进行自动编译，这先说上手，以后用到在详说；

没啥东西，到这里就可以开始撸代码了；

基础类型

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

布尔值

boolean true|false

	let flag:boolean = false;

数字

number 和js一样，ts里的所有数字都是浮点数。 js有的问题依然有；

	let num:number = 666;

字符串

“就是字符串”当然es6的字符串模板也是string,所以`这种字符串也可以`·

	let str: string = "dugan";
	let str1:string = `${str}!!!`;

数组

[‘数’，‘组’] ts中有两种定义方式
第一种，可以在元素类型后面接上 [],定义了啥类型，数组中就只能有这一种类型的项

   let arr1: number[] = [1, 2, 3];
   let arr2: number[] = ['1',' 2','3'];

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

	let arr: Array<number> = [1, 2, 3];
	arr[3]=4  //Fine

元组 Tuple

元祖类型实际上也是数组，只不过可以分开指定项的类型,和数组不同的是超出长度数组指定赋值仍会报错

	let arr: [string, number];
	arr = ['666', 666];		// Fine
	arr = [666, '666'];		// Error
	arr = ['666', true];	// Error
	arr[2] = 666;			// Error

枚举

enum类型是ts独有的，也是对js的补充。 官网的说法是像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。我觉得用人话说就是给变量加个名称，避免魔鬼数字

	enum paece{black, white, freedom}
	let litC: paece= paece.black;

编译成js就是

	var paece;
	(function (paece) {
	    paece[paece["black"] = 0] = "black";
	    paece[paece["white"] = 1] = "white";
	    paece[paece["freedom"] = 2] = "freedom";
	})(paece || (paece = {}));
	var litC = paece.black;
	console.log(litC);

大致就是一个对象

	paece = {
    	0: "black"
   		1: "white"
   		2: "freedom"
   		black: 0
   		freedom: 2
   		white: 1
   }

Any

any就是anyway,就是爱咋咋地；当不知道变量将会是什么类型的时候就可以指定any

	let obj: any = 4;
	obj = "爱咋咋地";
	obj = false; 
	obj = {};
	//All Fine~

Void

字面意思就是无类型，声明这玩意只能赋值null和undefined;暂时没想到哪里能用上；

	let obj:void = null;
	obj = undefined;	//Fine
	obj = 'undefined';	//Error

Null 和 Undefined

真的就只有null和undefined…

	let obj1:null = null;
	let obj2:undefined = undefined;

Never

never类型表示的是那些永不存在的值的类型。 这个大段的描述没消化了,直接上代码还透彻点

	function error(message: string): never {
	    throw new Error(message);
	}

类型断言

在写新的blog时发现用到了断言，才意识到之前并没有学习过，想了一下吧这个一并放在类型里比较合适；
类型断言其实就是通知编译器，我明确的知道变量的类型是什么，通过更改类型，进行更好的方法使用

类型断言有两种形式

let sth: any = "this is a string";
let strLength: number = (<string>sth).length;		//“尖括号”语法
let strLength: number = (sth as string).length;		//as语法

两种写法度可以，但是在jsx中尖括号的写法可能会引起编译错误，所以尽量使用as语法就好了