TypeScript笔记(基础大全到井格游戏案例)

TypeScript学习笔记

参考文档

参考视频

一、介绍

TypeScript(Typed JavaScript at Any Scale):添加了类型系统的 JavaScript，适用于任何规模的项目。TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。

1.类型系统

说到ts比js新增的类型系统就不得不提到js的一个特点,js没有类型拘束,使得它的代码质量参差不齐，维护成本高，运行时错误多。

TypeScript 是静态类型

类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型。

动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。JavaScript 是动态类型，没有编译阶段.

静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。TypeScript 是静态类型, 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查.

大部分 JavaScript 代码都只需要经过少量的修改（或者完全不用修改）就变成 TypeScript 代码,ts的强大的类型推论,使得不去手动声明变量 foo 的类型，也能在变量初始化时自动推论出它是一个 number 类型。

TypeScript 是弱类型

类型系统按照「是否允许隐式类型转换」来分类，可以分为强类型和弱类型。

TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性，js和ts都是弱类型。

在js和ts中:

console.log(1 + '1');
// 打印出字符串 '11'

Python 是强类型

print(1 + '1')
# 报错TypeError: unsupported operand type(s) for +: 'int' and 'str'

需要进行强制类型转换：

print(str(1) + '1')
# 打印出字符串 '11'

TypeScript 的核心设计理念：

在完整保留 JavaScript 运行时行为的基础上，通过引入静态类型系统来提高代码的可维护性，减少可能出现的 bug。

2.适用于任何规模

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

TypeScript 增强了编辑器（IDE）的功能，包括代码补全、接口提示、跳转到定义、代码重构等，这在很大程度上提高了开发效率。

• 在 VSCode 编辑器中编写 JavaScript 时，代码补全和接口提示等功能就是通过 TypeScript Language Service 实现的：

  

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

• 有一些第三方库原生不支持 TypeScript，但是可以通过安装社区维护的类型声明库[9]（比如通过运行 npm install --save-dev @types/react 来安装 React 的类型声明库）来获得代码补全能力——不管是在 JavaScript 项目中还是在 TypeScript 中项目中都是支持的：

3.与标准同步发展

TypeScript 的另一个重要的特性就是坚持与 ECMAScript 标准同步发展。ECMAScript 是 JavaScript 核心语法的标准，自 2015 年起，每年都会发布一个新版本，包含一些新的语法。

什么是 TypeScript？(总结)

• TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。
• TypeScript 是一门静态类型、弱类型的语言。
• TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性。
• TypeScript 可以编译为 JavaScript，然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
• TypeScript 拥有很多编译选项，类型检查的严格程度由你决定。
• TypeScript 可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
• TypeScript 增强了编辑器（IDE）的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力。
• TypeScript 拥有活跃的社区，大多数常用的第三方库都提供了类型声明。
• TypeScript 与标准同步发展，符合最新的 ECMAScript 标准（stage 3）。

JavaScript 与 TypeScript 的区别

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

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

二、TypeScript 基础语法

TypeScript 程序由以下几个部分组成：

• 模块
• 函数
• 变量
• 语句和表达式
• 注释

1.TypeScript基础类型:

ES6数据类型参考

数据类型	关键字	描述
任意类型	any	声明为 any 的变量可以赋予任意类型的值;如果是一个普通类型，在赋值过程中改变类型是不被允许的,但如果是 any 类型，则允许被赋值为任意类型;未申明类型的变量自东北识别为任意类型.
数值类型	number	双精度 64 位浮点值。它可以用来表示整数和分数。let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制
字符串类型	string	一个字符系列，使用单引号（’）或双引号（"）来表示字符串类型。反引号（``）来定义多行文本和内嵌表达式。let name: string = "Runoob"; let years: number = 5; let words: string =您好，今年是 ${ name } 发布 ${ years + 1} 周年;
布尔类型	boolean	表示逻辑值：true 和 false。let flag: boolean = true;,不能将其它类型赋值给它
null	null	null是一个只有一个值的特殊类型。表示一个空对象引用。用 typeof 检测 null 返回是 object。用于初始化变量为一个未定义的值
undefined	undefined	Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型.如果一个类型可能出现 null 或 undefined， 可以用 |来支持多种类型
元组	无[数据类型]	元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。let x: [string, number]; x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错 console.log(x[0]); // 输出 Runoob
枚举	enum	枚举类型用于定义数值集合。enum Color {Red, Green=4, Blue};每个名字对应一个序列号 console.log(Color.Blue);// 输出 2 console.log(Color[4]);//输出green
void	void	用于标识方法返回值的类型，表示该方法没有返回值。function hello(): void { alert("Hello Runoob"); }
never	never	never 表示永远不存在的类型,never 类型的变量只能被 never 类型所赋值.抛出异常或无法执行到终止点（例如无限循环）
对象	object	对象是包含一组键值对的实例。 值可以是标量、函数、数组元祖、对象等
symbol	symbol()	直接调用symbol()不需要new,不能传对象,const s5=symbol('name')const info2={[s5]:'lison'}console.log(info2);

type 用法

1.类型别名:

类型别名用来给一个类型起个新名字。

//1.使用 type 创建类型别名
type Name = string;
//2. 类型别名常用于联合类型。
//返回值是string
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
   
    if (typeof n === 'string') {
   
        return n;
    } else {
   
        return n();
    }
}
console.log(getName('Name'));
//只能输入string类型的
//3. 和interface的用法差不多

数组

数组创建

1. 在元素类型后面加上[]

let fibonacci: number[] = [1, 1, 2, 3, 5];

2. 使用数组泛型

   let fibonacci: Array<number> = [1, 1, 2, 3, 5];
   

3. 使用接口表示数组

   interface NumberArray {
        
       [index: number]: number;
   }
   let fibonacci: NumberArray = [1, 1, 2, 3, 5];
   

4. 类数组