TypeScript基础

TypeScript 详解

一、TS的基础概念

1. 什么是TS

1.1 对比原理

• 他是JS的一个超集，在原有的语法基础上，添加强类型并切换为基于类的面向对象语言

面向项目：

TS - 面向解决大型的复杂项目、架构、代码维护复杂场景

JS - 脚本化语言，用于面向简单页面场景

自主检测：

TS - 编译时，主动发现并纠正错误

JS - 运行时，执行报错

类型检测

TS - 强类型语言，支持动态和静态的类型检测

JS - 弱类型语言，无静态类型选项

运行流程sdf

TS - 依赖编译，依靠编译打包实现在浏览器端的运行

JS - 可直接在浏览器端运行

复杂特性

TS - 模块化、接口、泛型

1.2 安装运行

    //全局安装typescript
	npm install -g typescript
    //查看版本
    tsc -v
	//对ts文件进行编译
    tsc xxx.ts

    // 面试点：所有类型的检测和纠错 - 编译时 => 工程化

2. TS基础类型和语法

1. boolean、string、number、array、null、undefined

js与ts对比

javaScript	typeScript
let isEnable = false	let isEnable: boolean = false
let className = ‘zhaowa’;	let className: string = ‘zhaowa’;
let classNum = 2;	let classNum: number = 2;
let u = undefined;	let u: undefined = undefined;
let n = null;	let n: null = null;
let classArr = [‘basic’, ‘execute’];	统一方式 let classArr: string[] = [‘basic’, ‘execute’];
let classArr = [‘basic’, ‘execute’];	<>方式 let classArr: Array = [‘basic’, ‘execute’];

2.tuple

• 元祖:固定长度的数组
• 在声明元组的时候一定要指定类型，如果没有指定类型，其实本质上是一个联合类型数组。

let tupleType: [string, boolean] = ['basic', false];

3. enum

• 枚举:适合结果在多个值之间进行选择

• 数字型枚举，默认从0开始，根据上一值依次递增

  enum Score {
       
      BAD,  // 0
      NG,   // 1
      GOOD,  // 2
      PERFECT, // 3
  }
  let score: Score = Score.BAD; //0
  

• 字符串类型枚举

  enum Score {
       
      BAD = 'BAD',
      NG = 'NG',
      GOOD = 'GOOD',
      PERFECT = 'PERFECT',
  }
  // 反向映射
  enum Score {
       
      BAD,  // 0
      NG,   // 1
      GOOD,  // 2
      PERFECT, // 3
  }
  
  let scoreName = Score[0]; // BAD
  let scoreVale = Score["BAD"]; // 0
  

• 异构

  enum Enum {
       
      A,        // 0
      B,        // 1
      C = 'C',
      D = 'D',
      E = 8,
      F,        // 9
  }
  

• 面试题：异构类型每一项的枚举值 => js本质实现（手写一个异构枚举的实现）

  let Enum;
  (function (Enum) {
       
      // 正向
      Enum["A"] = 0;
      Enum["B"] = 1;
      Enum["C"] = "C";
      Enum["D"] = "D";
      Enum["E"] = 8;
      Enum["F"] = 9;
  
      // 逆向
      Enum[0] = "A";
      Enum[1] = "B";
      Enum[8] = "E";
      Enum[9] = "F";
  })(Enum || (Enum = {
       }))
  

4.any、unknown、void、never

• any - 绕过所有类型检查 => 类型检测和编译筛查取消

  在任意值上访问任何属性和方法都是允许的。

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

  变量在声明的时候，未指定其类型，那么他会被识别为任意值类型

  let anyValue: any = 123;
  
  anyValue = "anyValue";
  anyValue = false;
  let value1: boolean = anyValue;
  

• unknown - 绕过赋值检查 => 禁止更改传递

  类型安全的any

  let unknownValue: unknown;
  
  unknownValue = true;
  unknownValue =