💯 欢迎光临清清ww的博客小天地💯
🔥 个人主页:【清清ww】🔥
📚 系列专栏:vue3 | TypeScript 📚
🌟 学习本无底，前进莫徬徨。🌟
开始学习
目录
一、TypeScript 简介
1.JavaScript引入
2.TypeScript引入
二、安装 TypeScript
三、TypeScript 编译过程
四、编写第一个 TypeScript
引言
随着前端开发的不断发展，TypeScript 已经成为现代前端开发中不可或缺的一部分。作为一名前端开发者，掌握 TypeScript 语法对于提高开发效率和代码质量具有重要意义。本文将介绍 TypeScript 的基本概念、安装方法、编译过程以及如何编写第一个 TypeScript 程序。
一、TypeScript 简介
在了解TypeScript（简称TS）是什么之前，首先得知道什么是JavaScript（简称JS）。
1.JavaScript引入
JS是一种用于网页开发的编程语言，它是一种动态的、弱类型的语言，广泛用于网页交互和动态效果的实现。
JavaScript最初是作为一种客户端脚本语言而开发的，用于在网页上实现交互功能，比如表单验证、动态内容更新、动画效果等。随着技术的发展，JavaScript也逐渐被应用于服务器端开发，例如Node.js。
2.TypeScript引入
TypeScript 是一种由微软开发的、基于 JavaScript 的开源编程语言。它为 JavaScript 添加了静态类型和面向对象编程特性，使得代码更加健壮、易于维护。TypeScript 提高了开发效率和代码质量，同时保持与 JavaScript 的兼容性。
TS 和 JS 之间的关系可以理解为“超集”与“子集”的关系。TS 是 JS 的一个超集，它包含了 JS 的所有特性，并且在此基础上增加了额外的特性，主要是静态类型系统。
TS的静态类型系统:
一种在编译时检查代码中变量、函数、对象等的数据类型的方法。该类型检查发生在代码运行之前，因此称为“静态”类型检查。静态类型系统的主要目的是提高代码的可读性、可维护性和减少运行时错误。
TS 扩展了 JS 的语法，使其能够添加静态类型注解。这些类型注解在编译时提供额外的检查，帮助开发者捕获潜在的错误，提高代码的可维护性和可读性。TS 最终会被编译成纯 JS 代码，因此任何支持 JS 的环境都可以运行 TS 编译后的代码。
静态类型注解
TS 中的一种特性，它允许开发者在代码中显式地指定变量、函数参数、函数返回值等的数据类型。
let message: string = "Hello, World!";在这个例子中，
message变量被指定为string类型。如果尝试将一个非字符串值赋给message，TS 编译器将会报错。静态类型注解不仅限于基本类型，还可以用于更复杂的类型，如数组、元组、枚举、接口、自定义类型和泛型等。通过这些类型注解，TypeScript 编译器可以更准确地理解代码的结构和意图，从而提供更好的代码提示和错误检查。
总的来说，TS 是 JS 的一个超集，它为 JS 添加了类型安全和其他高级特性，同时保持了与 JS 的向后兼容性。
二、安装 TypeScript
首先确保已安装 Node.js 和 npm。
然后打开命令行工具，输入以下命令安装 TS ：
npm install -g typescript
三、TypeScript 编译过程
TS 编译过程是将 TS 代码转换为 JS 代码的过程。以下是 TS 编译过程的步骤:
- 编写TS 代码，保存为 .ts 文件。
- 使用 TS 编译器（tsc）将 .ts 文件编译为 .js 文件。
- 在浏览器或 Node.js 环境中运行编译后的 .js 文件。
四、编写第一个 TypeScript
下面是一个简单的 TypeScript 程序示例，展示了如何定义变量、函数和类。我们通过这个例子简单感受一下 TS 。
// 定义一个名为 message 的变量，并显式地为其指定类型为 string
let message: string = "Hello, TypeScript!";
// 定义一个名为 greet 的函数，它接受一个名为 name 的参数，该参数的类型被指定为 string
// 函数的返回类型也被指定为 string
function greet(name: string): string {
// 使用模板字符串来构建并返回问候语
return `Hello, ${name}!`;
}
// 定义一个名为 Person 的类，它具有一个名为 name 的属性，该属性的类型为 string
class Person {
// 类的构造函数，它接受一个名为 name 的参数，并将其赋值给类的 name 属性
constructor(name: string) {
this.name = name;
}
// 定义一个名为 greet 的方法，它返回一个包含实例 name 属性的问候语
greet() {
return `Hello, my name is ${this.name}!`;
}
}
// 使用变量 message，并打印其值
console.log(message);
// 调用函数 greet，传入字符串 "Alice" 作为参数，并打印返回的问候语
console.log(greet("Alice"));
// 创建一个 Person 类的实例，传入字符串 "Bob" 作为构造函数的参数
const person = new Person("Bob");
// 调用 person 实例的 greet 方法，并打印返回的问候语
console.log(person.greet());
🚀感谢您的细心品读，完成了这篇关于【TS】九天学会TS语法——1.TypeScript是什么的旅程。 🚀
🎉 您的每一个鼓励都是我不断更新的动力，不要忘记点赞收藏🎉
🔍 期待与您一同深入前端技术的海洋，共同探索那些未知的宝藏，揭开Web开发的层层迷雾。🔍
🌟 🌈 感恩您的支持与同行，愿我们的前端征途越走越远！🌈 🌟
