Vue3都用ts重构了，TypeScript咱也不能掉队(第一篇)

TypeScript 从安装到使用

• 安装 typescript

npm install -g typescript

• 创建文件 typescript.ts

function sayHello(name) {
  return 'hello' + name
}
console.log(sayHello('Bob'))

• 编译成js

tsc typescript.ts

TypeScript 转换为 JavaScript 过程如上图：,这样就算是敲开了TypeScript的大门了，不过要是想弄清楚这门语言还是得看看他给我们提供了些什么内容

TypeScript 基础类型

布尔值Boolean、数字Number、字符串String、数组Array、元组Tuple【元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同】、枚举Enum、任意类型Any、没有任何类型Void、Null 和 Undefined、永不存在的值的类型Never、独一无二Symbol

布尔值 boolean

还是我们熟悉的true/false~，只不过写法有不同于js,增加了boolean声明

let isEat: boolean = false;

数字 number

和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

let num: number = 1;
let hexNum: number = 0xf00d;
let binaryNum: number = 0b1010; // ES6 中的二进制表示法
let octalNum: number = 0o744; // ES6 中的八进制表示法
let notANumber: number = NaN;// NaN是JavaScript之中唯一不等于自身的值
let infinityNumber: number = Infinity;// Infinity/-Infinity 正负无穷

字符串 string

涵盖js中的所有功能，唯一不同的是声明

let str: string = "Start";

数组 array

两种方式可以定义数组

//1.元素类型后面接上 []
let nums1: number[] = [1, 2, 3];

//数组泛型，Array<元素类型>
let nums2: Array<number> = [1, 2, 3];

let nums3: (number | string)[] = [1, "2", 2];

元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。

// 声明一个元组类型
let x: [string, number];
// 初始化
x = ['hello', 10]; // OK
// 初始化错误
x = [10, 'hello']; // Error

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

console.log(x[0].substr(1)); // h
console.log(x[1].substr(1)); // 报错, 'number' 类型没有 'substr'方法

当访问一个越界的元素，会使用联合类型替代，联合类型是高级主题，后面再具体讨论

x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型

console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString

x[6] = true; // Error, 布尔不是(string | number)类型

// 打印添加的元素时会报错
console.log(x[2]); // error【元组是已知的数组】

枚举 Enum

枚举类型用于定义数值集合。使用枚举类型可以为一组数值赋予友好的名字。

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

//混合枚举
enum Enum {
  A,
  B,
  C = "i am C",
  D = "i am D",
}

enum Char {
    // 常量成员：在编译阶段被计算出结果
    a,         // 没有初始值
    b = Char.a,// 对常量成员的引用
    c = 1 + 1, // 常量表达式
    // computed member 计算成员：表达式保留到程序的执行阶段
    d = Math.random(),// 非常量表达式
    e = '123'.length,
    // 紧跟在计算成员后面的枚举成员必须有初始值
    f = 6,
}

任意类型 Any

任何类型都可以被归为 any 类型, Any(任意值)是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型，它常用于以下三种情况。

1. 变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查，示例代码如下：

let x: any = 1;    // 数字类型
x = 'I am String';    // 字符串类型
x = false;    // 布尔类型

1. 改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查，示例代码如下：

let x: any = 4;
x.sayHello();    // 正确，sayHello方法在运行时可能存在，但这里并不会检查
x.toFixed();    // 正确

1. 定义存储各种类型数据的数组时，示例代码如下：

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

无类型 Void

用于标识方法返回值的类型，表示该方法没有返回值。

function sayhello(): void {
    alert("Hello World");
}

对象缺失 null

表示对象值缺失。

未定义 undefined

用于初始化变量为一个未定义的值。

1. null 在 JavaScript 中 null 表示 "什么都没有"。 null是一个只有一个值的特殊类型。表示一个空对象引用。 用 typeof 检测 null 返回是 object。

2 .undefined 在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined。而在TypeScript中启用严格的空校验（--strictNullChecks）特性，就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型，示例代码如下：

// 启用 --strictNullChecks
let x: number;
x = 1; // 运行正确
x = undefined;    // 运行错误
x = null;    // 运行错误

这里顺便拓展下：面试中经常会问到Null 和 Undefined的区别，通俗点就是Null代表没有值，而Undefined表示此处有值但未定义，主要是语义上区别

永不存在的值 Never

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。比如说，函数里触发了throwError，或者switch没有捕捉到值且不存在default，这些都导致无法走到最后也无法返回。调用这个函数的时候就可以通过测试never来知道这个函数出错了，而不是void。void表示正确执行完毕，返回空。 这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环）

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

独一无二的值 symbol

从ES6开始，symbol成为了一种新的原生类型，就像number和string一样可以作为对象的属性

//symbol通过Symbol函数构造，但不需要new，不可传入对象不然报错
let sym1 = Symbol();
let sym2 = Symbol("key"); // 可选的字符串key
let sym3 = Symbol("key");
sym2 === sym3;  //false

TypeScript 联合类型

联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

注意：只能赋值指定的类型，如果赋值其它类型就会报错。

语法格式：

Type1|Type2|Type3 

声明一个实例：

let name:string|number 
name = 12 
console.log("代号为： " + name) // 代号为：12
name = "店小二" 
console.log("名字为： " + name) // 名字为：店小二

// 如果赋值奇特类型则会报错
name = true // Error

联合类型数组：

let arr:number[]|string[]
arr = [1,2,4] //数字数组
arr = ["赵","钱","孙","李"] //字符串数组

TypeScript 接口(重点)

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

1. 定义接口

/**
interface 名字 {

}
*/
// 定义
interface Person {
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
}
//使用
let customer:Person = {
    firstName:'店',
    lastName: '小二',
    sayHello: ():string => 'hello'
}

1. 联合类型和接口

interface Person {
    firstName:string,
    lastName:string,
    hobby: string[]|string,
    sayHello: ()=>string
}
//使用
let customer:Person = {
    firstName:'店',
    lastName: '小二',
    hobby: '打王二小', //['跑步','打球']
    sayHello: function ():string {return 'hello'+ this.hobby.toString()}
}

1. 接口和数组

interface listName { 
   [index:number]:string 
}

let myArr:listName = ["JorDon",true,"Bob"] //Error: true is not string

interface ages { 
   [index:string]:number 
} 
let agelist:ages;
agelist["JorDon"] = 15   // 正确 
agelist[2] = "15"   // 错误 2 not is string && "15" not is number

1. 接口继承

接口继承就是说接口可以通过其他接口来扩展自己 Typescript 允许接口继承多个接口 继承使用关键字 extends。

//单接口继承语法格式：
    interface_name_child extends interface_name_father
// 多接口继承语法格式继承,各个接口使用逗号 , 分隔。：
    interface_name_child extends interface_name_father1, interface_name_father2,…,interface_name_fatherN

• 单继承实例

interface Father { 
   name: string 
}
interface Son extends Father {
   age: number
}

let Bob = <Son>{};
Bob.age = 27
Bob.name = 'Bob'
console.log("名字："+ Bob.name)
console.log("年龄："+ Bob.age)

• 多继承实例

interface Father {
    firstName: string,
}
interface Mather {
    lastName: string,
}
interface Son extends Father,Mather{
    age: number
}
let Bob:Son = {
    firstName:'Bob',
    lastName:'Nasa',
    age:18
}
console.log(Iobj)