浅谈TypeScript

基本类型

typescript可以理解为就是加了类型标注的javascript。

这样就可以在写代码的时候帮助们进行代码的校验，主要是数据格式的校验，不过最终typescript的代码还是需要转成javascript，这样才能在浏览器中运行，转换暂时不用考虑，vue开发环境支持编译typescript，主要目的是让我们的代码更加的规范。

之前的代码大家可以在下面网址中进行测试，可以试试看到ts编译后的js是什么样的。

网址：https://www.typescriptlang.org/zh/play

类型标注

typescript中我们可以给变量标记类型，后续的代码中 ts会自动校验变量是否有错误的读/写操作 。

let is:boolean;
is =  true;
is =  123; // 报错, 提示number类型不能赋值给boolean类型的变量

语法很简单，就是在变量后面加上":"和 类型，这个动作叫 类型标注

类型自动推断

如果变量的值是一个字面量，ts可以自动推断出类型

let is = false;
is = true;
is =  123; // 报错, 提示number类型不能赋值给boolean类型的变量

let o = {a:1,b:'2'}
o.a ='33' // 报错, 不能把string分配给number

字面量

字面量就是数据的表现形式，我们看到就知道这个数据的内容，比如上面"="右侧的数据。

本身概念很简单，单独提出只是怕有人第一次听到这个词的会有疑惑。

其他情况

还有几种情况ts会自动推断变量类型，下面我们再展开讲。

基础数据类型

接下来我们看看都有哪些数据类型。

boolean

布尔类型

let is:boolean;
is =  true;
is =  123; // 报错, 提示is是数字不能赋值给boolean类型的变量

number

数字类型，不仅仅支持10进制.

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
decLiteral = '123'; // 报错

string

字符串类型

let s1:string = 'hello world!'; 
let s2:string = `hello ${name}`;
s1 = 123 // 报错

数组

数组类型有2种表示方式

"类型+[]"

let numbers:number[] = [1,2,3,4,5];

// number|string代表联合类型, 下面的高级类型中会讲
let numbers:(number|string)[] = [1,2,3,4,'5'];

Array<类型>

let numbers:Array<number> = [1,2,3,4,5];

元组(Tuple)

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

let list1:[number, string] = [1, '2', 3]; // 错误, 数量不对, 元组中只声明有2个元素
let list2:[number, string] = [1, 2]; // 错误, 第二个元素类型不对, 应该是字符串'2'
let list3:[number, string] = ['1', 2]; // 错误, 2个元素的类型颠倒了
let list4:[number, string] = [1, '2']; // 正确

枚举(enum)

枚举是ts中有而js中没有的类型，编译后会被转化成对象，默认元素的值从0开始，如下面的Color.Red的值为0，以此类推Color.Green为1，Color.Blue为2：

enum Color {Red, Green, Blue}
// 等价
enum Color {Red=0, Green=1, Blue=2}

我们还可以反向通过值得到键：

enum Color {Red=1, Green=2, Blue=4}
Color[2] === 'Green' // true

看下编译成js后的枚举代码，你就明白为什么可以反向得到键值：

var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
// Color的值为: {0: "Red", 1: "Green", 2: "Blue", Red: 0, Green: 1, Blue: 2}

any(任意类型)

any代表任意类型，也就是说，如果你不清楚变量是什么类型，就可以用any进行标记，比如引入一些比较老的js库，没有声明类型，使用的时候就可以标记为any类型，这样ts就不会提示错误了，当然不能所有的地方都用any，那样ts就没有使用的意义了。

void

void 的意义和 any 相反，表示不是任何类型，一般出现在函数中，用来标记函数没有返回值：

function abc(n:number):void{
    console.log(n);
}

void类型对应2个值，一个是undefined，一个null：

const n1:void = undefined;
const n2:void = null;

null 和 undefined

默认情况下null和undefined是所有类型的子类型，比如：

const n1:null = 123;
const n2:undefined = '123';

never

never 表示不可达，用在throw的情况下：

function error():never{
    throw '错了!';
}

unknown

unknown表示未知类型，他和any一样的地方是标记后的变量可以随意赋值，但是在访问变量上的属性的时候要先断言变量的类型才可以操作。

let a:unknown;
a = '汉字';

(a as string).length

// 等价写法
(<string>a).length

2种语法效果一样， 个人建议大家使用第一种， 书写更容易。

symbol

let s:symbol;
s = Symbol('a');
s = 1 //报错