TypeScript入门 | 青训营笔记

记得带伞_
28 阅读5分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

R-C.jfif

课程笔记

TypeScript的发展与基本语法

什么是TypeScript呢？

TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。 并在此之上对 JavaScript 添加了一些扩展，如 class / interface / module 等。

TypeScript的发展历史

  • 2012-10：微软发布了TypeScript第一个版本（0.8）
  • 2014-10：Angular发布了基于TypeScript的2.0版本
  • 2015-04：微软发布了Visual Studio Code
  • 2016-05：@types/react发布，TypeScript可开发React
  • 2020-09：Vue发布了3.0版本，官方支持TypeScript
  • 2021-11：v4.5发布

TypeScript的特性

TypeScript与JavaScript相比较，JavaScript是动态类型语言，而TypeScript是静态类型语言。它们都是弱类型语言。

  • 动态类型

    编译时不知道每一个变量的类型，因此，若存在类型错误会在运行时发生错误。

  • 静态类型

    编译时即知道每一个变量的类型，因此，若存在类型错误编译是无法通过的。

  • 强类型

    强制数据类型定义的语言。也就是说，一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型了。举个例子：如果你定义了一个整型变量a,那么程序根本不可能将a当作字符串类型处理。强类型定义语言是类型安全的语言。

  • 弱类型

    数据类型可以被忽略的语言。它与强类型定义语言相反, 一个变量可以赋不同数据类型的值。

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。 TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

TypeScript基本语法

数据类型

TypeScript包含的数据类型有：

  • any：任意类型；声明为 any 的变量可以赋予任意类型的值。
  • number：数字类型；双精度 64 位浮点值。它可以用来表示整数和分数。
  • string：字符串类型；一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。
  • boolean：布尔类型；表示逻辑值：true 和 false。
  • enum：枚举类型；用于定义数值集合。
  • void：用于标识方法返回值的类型，表示该方法没有返回值。
  • null：表示对象值缺失。
  • undefined：用于初始化变量为一个未定义的值
  • never：never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

变量声明

var [变量名] : [类型] = 值;

Snipaste_2023-02-05_14-53-28.png

图中左边为JavaScript声明变量的格式举例，右边为TypeScript声明变量的格式举例。

TypeScript对象

对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等。

Snipaste_2023-02-05_14-54-39.png

其中jobId前有个readonly关键字表示该属性为只读属性不可修改。

函数类型

函数就是包裹在花括号中的代码块，前面使用了关键词 function。

Snipaste_2023-02-05_14-59-05.png

图中，左上的add为一般的TypeScript函数，对于左下的add函数，其返回值类型为number，x和y分别为函数的参数，它们的数据类型都为number。

函数重载

重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。

Snipaste_2023-02-05_15-03-28.png

数组类型

数组是非常常用的对象。TypeScript数组实例如下。

Snipaste_2023-02-05_15-16-02.png

TypeScript补充类型

Snipaste_2023-02-05_15-16-21.png

TypeScript泛型

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。 在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

Snipaste_2023-02-05_15-16-32.png

Snipaste_2023-02-05_15-16-32.png

类型别名&类型断言

Snipaste_2023-02-05_15-17-44.png

字符串/数字 字面量

Snipaste_2023-02-05_15-17-44.png

TypeScript高级类型

联合&交叉类型

联合类型表示一个值可以是几种类型之一。

交叉类型：多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

Snipaste_2023-02-05_22-27-26.png

类型保护与类型守卫

类型保护：访问联合类型时，处于程序安全，仅能访问联合类型的交集部分。

类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域。

Snipaste_2023-02-05_22-27-41.png

Snipaste_2023-02-05_22-28-08.png

Snipaste_2023-02-05_22-28-08.png

函数返回值类型

Snipaste_2023-02-05_22-29-54.png

TypeScript工程应用

TypeScript在工程上主要应用于浏览器Web和NodeJs。

浏览器Web上的TypeScript

webpack

  • 配置webapack loader相关配置
  • 运行webpack启动/打包
  • 配置tsconfg.js文件
  • loader处理ts文件时，会进行编译与类型检查

相关loader

  • awesome-typescript-loader
  • babel-loader

应用于NodeJs

可以通过使用TSC编译ts来得到js以便应用于Node。

image.png

大致步骤

  • 安装Node和npm
  • 配置tsconfig.js文件
  • 使用npm安装TSC
  • 使用TSC运行编译得到js文件

总结

通过本次课程大致对TypeScript语言有了一定的了解，刚入门TypeScript还有很多不明白和不理解的地方，还需要后边多加学习才行。

avatar
文章
阅读
粉丝