前端技术回顾系列 01 ｜了解 TypeScript 和环境搭建

在微信中阅读，欢迎👏👏👏关注公众号：CodeFit。

创作不易，如果你觉得这篇文章对您有帮助，请不要忘了 点赞、分享 和 关注 我的公众号：CodeFit，为我的持续创作提供动力。

本系列已经完结啦🎉🎉🎉，下一个内容是 Vue3，欢迎订阅《Vue 3.x 必修课｜ 2024》：http://t.csdnimg.cn/hHRrM，目前持续更新中～🚀🚀🚀

精品内容🥇🥇🥇，物超所值🔥🔥🔥（9.9 元！20+篇内容！）。

---

大纲

1. 快速了解什么是 TypeScript
2. 了解动态类型和静态类型
3. 官网地址
4. TypeScript 的主要特性
5. TypeScript 的问题
6. 安装与编译
7. 直接运行 TypeScript 的方式

快速了解什么是 TypeScript

TypeScript 是由微软开发和维护的一种 编程语言。

它是 JavaScript 的 超集，这意味着任何合法的 JavaScript 代码在 TypeScript 中也是合法的。

了解动态类型和静态类型

• 动态类型语言
  • 运行时 才检查数据类型
  • 如：JS、Python
• 静态类型语言
  • 编译时期 就检查数据类型
  • 如：C/C++、Java

这里需要强调的是 类型，为什么类型很重要？

因为在 TypeSciprt 官网有一句口号：TypeScript 是带有类型语法的 JavaScript。

这个口号很好地总结了 TypeScript 的定位和优势。

作为 JavaScript 的超集，通过引入强大的 类型系统，从而提供类型检查和丰富的开发工具支持，这提高了代码整体的可靠性、可维护性和开发效率。

官网地址

• https://typescriptlang.org
• 口号：TypeScript is JavaScript with syntax for types.

TypeScript 的主要特性

1. 静态类型检查：

   • TypeScript 允许你为变量、函数参数和返回值指定类型，在编译时进行类型检查。
   • 例如：

     let message: string = "Hello, TypeScript!";
     

2. 类型推断：

   • TypeScript 可以根据上下文自动推断变量的类型，即使我们没有显式声明类型。
   • 例如：

     let count = 42; // TypeScript 推断 count 是 number 类型
     

3. 接口和类型别名：

   • 可以使用接口（interface）和类型别名（type alias）定义复杂的类型结构。
   • 例如：

     interface Person {
       name: string;
       age: number;
     }
     
     let user: Person = {
       name: "CodeFit",
       age: 30
     };
     

4. 类和模块：

   • TypeScript 支持 ES6 类和模块的语法，增强了面向对象编程的能力。
   • 例如：

     class Animal {
       name: string;
     
       constructor(name: string) {
         this.name = name;
       }
     
       speak(): void {
         console.log(`${this.name} makes a noise.`);
       }
     }
     
     let dog = new Animal("Cat");
     dog.speak(); // Dog makes a noise.
     

TypeScript 的问题

• 增加学习成本
• 短期内开发成本提升

安装与编译

1. 下载地址：https://www.typescriptlang.org/download/
2. 可以选择 全局安装（需要先安装好 Node.js）。

npm install -g typescript

3. 安装后，查看版本

tsc --version

4. 写段代码试试，创建一个文件 test.ts，添加如下内容：

const hello = (name) => {
    return `Hello, {name}`
}
hello('CodeFit')

5. 执行看看

tsc test.ts

可以看到同目录下生成了 test.js 文件。

6. 给内容加点 TypeScript 特性，比如给参数设置 数据类型，比如 字符串。

const hello = (name: string) => {
    return `Hello, {name}`
}

hello('CodeFit')

此时，如果在调用时传入 整数类型 的实参就会报错：

// 会报错
hello(123) // 报错信息：error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

直接运行 TypeScript 的方式

TypeScript 文件（ .ts 文件）不能直接在 浏览器 或 Node.js 环境中运行，所以它们需要先被 编译 成 JavaScript，然后再 运行。

但是借助一些工具，可以达到 “直接运行” TypeScript 文件的效果。

1. ts-node：

   • ts-node 是一个 TypeScript 执行引擎，可以直接运行 .ts 文件，实际上，编译行为并没有被忽略，只是它会自动将 TypeScript 代码编译成 JavaScript 后立即执行编译后的文件。
   • 安装 ts-node：

     npm install -g ts-node
     

   • 使用 ts-node 运行 TypeScript 文件：

     ts-node yourfile.ts
     

2. 使用 TypeScript REPL：

   • ts-node 也可以作为一个 REPL（Read-Eval-Print Loop） 使用，也就是可以实时编写和执行 TypeScript 代码。

     ts-node
     

   • 在 REPL 中直接输入 TypeScript 代码，按 Enter 运行。

3. 在 Node.js 中集成 TypeScript：

   • 使用 ts-node 和 nodemon 结合，可以在开发过程中自动重启应用并运行 TypeScript 代码。
   • 安装 nodemon 和 ts-node：

     npm install -g nodemon ts-node
     

   • 使用 nodemon 运行 TypeScript 文件：

     nodemon --exec ts-node yourfile.ts
     

上述三种方式都可以让我们 “直接运行” TypeScript 文件。

各位看官，本文结束，下文更精彩！

---

感谢您的阅读！

如果觉得这篇文章对您有所帮助，请点赞、分享，并关注 CodeFit，这样就不会错过更多的精彩内容。

本系列已经完结啦🎉🎉🎉，下一个内容是 Vue3，欢迎订阅《Vue 3.x 必修课｜ 2024》：http://t.csdnimg.cn/hHRrM，目前持续更新中～🚀🚀🚀

精品内容🥇🥇🥇，物超所值🔥🔥🔥（9.9 元！20+篇内容！）。

同时，您的 支持 和 反馈 对我非常重要，欢迎在评论区留言，与我互动。

付出不一定有收获，但是有付出才有收获，大家下次见！