【TypeScript系列 】第一节: 什么是TypeScript?

237 阅读5分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情

1. 引言

首先,TypeScript 是什么?它是一种由微软开发自由和开源的编程语言。本质是在JavaScript语言的基础上添加了可选的静态类型,在编译阶段检测语法错误,而非像JavaScript在运行阶段执行到相应代码块才检测,是基于类的面对对象编程。是一种超集严格类集合。

2. 含义

我们先回顾下TypeScript 的发展历史:

图片.png

3. 区别

既然我们在上文提到JavaScript,那么JavaScript和它又有什么区别呢?除了TypeScript是它的超集类呢
接下来我们对比下他们的区别:

  1. TypeScript: JavaScript 的超集用于解决大型项目的代码复杂性
    JavaScript: 一种脚本语言,用于创建动态网页。
  2. TypeScript: 可以在编译期间发现并纠正错误
    JavaScript: 作为一种解释型语言,只能在运行时发现错误。
  3. TypeScript: 强类型,支持静态和动态类型
    JavaScript: 弱类型,没有静态类型选项
  4. TypeScript: 最终被编译成 JavaScript 代码,使浏览器可以理解
    JavaScript: 可以直接在浏览器中使用
  5. TypeScript: 支持模块、泛型和接口
    JavaScript: 不支持模块,泛型或接口
  6. TypeScript: 支持 ES3,ES4,ES5 和 ES6 等
    JavaScript: 不支持编译其他 ES3,ES4,ES5 或 ES6 功能
  7. TypeScript: 社区的支持仍在增长,而且还不是很大
    JavaScript: 大量的社区支持以及大量文档和解决问题的支持

4. 内容

介绍完区别后,接下来我们来说说它的类型定义系统
首先我们介绍下它的基础类型 分别有哪些

  1. Boolean 类型:
let isBoolean: boolean = true;
  1. String 类型:
let isString: string = '果子';
  1. Number 类型:
let isNumber: number = 1;
  1. Array 类型:
let list: srting[] = ['果子','掘金'];
   let listNumber: number[] = [1, 2, 3];
   // 或者使用泛型语法:Array<number>, Array<string>
  1. Enum 类型:
enum Direction {
  NORTH,
  SOUTH,
  EAST,
  WEST,
}

let dir: Direction = Direction.NORTH;
// 默认情况下,枚举类型值在没有定义时,初始值为0,后续属性参数值以此类推;
// Direction.NORTH0Direction.SOUTH1Direction.EAST2Direction.WEST3;
// 枚举类型还存在 字符串枚举 异构枚举 
// 思考判断:如果设置了初始值 为6也就是Direction.NORTH6  后续成员值是多少呢?
  1. Any 类型: Any 类型是所有类型的顶层类型,对应参数类型设置为Any 类型的话就可以规避TypeScript的类型检测系统 无需事先执行任何形式的检查,所以该类型被称为‘万精油’。但是正因为使用了该类型导致可以很容易地编写类型正确但在运行时有问题的代码。如果我们使用 any 类型,就无法使用 TypeScript 提供的大量的保护机制。为了解决 any 带来的问题,TypeScript 3.0 引入了 unknown 类型。
let isAny: any = 666;
isAny = "果子";
isAny = true;
  1. Unknown 类型: 首先,Unknown是和Any类型一样的顶层类型,是TypeScript 类型系统中唯二的顶层类型,但是它和any的区别确是,它不像any 类型那样跳过类型检测
// 作为被赋值时,该类型认为都是正确的
let value: unknown;

value = true; // OK
value = 42; // OK
value = "Hello World"; // OK
value = []; // OK
value = {}; // OK
value = Math.random; // OK
value = null; // OK
value = undefined; // OK
value = new TypeError(); // OK
value = Symbol("type"); // OK

// 但是接下来,让我们看看当我们尝试对类型为 unknown 的值执行操作时会发生什么

let value: unknown;

value.foo.bar; // Error
value.trim(); // Error
value(); // Error
new value(); // Error
value[0][1]; // Error

// 所以unknown 类型只能被赋值给 any 类型和 unknown 类型本身。
  1. Tuple 【元组】类型: 元组是 TypeScript 中特有的类型,其工作方式类似于数组
let isTupleType: [string, boolean];
isTupleType = ["Semlinker", true];
  1. Void 类型: Void 类型像是与 any 类型相反,它表示没有任何类型。通常使用在一个函数没有返回值时,其返回值类型是 void:
// 声明函数返回值为void
function isVoidFun(): void {
  console.log("This is message");
}
  1. Null 和 Undefined 类型 undefined 和 null 两者有各自的类型分别为 undefined 和 null
let u: undefined = undefined;
let n: null = null;
  1. Never 类型 它表示的是永不存在的值的类型。 例如,never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。(返回never的函数必须存在无法达到的终点)
function error(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {}
}

5. 更多

TypeScript 还有很多语法如

  1. 类型断言:
    语法内容:① as 语法,②‘尖括号’语法(表达式:<类型>值)
    作用:告知类型检测系统在编译时告知该类型检测时为对应类型检测判断方式。
  2. 类型守卫:
    语法内容:①in 关键字,②typeof 关键字,③instanceof 关键字,④自定义类型保护的类型谓词 作用:可执行运行时检查的一种表达式,用于确保该类型在一定的范围内。
  3. 联合类型:
    语法内容:A | B
    作用:多种类型值的集合,属于集合里的并集
  4. 可辨识联合:
    作用:结合联合类型和字面量类型的一种类型保护方法。如果一个类型是多个类型的联合类型,且多个类型含有一个公共属性,那么就可以利用这个公共属性,来创建不同的类型保护区块。
  5. 类型别名:
    作用:类型别名用来给一个类型起个新名字。
  6. 交叉类型:
    作用:多个类型合并为一个类型,属于集合里的合并交集。
  7. 箭头函数:
    作用:函数快捷方式写法。
  8. 函数重载:
    作用:为同一个函数提供多个函数类型定义来进行函数重载,编译器会根据这个列表去处理函数的调用,使用相同名称和不同参数数量或类型创建多个方法的一种能力。
  9. extends:
    作用:继承/约束。
  10. 泛型
  11. infer 关键字
  12. 属性/方法装饰器