奥奥の探索日记
ShaoAo
ShaoAo
文章18
标签19
分类6
首页
归档
常看
关于

文章分类

学习笔记：TypeScript

学习笔记：TypeScript

2023年09月14日 前端

了解TypeScript

  • TypeScript是由微软开发的一门开源的编程语言。
  • TypeScript简称TS，以JavaScript为基础构建的语言，JS有的TS都有。
  • Typescript = Type + JavaScript（在JS基础之上，为JS添加了类型支持）。
  • 可以在任何支持JavaScript的平台中执行。

优点

JavaScript是弱类型的编程语言，很多的错误只有在运行的时候才会被发现，而TS在代码编译的时候（代码执行前）就可以发现错误。

  • 支持最新的ECMAScript语法。
  • 在代码编译阶段就能发现错误。
  • 在JS基础上增加了类型支持。

TS和JS的区别

TypeScript JavaScript
编译期发现错误 运行时发现错误
强类型语言,支持静态和动态类型 弱类型语言，没有静态类型选项
支持模块、泛型和接口 不支持模块、泛型和接口
代码运行时会被编译成JavaScript代码，浏览器才能识别 可以直接在浏览器使用

建立TypeScript环境

1. 安装编译TS的工具包

1
npm i -g typescript

2. 验证TS是否安装成功

1
tsc -v

3. TypeScript初体验

  1. 创建一个TS文件，hello.ts（注意：TS文件的后缀名为 .ts），并输入以下的内容
1
2
3
4
5
6
function greet(name: string): string { 
	return `hello, ${name}` 
} 

let user = "Echo" 
console.log(greet("Echo"))
  1. 将TS文件编译为JS文件，在终端中输入命令：tsc hello.ts， （此时，在同级目录中会出现一个同名的JS文件）
1
2
3
4
5
6
7
"use strict"; 
function greet(name) {     
	return "Hello, ".concat(name); 
} 

var user = "Echo"; 
console.log(greet(user));
  1. 执行JS代码：在终端中输入命令，node hello.js，终端会输出 hello, Echo。
1
"hello, Echo"

4. 简化运行TS的步骤

每次修改代码后，都要重复执行两个命令，才能运行TS代码，我们可以直接使用ts-node工具包，直接在node.js中执行TS代码。

安装命令：**npm i -g ts-node**

使用方式：**ts-node hello.ts**

5. 运行TS文件的另一种方法

在VSCode中安装Code Runner扩展插件，在需要运行的ts文件中按鼠标右键，选择Run Code(快捷键：Ctrl+Alt+N)。

或者在VSCode窗口右上角单击小三角即可运行。
Snipaste_2023-09-14_19-41-00.png

TypeScript类型注解

1. 类型注解作用

TS类型注解的作用是为变量、函数、类等添加类型信息，用于在静态类型检查阶段检查代码的类型正确性。

2. 类型注解用途

  1. 提供类型提示：类型注解使得开发人员可以清晰地知道变量的类型，编辑器能够根据类型注解给出相应的代码提示，提高代码的可读性和可维护性。

  2. 静态类型检查：通过给变量添加类型注解，在编译阶段可以对代码进行静态类型检查。它会检查变量的类型是否符合预期的类型，并发现潜在的类型错误。

  3. 函数参数类型检查：类型注解可以帮助开发人员在编写函数时明确参数的类型，并在调用函数时进行参数类型检查。这样可以避免因参数类型不匹配引发的潜在错误。

  4. 对象属性类型约束：通过类型注解，可以约束对象的属性类型，确保对象的属性符合特定的类型要求。

Snipaste_2023-09-14_19-48-15.png

例如，上述代码中的 : number 就是类型注解。 约定变量num的类型为number（数值类型）。

3. 类型注解注意事项

  1. 约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错。

例如，我们将变量num的值123，重新赋值为字符串的“456”，此时编辑器会给出错误提示：不能将类型“string”分配给类型“number”，这些很好理解。

  1. 类型注解只在编译阶段起作用，并不会影响运行时的行为。 在编译后的 JavaScript 代码中，类型注解会被编译器忽略。

例如,编译前的TS代码:

1
let num: number = 123;

编译后的JS代码:

1
let num = 123;

TypeScript类型

1. TS中常用的基础类型

我们可以将TS中常用的基础类型分为两类：

  1. JS已有的类型
  2. TS新增的类型

JS已有的类型，我们又可以分为两类：

  1. 原始数据类型：number、string、boolean、null、undefined、symbol（ES6中的新类型）、bigint（ES10中的新类型）。

  2. 对象类型：object（包括数组、对象、函数等对象）。

TS新增的类型：any、void、自定义类型（类型别名）、联合类型、接口、元组、字面量类型、枚举等。

1.1.数值（number）

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

在TS中，使用 number 来定义数值类型：

1
2
3
4
5
6
7
8
9
10
// 十进制 
let decLiteral: number = 6 
// 十六进制 
let hexLiteral: number = 0xf00d 
// 二进制 
let binaryLiteral: number = 0b1010 
// 八进制 
let octalLiteral: number = 0o744 
let notANumber: number = NaN 
let infinityNumber: number = Infinity

编译结果：

1
2
3
4
5
6
7
8
9
10
// 十进制 
var decLiteral = 6; 
// 十六进制 
var hexLiteral = 0xf00d; 
// 二进制 
var binaryLiteral = 10; 
// 八进制 
var octalLiteral = 484; 
var notANumber = NaN; 
var infinityNumber = Infinity;

1.2.布尔值（boolean）

在TS中，使用 boolean 来定义布尔值类型：

1
let flag: boolean = false;

编译结果：

1
var flag = false;

1.3.字符串（string）

在TS中，使用 string 来定义字符串类型：

在TS中，字符串的表现形式主要有以下三种方式：

  1. 使用单引号（ ‘ ）
  2. 使用双引号（ “ ）
  3. 使用模板字符串，它可以定义多行文本和内嵌表达式。这种字符串是被反引号包围（ ` ），并且以 ${ expr } 这种形式嵌入表达式
1
2
3
4
5
6
7
8
let myName: string = "Echo"
let age: number = 25

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

// 上面定义的sentence的语句与下面定义的sentence1语句的效果相同
let sentence1: string = "Hello, my name is " + myName + ". I'll be " + ( age + 1) +" years old next month."

编译结果：

1
2
3
4
5
6
7
8
var myName = "Echo";
var age = 25;

// 模板字符串
var sentence = "Hello, my name is ".concat(myName, ". I'll be ").concat(age + 1, " years old next month.");

// 上面定义的sentence的语句与下面定义的sentence1语句的效果相同
var sentence1 = "Hello, my name is " + myName + ". I'll be " + (age + 1) + " years old next month.";

1.4.null 和 undefined

null 和 undefined 是所有类型的子类型，默认情况下，可以把null 和 undefined赋值给其他类型。

注意：如果你将 tsconfig.json 文件中的 strictNullChecks 选项设置为 false，下面这种操作不会报错，不过尽量不要这么做。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 将 null 和 undefined 赋值给 string 类型
let str: string = "哈哈哈"
str = null
str = undefined

// 将 null 和 undefined 赋值给 number 类型
let num: number = 123
num = null
num = undefined

// 将 null 和 undefined 赋值给 object 类型
let obj: object = {}
obj = null
obj = undefined

// 将 null 和 undefined 赋值给 boolean 类型
let flag: boolean = false
flag = null
flag = undefined

// 将 null 和 undefined 赋值给 symbol 类型
let sym: symbol = Symbol("abc")
sym = null
sym = undefined

// 将 null 和 undefined 赋值给 bigint 类型
let big: bigint =  10n;
big = null
big = undefined

编译结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 将 null 和 undefined 赋值给 string 类型
var str = "哈哈哈";
str = null;
str = undefined;
// 将 null 和 undefined 赋值给 number 类型
var num = 123;
num = null;
num = undefined;
// 将 null 和 undefined 赋值给 object 类型
var obj = {};
obj = null;
obj = undefined;
// 将 null 和 undefined 赋值给 boolean 类型
var flag = false;
flag = null;
flag = undefined;
// 将 null 和 undefined 赋值给 symbol 类型
var sym = Symbol("abc");
sym = null;
sym = undefined;
// 将 null 和 undefined 赋值给 bigint 类型
var big = 10n;
big = null;
big = undefined;

注意：如果你在 tsconfig.json 文件中指定了“strictNullChecks：true”，null 和 undefined 只能赋值给 void 和它们各自的类型。

1.5.symbol

symbol 是ES6新增的一种基本数据类型，Symbol()函数 会返回 symbol 类型的值，每个从 Symbol()函数 返回的 symbol 的值都是唯一的。

1
2
3
const sym1: symbol = Symbol()
const sym2: symbol = Symbol('temp')
const sym3: symbol = Symbol('temp')

上面的代码创建了三个新的 symbol 类型，但是注意的是，每个从 Symbol()函数 返回的值都是唯一的。

此时，如果我们在控制台打印下面的代码，两者并不相等。

1
console.log(sym2 === sym3) // false

1.6.bigint

bigint 是ES10新增的一种基本数据类型，在JS中，可以用 Number 表示的最大整数为 2^53 - 1，可以写为 Number.MAX_SAFE_INTEGER。如果超过了这个界限，那么就可以用 BigInt 来表示，它可以表示任意大的整数。

在一个整数字面量后面加 n 的方式定义一个 bigint，或者调用函数 BigInt()。

1
2
3
4
let big1: bigint = 10n
let big2: bigint = BigInt(10)

console.log(big1 === big2) // true

1.7.区别

1.7.1. null 和 undefined 的区别

  1. 在JS中，null 表示“什么都没有”，而 undefined 是一个没有设置值的变量
  2. 用 typeof 检测 null，返回 object；typeof 一个没有值的变量会返回 undefined
  3. null 是一个只有一个值的特殊类型，表示一个空对象的引用
  4. null 和 undefined 是其它任何类型（包括void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined。而在TS中启用严格的空校验（strictNullChecks）特性，就可以使得 null 和 undefined 只能被赋值给 void 或本身对应的类型

1.7.2. bigint 和 number 的区别

  1. number 和 bigint 都可以表示数字，但是两者不能进行相互转换
  2. 仅在值大于 2^53 - 1时，才使用 bigint，否则尽量使用 number
  3. 用 typeof 检测 bigint 对象时，返回 bigint，用 typeof 检测 number，返回 number
1
2
3
4
console.log(typeof 10) // number
console.log(typeof Number(10)) // number
console.log(typeof 10n) // bigint
console.log(typeof BigInt(10)) // bigint
本文作者：ShaoAo
本文链接：https://sawr.gitee.io/2023/09/14/js/studyts/
版权声明：本文采用 CC BY-NC-SA 3.0 CN 协议许可，仅作个人记录，转载请说明出处！
×