TypeScript认识使用

1、认识TypeScript

官方地址❤

英文官网：https://www.typescriptlang.org/

中文官网：https://www.tslang.cn/

简介

简单来说： TypeScript是JavaScript进化版，并添加了额外的语法来支持类型

TypeScript是由微软开发的自由和开源的编程语言。是JavaScript的一个严格超集，并添加了可选的静态类型和使用看起来像基于类的面向对象编程语法操作Prototype

包含内容

联合类型
类型别名
函数类型(单独指定参数和返回值的类型||同时指定参数和返回值的类型)
void类型
函数可选参数
对象类型
对象可选属性
接口
接口和类型别名的对比
接口继承
元组
类型推论
类型断言

2、为什么使用TS

Ts和JS的关系

ts包含js

TS命名

• TypeScript 文件的扩展是 .ts ，而不是 JavaScript 文件的 .js 扩展名 TypeScript的优化

• 将可选类型引入 JavaScript。

• 在当前 JavaScript 的基础上实现未来 JavaScript 的计划功能，即 ECMAScript Next 或 ES Next。

TS增加的功能

类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await

以下功能是从 ECMA 2015 反向移植而来：

类
模块
lambda 函数的箭头语法
可选参数以及默认参数

JavaScript 和 TypeScript 类型

JavaScript 已有类型

类型分类	类型
原始类型	number, string, boolean, null, undefined, symbol
对象类型	object (数组、对象、函数等)

TypeScript 新增类型

类型分类	类型
联合类型	可以将多种类型组合为一个类型，例如 `number
自定义类型（类型别名）	使用 `type` 创建新的类型别名
接口	`interface` 用于定义对象的结构
元组	tuple 类型，表示一个已知元素数和类型的数组
字面量类型	字面量类型，指定值的具体类型（如 `'red'`）
枚举	`enum` 类型，表示一组命名的常数值
void	无返回值类型，通常用于函数没有返回值的情况
any	任意类型，表示可以是任何类型

TypeScript 常用基础类型分类

类型分类	类型
布尔值	boolean
数字	number
字符串	string
数组	Array 类型，例如 `number[]` 或 `Array<number>`
元组	Tuple 类型，例如 `[number, string]`
枚举	enum 类型，例如 `enum Color { Red, Green, Blue }`
Any	任意类型，表示可以是任何类型
Void	无返回值类型，通常用于函数没有返回值的情况
Null	null 类型，表示空值
Undefined	undefined 类型，表示未定义的值
Never	表示从不发生的类型，例如抛出错误的函数
Object	对象类型，表示非原始类型的对象

TypeScript 原始类型

类型	描述
Boolean	布尔值类型，表示 `true` 或 `false`
Number	数字类型，表示整数或浮动的数字
String	字符串类型，表示文本
Null	空值类型，表示没有值
Undefined	未定义类型，表示变量未赋值
Symbol	ES6 新增的符号类型

TS相比JS的优势

你可以初步的理解为：

TypeScript为JavaScript添加了类型支持

（类型系统）JS有的TypeScript都有，是Type和JavaScipt的结合，在JS的基础上为 JS 添加了类型系统，强大的类型系统提升了代码的可维护性，使得重构代码更加容易。
从编程语言的动静来区分，TypeScript属于静态类型的编程语言，JS属于动态类型的编程语言。
静态类型是编译期做类型检查，动态类型是执行期做类型检查。代码编译和代码执行的顺序本身是1编译2执行.通过使用类型，我们可以在编译时捕获错误，而不是让它们在运行时发生。
支持最新的ECMAScript语法，优先体验最新的语法，时刻在前端技术的最前沿。
对于JS来说：需要等到代码真正去执行的时候才能发现错误(晚)。
对于TS来说：在代码编译的时候(代码执行前)就可以发现措误(早)。
TS类型推断机制，不需要在代码中的每个地方都显示标注类型，让你在享受优势的同时，尽量降低了成本。除此之外，Vue3源码使用TS重写、Angular默认支持TS、React与TS完美配合，TypeScript已成为大中型前端项目的首先编程语言。 10.配合VSCode等开发工具,在程序中任何位置的代码都有代码提示。更早(写代码的同时)发现错误，减少找Bug、改Bug时间，提升开发效率,开发体验更友好

TypeScript案列:

JavaScript 相加函数使用：

如果我们从 HTML 输入元素中获取值并将它们传递给函数，我们可能会得到意想不到的结果

plain

javascriptfunction add(x, y) {
   return x + y;
}
let result = add(input1.value, input2.value);
console.log(result); // result of concatenating strings
 
let result = add('10', 20);
console.log(result); // 1020用户输入 10 和 20，则 add()函数将返回 1020，而不是 30

原因:

input1.value 和 input2.value 是字符串，而不是数字

TypeScript 相加函数使用

plain

function add(x: number, y: number) {
	return x + y;
}

指定函数的参数类型为数字类型时，函数 add() 将只接受数字，而不接受任何其他值

3、安装和编译

ts编译器

作用：提供代码检查和编译

ts的代码最终都需要编译成js才能在支持ES3及以上的js引擎中运行

这就需要安装typescript，然后通过它的 Compiler（编译器）将 ts 代码编译为 js

浏览器和 Node.js 只能执行 JavaScript 代码，是不支持TypeScript的，所以必须将TypeScript 编译为JavaScript代码

🍓 编译器功能

类型检查：
检查ts代码中类型是否匹配(数字赋值给字符串错误)

代码转译：
将ts转换为标准的js,移除类型注解等TS特有的语法

代码优化：
在编译过程中，做一些优化，比如将ES6+转译成旧版ES5

生成类型声明：
生成 .d.ts类型声明文件，帮助其他ts理解代码结构

🍓 编译器功能


语法解析：将TypeScript =>解析为抽象语法树（AST），并检查语法错误

类型检查：根据TypeScript类型检查类型一致性，确保符合TypeScript的静态类型

代码生成：生成js，让浏览器或 Node.js执行。

🍓 编译器命令

1. 使用 tsc 命令
使用tsc命令编译TypeScript文件为 app.ts

tsc app.ts

使用 tsconfig.json 配置文件项目通常会使用tsconfig.json 配置文件来指定编译选项，控制 TypeScript 编译器的行为，例如输出目录、使用的 JavaScript 版本、启用的编译选项

tsconfig.json 示例：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  },
  "include": [
    "src/**/*.ts"
  ]
}

运行 tsc 命令时，TypeScript 编译器会自动读取 tsconfig.json 文件来确定如何编译整个项目。

安装编译TS的工具包

打开Windows下的命令提示符，输入命令

npm install -g typescript //安装

tsc -v  //查看版本

//c就是 Compiler的缩写

// 检查版本以后给我们提示
Version 5.8.2

编译并运行TS代码

创建一个app.ts文件

plain


const hello : string = "Hello World!"
console.log(hello)

执行以下命令将 TypeScript 转换为 JavaScript 代码

plain


tsc app.ts //将 TypeScript 转换为 JavaScript 代码
node app.js  //输出hello word

简化运行TS的步骤

使用 ts-node包，直接在Node.js中执行TS代码

plain


安装命令
npm i -g ts-node 
使用方式：
ts-node ts文件名

-操作以及输出

ts-node app.ts
// 输出Helloworld

※ 报错以及解决

👉 报错 SyntaxError: Unexpected token 'export'

👉 解决

// 添加
export {}

👉 原因

对于ts（包括 js）而言，任何没有export的文件都被默认为是一个脚本而不是一个模块。

在一个脚本文件中声明的变量等都是在全局作用域的，会在同一个作用域下进行编译。

当我们声明 name 的时候，如果某个其它的全局文件也声明了个变量 name，会报错

添加上 export {} 让当前文件变成一个没有导出任何内容的模块，有了独立的作用域，报错就解决了

TypeScript认识使用 ​

1、认识TypeScript ​

官方地址❤ ​

简介 ​

包含内容 ​

2、为什么使用TS ​

Ts和JS的关系 ​

TS命名 ​

TS增加的功能 ​

JavaScript 和 TypeScript 类型 ​

JavaScript 已有类型 ​

TypeScript 新增类型 ​

TypeScript 常用基础类型分类 ​

TypeScript 原始类型 ​

TS相比JS的优势 ​

TypeScript案列: ​

3、安装和编译 ​

ts编译器 ​

🍓 编译器功能 ​

🍓 编译器功能 ​

🍓 编译器命令 ​

安装编译TS的工具包 ​

编译并运行TS代码 ​

简化运行TS的步骤 ​

※ 报错以及解决 ​

TypeScript认识使用

1、认识TypeScript

官方地址❤

简介

包含内容

2、为什么使用TS

Ts和JS的关系

TS命名

TS增加的功能

JavaScript 和 TypeScript 类型

JavaScript 已有类型

TypeScript 新增类型

TypeScript 常用基础类型分类

TypeScript 原始类型

TS相比JS的优势

TypeScript案列:

3、安装和编译

ts编译器

🍓 编译器功能

🍓 编译器功能

🍓 编译器命令

安装编译TS的工具包

编译并运行TS代码

简化运行TS的步骤

※ 报错以及解决