本节内容预览

这篇文章，主要会接受下面几个的主要知识点：

  1. TS 类型定义的基础用法；
  2. 类型断言；
  3. JS已有类型的定义；
  4. TS自己的新基本类型；
  5. 字面变量和元组；

基础中的基础，了解这些，才能真正开始用TypeScript。

TypeScript的基础用法

我们先来看下 TypeScript(下文简称TS) 中的基础赋值语句：

  1. // TS 赋值语句
  2. let hello: string = 'Hello World!';

对比 JS 的赋值语句:

// JS 赋值语句
let hello = 'Hello World!';

我们可以注意到多了一个 : string ，这个就是最基础的一个变量类型声明。这个例子里，就把 my 的类型声明为了 字符串， 和后面的实际值是相符合的。**

类型断言

什么是类型断言？

类型断言就是提出来这么早，和基础用法放一起，因为其实它就是对 变量使用时 断定类型的方法
先来个报错的例子～

// 联合类型，可以看第二小节，这里表示 my 变量可能是 字符串或者数组
let my: string|number;
if (my.length) {} // 报错：类型“string | number”上不存在属性“length”。

报错是预期内的，我们都知道 number 上没有 length 属性

再来个不报错的例子：

let my: string|number;
if ((<string>my).length) {} // 不报错了

注意到差别了么， <string>my 就是这个多出来的尖括号内容了，通过它告诉 TS，这里 my 这个变量是一个string，自然不报错了，大家也能想到， 这个断言将会很有用。

断言的写法

断言有2种写法：

  1. <string>my
  2. my as string

使用时往往需要 用 () 包括，已正确标记使用的内容。

但是有没人好奇为什么有2种写法，作用确完全一样？
铛铛铛， 答案就是 JSX , as 的写法就是为了更好的使用在 JSX 中。

TS 对 JS 已有类型的定义

  1. string 字符串
  2. number 数字
  3. x[] 和 Array<x> 数组
  4. object 对象
  5. null
  6. undefined
  7. symbol

这几个类型相对比较好理解，都是对JS中已有类型的定义，只要熟悉JS的同年，基本都能直接理解其中的意义了。

TS 新提出的基本类型

TS在上面几种类型定义意外以为，根据实际需求，还提出了以下几种新的类型：

  1. any
  2. void
  3. never
  4. enum

    Any

    就是可能是任意值，看上去很有用、很万能，完美的避免各种TS报错。
    但是 完美的避免各种TS报错** **<- 这是错误的思考方式， Any 应该尽可能少的使用，或者只用于临时， 尽可能的让TS校验类型，提早发现问题才是使用它的意义。
    **

    Void

    它表示没有任何类型。这个解释可不好理解。
    但是我们可以看下面的例子，了解下它最常见的出现场景
    function helloWorld(): void {
 console.log('Hello World!')
}
    函数 helloWorld 的返回值是 void , 确实它没有返回值， 根本没有 return。往往用于提示函数调用者， 不需要获取函数返回 ，因为根本不会有。

最常见的例子应该是， setter 了，我们来看下

let o = {};
Object.defineProperty(o, 'a', {
  set: function (newValue: string): void {
    // ... 
  }
});

o.a = 'xxx';// 这个绝对不会有返回值，不是吗

void 和 undefined 的小注意事项

有同学会提问：“那 void 和 undefined 有什么区别吗？”
记住下面几点吧

  1. undefined 既是类型也是值，void 只是类型;
  2. 类型为 void 的变量，其值可以为 null 或者 undefined;
  3. 返回值类型为 undefined 的函数，必须得出现 return;

Never

这个 Never 你很可能 99% 的情况下都用不到它。
它用来表示那些永不存在的值的类型，怎么理解呢？来看个例子：

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

看这个官网上的例子，就能明白，这个函数直接报错了，所以 不会进入到返回的流程，更不用提返回值了。同学们估计也就理解了为什么会说有 99% 的情况下不用用到了～

Enum 枚举

为什么最后提枚举.. 因为它太特殊了，但作者还想想简化成一个等式来理解

enum Color {Red = 1, Green = 2, Blue = 4};

约等于 ≈≈≈

const Color: { Red: 1, Green: 2, Blue: 4 } = { Red: 1, Green: 2, Blue: 4}

虽然 enum 拥有更能多能力，比如自增，但是这样不就一下能理解了么～

字面量类型及元组 Tuple

字面量和元组怎么就放到一起了呢？
来看一下几个例子

// 字符串 和 字符串字面量
let color: string = 'red';
let red: 'red' = 'red';

// 数字 和 数字字面量
let count: number = 10;
let one: 1 = 1;

// 数组 和 元组
let arr:string[] =  ['a','b'];
let arr2: [string, number] = ['a', 1];

// 对象
let square:object = { width: 10, color: 'red' };
let square:{ width: number, color: string } = { width: 10, color: 'red' };

这几个是不是很接近？
都不需要太多说明了呢，

  1. 字符串字面量是 指定内容 的字符串类型；
  2. 数字字面量是 指定内容 的数字类型；
  3. 元组就是 指定内容 的数组类型了，指定了第一个元素是什么，第二个元素是什么… 以此类推；
  4. 对象也是可以 指定内容 的，但是官网默认我们都会；

本文总结

本篇文章内容虽然很多，但是基本都是一些最常用的知识点，也是开始写TS前必须掌握的内容，必须得了解清楚哦，要不然写起来肯定会磕磕碰碰的。