TypeScript--基础类型，初识接口

TS简介

定义

1. TypeScript，简称为TS，是JS的超集；Vue3.0就是使用TS开发出来的，并且推荐开发者使用TS进行开发；

2. TS是可以直接运行的（比如使用ts-node），最终编译为纯的JS运行在任意的平台之上，是开源的；

3. 始于JavaScript，归于JavaScript！

特征

类型系统

1.TypeScript是静态类型:
    类型系统按照「类型检查时机」来分类，可以分为动态类型和静态类型。
    动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。JS是一门解释型语言，没有编译阶段，所以JS是动态类型。

2.TypeScript 是弱类型:
    类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型,TS是完全兼容JS的，它不会修改JS运行时的特性，所以它们都是弱类型。

console.log(1 + '1');
// 打印出字符串 '11', ts和js都不会报错

 适用于任何规模

1.TypeScript 非常适用于大型项目——这是显而易见的，类型系统可以为大型项目带来更高的可维护性，以及更少的 bug。

2.在中小型项目中推行 TypeScript 的最大障碍就是认为使用 TypeScript 需要写额外的代码，降低开发效率。但事实上，由于有[类型推论]，大部分类型都不需要手动声明了。相反，TypeScript 增强了编辑器（IDE）的功能，包括代码补全、接口提示、跳转到定义、代码重构等，这在很大程度上提高了开发效率。而且 TypeScript 有近百个[编译选项]，如果你认为类型检查过于严格，那么可以通过修改编译选项来降低类型检查的标准。

3.TypeScript 还可以和 JavaScript 共存。这意味着如果你有一个使用 JavaScript 开发的旧项目，又想使用 TypeScript 的特性，那么你不需要急着把整个项目都迁移到 TypeScript，你可以使用 TypeScript 编写新文件，然后在后续更迭中逐步迁移旧文件。如果一些 JavaScript 文件的迁移成本太高，TypeScript 也提供了一个方案，可以让你在不修改 JavaScript 文件的前提下，编写一个[类型声明文件]，实现旧项目的渐进式迁移。

4.就算你从来没学习过 TypeScript，你也可能已经在不知不觉中使用到了 TypeScript——在 VSCode 编辑器中编写 JavaScript 时，代码补全和接口提示等功能就是通过 TypeScript Language Service 实现的

5.一些第三方库原生支持了 TypeScript，在使用时就能获得代码补全了，比如 Vue 3.0  React

与标准同步

1.TypeScript 的另一个重要的特性就是坚持与 ECMAScript 标准同步发展。

ECMAScript 是 JavaScript 核心语法的标准，自 2015 年起，每年都会发布一个新版本，包含一些新的语法。

一个新的语法从提案到变成正式标准，需要经历以下几个阶段：

Stage 0：展示阶段，仅仅是提出了讨论、想法，尚未正式提案。
Stage 1：征求意见阶段，提供抽象的 API 描述，讨论可行性，关键算法等。
Stage 2：草案阶段，使用正式的规范语言精确描述其语法和语义。
Stage 3：候选人阶段，语法的设计工作已完成，需要浏览器、Node.js 等环境支持，搜集用户的反馈。
Stage 4：定案阶段，已准备好将其添加到正式的 ECMAScript 标准中。
一个语法进入到 Stage 3 阶段后，TypeScript 就会实现它。一方面，让我们可以尽早的使用到最新的语法，帮助它进入到下一个阶段；另一方面，处于 Stage 3 阶段的语法已经比较稳定了，基本不会有语法的变更，这使得我们能够放心的使用它

2.TypeScript 的发展历史
2012-10：微软发布了 TypeScript 第一个版本（0.8），此前已经在微软内部开发了两年。
2014-04：TypeScript 发布了 1.0 版本。
2014-10：Angular 发布了 2.0 版本，它是一个基于 TypeScript 开发的前端框架。
2015-01：ts-loader 发布，webpack 可以编译 TypeScript 文件了。
2015-04：微软发布了 Visual Studio Code，它内置了对 TypeScript 语言的支持，它自身也是用 TypeScript 开发的。
2016-05：@types/react 发布，TypeScript 可以开发 React 应用了。
2016-05：@types/node 发布，TypeScript 可以开发 Node.js 应用了。
2016-09：TypeScript 发布了 2.0 版本。
2018-06：TypeScript 发布了 3.0 版本。
2019-02：TypeScript 宣布由官方团队来维护 typescript-eslint，以支持在 TypeScript 文件中运行 ESLint 检查。
2020-05：Deno 发布了 1.0 版本，它是一个 JavaScript 和 TypeScript 运行时。
2020-08：TypeScript 发布了 4.0 版本。
2020-09：Vue 发布了 3.0 版本，官方支持 TypeScript。

 

缺点

1.有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Class）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念；
2.短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TypeScript 能够减少其维护成本；
3.集成到构建流程需要一些工作量；ts-loader
4.可能和一些库结合的不是很完美；

基础类型

变量声明

1. 与js相同，使用var、let或const等

2. 声明变量指定类型(任意类型都可)，这样的变量赋值时只能使用指定类型的值，以达到强类型语言变量的特点及其优点

//string
var names:string = 'elaer'
//number
var age:number = 23;
//bollean
let flag:boolean = true;
flag = 23;//编译出错

基础类型

布尔值

最基本的数据类型，只有简单的true/false两个值，在JS和TS里叫做 Boolean

let isLogin: boolean = false;
// 编译通过
// 后面约定，未强调编译错误的代码片段，默认为编译通过

let isLogin2: boolean = new Boolean(1);
//编译报错
//使用构造函数 Boolean 创造的对象不是布尔值

数字

和JS一样，TS里的所有数字都是浮点数，类型是 number。 支持2、8、10、16等各种进制

let n1: number = 6;
let n2: number = 0xf00d;// ES6 中的十六进制表示法,会被编译为十进制数字
let n3: number = 0b1010;// ES6 中的二进制表示法,会被编译为十进制数字
let n4: number = 0o744;// ES6 中的八进制表示法,会被编译为十进制数字
let n5: number = NaN;
let n6: number = Infinity;

其同样不适合 进行科学计算

字符串

使用 string表示文本数据类型。 和JS一样，可以使用双引号（ "）、单引号（'）和反引号(`)表示字符串

let myName: string = 'Alice';
let myAge: number = 19;

// 模板字符串
let str: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;

数组

 TS像JS一样可以操作数组元素。 有两种方式可以定义数组。 第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组

let score:number[] = [1,20, parseInt('50')];
let fruit:Array<string|number> = ['apple', 'banana', 'pear', 20];
let arr1: number[] = [1, 1, 2, 3, 5];//正确
let arr2: number[] = [1, '1', 2, 3, 5];//错误  '1'不是number类型
let arr3: number[] = [1, 1, 2, 3, 5];
arr3.push('8');//错误 '8'不是number类型

let arr4: Array<number> = [1, 1, 2, 3, 5];//正确
let arr5: Array<string> = ["hello","h5"];//正确

元组Tuple

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

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象

//1.默认值
let tom: [string, number] = ['Tom', 25];
//2.通过下标赋值
let tom: [string, number] = ['', 0];
tom[0] = 'Tom';
tom[1] = 25;
//通过下标获取元组的元素并进行对应的操作
tom[0].slice(1);
tom[1].toFixed(2);
//3.越界操作
let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');
tom.push(true);//报错,当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型

//解构赋值
const lilei: [string, number] = ["Lilei", 23];
console.log(lilei);
const [myname, myage]: [string, number] = lilei;
console.log(myname, myage);

枚举

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

枚举类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射，也可以手动的指定成员的数值

//一周的每天
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days.Sun, Days.Mon, Days.Tue, Days.Sat);

console.log(Days["Sun"] === 0); // true
console.log(Days["Sat"] === 6); // true
//根据编号得到元素名
console.log(Days[0] === "Sun"); // true
console.log(Days[6] === "Sat"); // true

//商品的状态  可以手动设置初识值  或 每个都设置具体的值
enum orderStatus {Car=-1, Order, Payed, Deliver, Receive, Comment, Return};
console.log(orderStatus.Payed, orderStatus.Comment);

//可以在中间设值，其后未设值的枚举成员在已设值的枚举成员的基础上，值依次+1

Any

有时需要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量

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

 可以认为，声明一个变量为任意值之后，对它的任何操作，返回的内容类型都是任意值。

Void

void，无效的，表示没有任何类型。 当一个函数没有返回值时，其返回值类型是 void

function warnUser(): void {
    console.log("This is my warning message");
}

 声明一个void类型的变量没什么用，因为你只能为它赋予undefined和null

let unusable: void = undefined;

Null 和 Undefined

undefined和null两者各自有自己的类型undefined和null。 和 void相似，用处不大

一般用于函数

let a: undefined = undefined;
let b: null = null;
b=a  //undefined类型的数据不能赋值给null类型的变量
a = b;//null类型的数据不能赋值给undefined类型的变量
let c: number = 200;
a=c //数字字符串布尔值等等类型的数据不能赋值给undefined类型的变量
b = c;//数字字符串布尔值等等类型的数据不能赋值给null类型的变量
c = a;//undefined的数据不能赋值给数字字符串布尔值等等类型类型的变量
c = b;//null的数据不能赋值给数字字符串布尔值等等类型类型的变量

//不能将类型“void”分配给类型“undefined”
//不能将类型“void”分配给类型“null”

Never

never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型

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

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

 object

object表示非原始类型，也就是引用类型，是除number，string，boolean，symbol，null或undefined之外的类型，可以使用"对象", "数组对象"、string、number等为其赋值，null和undefined不行的。 之所以Object变量可以接收任何对象，是因为Object是所有类的父类。

let a:Object = [1, 2, 3]
console.log(a);
a = {id:1, name:'over'}
console.log(a); 
a = '{id:1, name:"over"}'
console.log(typeof a); 

类型别名与联合类型

多个类型的联合，它们之间是或的关系

type manyType = number | boolean | string;
let a: manyType
a = 0o700;
a = true;
a = 'over';

类型推论

 没有声明类型的变量被赋值一次后，变量的类型就确定了，之后再次被赋值时，不可改变赋值的类型

let r = 100;//确定了r的类型为number
r = "fds";//编译报错，因为r的类型为number

let a = [10, 203, 4];
a[3] = 100//推理为数组

let g = [10, "Hello"];
g[3] = 100//推理为联合类型的数组

类型断言

有些时候，我们需要做一些“自己比编译器更清楚的知道自己在做什么”，这个时候就用到断言，告诉编译器：没错，就是这样的，就是要这么干

类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误

语法: 值 as 类型 或者 <类型>值

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

 类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的

初识接口

TS的核心原则之一就是对值所具有的结构进行类型检查。TS里面接口的作用就是为这些类型命名 和 为你的代码 或 第三方代码定义契约。

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述

接口初探

我们传入的对象参数可能会包含很多属性，但编译器只会检查那些必需的属性是否存在，以及其类型是否匹配

interface person {
    age: number;
    name: string;
}
let p1: person = { age: 12,name:"mary" }

 

我们用接口来约束参数的类型结构（对象的形状）：

1. 只关注值的外形， 只要传入的对象满足提到的条件，那么它就是被允许的。
2. 对象是无序的：类型检查器不会去检查属性的顺序，只要相应的属性存在且类型是对的就可以

可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在

interface SquareConfig {
  color?: string;
  width?: number;
}

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号。好处：

1. 可以对可能存在的属性进行预定义；
2. 可以捕获引用了不存在的属性（往往是无意之中敲错的代码）时的错误

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:

注：TypeScript具有ReadonlyArray<T>类型，它与Array<T>相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改。

readonly vs const：做为变量使用的话用 const，若做为属性则使用readonly。

interface student{
    age: number;
    name: string;
    readonly idcard: number;
    sex: string;
}