typescript介绍及基础类型

特点

• 以Javascript为基础构建的语言
• 一个JavaScript的超集
• 可以在任何支持JavaScript的平台中执行
• TypeScript扩展了JavaScript，并添加了类型
• TS不能被JS解析器直接执行，需要编译成JS再执行

那么TS增加了哪些东西呢？

• 类型，让那些变量不再”不伦不类”、”朝三暮四”。
• 支持ES的新特性
• 添加ES不具备的新特性
• 丰富的配置选项
• 强大的开发工具

类型声明

//相对于JS松散的类型声明，TS有了更为严格的限制
//在JS中
let a = 'a';
a = 123;
a = true;
//可能会出现更改数据类型的情况而且不会报错
//但在TS中，一旦定下了数据类型，就不能再改变
let a:string;
a = 123 //这就会报错

//也可以选择直接赋值，这样会自动声明一个类型
let a = '123';
a = 123	//一样报错

//类型声明另一个重要的意义在于限制函数的输入和输出
function sum(a:number,b:number):number{
    return a+b;
}
//这将会严格限制输入的类型和个数，以及输出的类型

基础类型

布尔值

let isDone:boolean = false;

数字

//和JS一样，TS中的所有数字都是浮点数
//除了支持10进制和16进制字面量，TS还支持ES2015中引入的二进制和八进制字面量
let decLiteral:number = 6;
let hexLiteral:number = 0xf00d;
let binaryLiteral:number = 0b1010;
let octalLiteral:number = 0o744;

字符串

//和JS一样，可以使用"、或者'表示字符串
let name:string = "bob";
name = "smith";

还可以使用模板字符串，

let nam: string = `GENE`
let age: number = 37
let sentence: string = `Hello,my name is ${nam}.
I'll be ${age + 1} years old next month.`

数组

有两种方式可以定义数组

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

  let list: number[] = [1,2,3];

• 使用数组泛型，Array<元素类型>

  let list: Array<number> = [1,2,3]

元组

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

eg:可以定义一对值分别为string和number类型的元组

let x: [string,number];
x = ['hello',10];
x = [10,'hello'];	//Error

当访问一个已知索引的元素，会得到正确的类型

console.log(x[0].substr(1));
console.log(x[1].substr(1)); //number上不存在属性substr

枚举

enum类型是对JS标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字

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

我们可以手动的为枚举值进行赋值

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

Any

当在编程阶段还不清楚类型的变量时，不希望类型检查器对这些值进行检查，可以使用any类型来标记这些变量

let notSure :any = 4;
notSure = 'maybe it can be a string';
notSure = false; 

同时，对于混合数组，any也是有作用的

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

Void

某种程度上来说，void类型像是与any类型相反，表示没有任何类型。

当一个函数没有返回值时，通常会见到其返回值类型是void

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

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

let unusable: void = undefined;

Null和Undefined

TS中，undefined和null两者各自有自己的类型分别叫做undefined和null。和void相似，他们本身类型用处不是很大

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

Never

never类型表示那些永不存在的值的类型

eg：never类型是那些总是会抛出异常或根本就没有返回值的函数表达式或箭头函数表达式的返回值类型；

变量也可能是never类型，当它们被永不为真的类型保护所约束时

never类型是任何类型的子集，也可以赋值给任何类型；

然鹅，没有类型是never的子类型或者可以赋值给never类型(除了never本身以外)。即使any也不可以赋值给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

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

使用object类型，可以更好的表示像Object.create这样的api

declare function create(o: object|null):void;
create({prop:0});
create(null);

create(42);	//报错
create("string"); //报错
create(false); //报错
create(undefined); //并不会报错

类型断言

类型断言好比其他语言里的类型转换，但是不进行特殊的数据检查和解构

它在运行时的影响，只是在编译阶段起作用

两种写法：

• 尖括号语法

  let someValue: any = "this is a string";
  let strLength: number = (<string>someValue).length //断言是string类型的

• as语法

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

  在TS中使用JSX时，只有as语法断言被允许

总结

TS在JS的基础上(boolean、string、number、undefined、null、object、symbol、bigint)

新增了数组、元组、枚举、any、void、never、以及类型断言的功能