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 + ".";  //字符串拼接
复制代码

数组

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

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

二、使用数组泛型，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; // 用“|”表示这个变量能够为数字也能够为字符串
复制代码

参考

github.com/zhongsp/Typ…

最后

文中有些地方可能会加入一些本身的理解，如有不许确或错误的地方，欢迎指出~