TypeScript真香系列-基本类型和变量声明

前言

TypeScript真香系列的内容将大量参考中文文档，但是文中的例子基本不会和文档中的例子重复。另外，文中一些例子的结果都是在代码没有错误后编译为JavaScript得到的。如果想实际看看TypeScript编译为JavaScript的代码，可以访问TypeScript的在线编译地址，动手操作，印象更加深刻。

基本类型

布尔值

TypeScript和JavaScript一样，这是最简单的数据类型为boolean，也就是true和false。

let isDone: boolean = false;

数字

TypeScript和JavaScript一样，TypeScript里的所有数字都是浮点数，类型为number。和ES6中一样，TypeScript支持十进制，十六进制，二进制和八进制字面量。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

字符串

我们可以用string来表示字符串，我们可以用下面几种方式来表示。

let name: string = "bob"; //双引号
let friend: string = 'LeBron'; //单引号

let boy: string = `Hello, my name is ${name}, my friend is ${friend}.`;  //模板字符串
let man: string = "Hello, my name is" + name + " , my friend is" + friend + ".";  //字符串拼接

数组

有两种方式可以定义数组。
1、可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

let list: number[] = [1, 2, 3];
let listStr: string[] = ["奥", "利", "给"];

2、使用数组泛型，Array<元素类型>：

let list: Array<number> = [1, 2, 3];
let listStr: Array<string> = ["奥", "利", "给"];

元组 Tuple

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

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


//访问已知索引的元素，会得到正确的类型
console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error, 'number' does not have 'substr'

//访问一个越界的元素，会使用联合类型替代
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型

这里要注意一点：自从 TyeScript 3.1 版本之后，访问越界元素会报错，我们不应该再使用该特性。

枚举

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

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

在默认的情况下，是从0开始为元素编号的，当然我们也可以手动指定成员的数值。

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

Any

到了我们的“anyscript”（调侃）了，如果不指定类型的话，就是默认是any。

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

虽说anyscript是一个调侃，但是any类型还是十分有用的，我们可以在编译的时候选择性的包含或移除类型检查。有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。

//数组中元素的数据类型不一样的情况
let list: any[] = [1, true, "free"]; //ok

//如果数据类型定死的话，就会出错
let list: number[] = [1, true, "free"]; // error

Void

在一定程度上。void和any是相反面，表示为没有任何类型。当一个函数没有返回值时：

function warnUser(): void {
    console.log("奥利给");
}

我们只能为变量申明：undefined和null。

let unusable: void = undefined;

但是有时候可能会出现这种情况：

let unusable: void = null; //Type 'null' is not assignable to type 'void'.

这是因为在tsconfig.json中把strict为true导致的。

Null 和 Undefined

默认情况下null和undefined是所有类型的子类型，也就意味着可以赋值给其他类型。

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

然而，当我们指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自。

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

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

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。也就是主观地认为这个变量的类型是什么。它没有运行时的影响，只是在编译阶段起作用。语法如下：

// <类型>值
let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;


// 值 as 类型
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

当我们在TypeScript里使用JSX时，只有 as语法断言是被允许的。

//需要在还不确定类型的时候就访问其中一个类型的属性或方法
function getLength(something: string | number): number {
    if (something.length) {
        return something.length;
    } else {
        return something.toString().length;
    }
}          //报错

//使用类型断
function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

变量声明

定义方法

TypeScript和JavaScript声明变量的方式是一样的：var、let、const。只要对JavaScript有所了解，那么用在TypeScript上问题就不大。

var a:number = 10;
let b:boolean = true;
const C:string = "10";

TypeScript中的一些相对JavaScript的特殊写法：

let d:number|string = 10; // 用“|”表示这个变量可以为数字也可以为字符串

参考

https://github.com/zhongsp/Ty...

最后

文中有些地方可能会加入一些自己的理解，若有不准确或错误的地方，欢迎指出~