返回

TypeScript 入门笔记（一）-- 从 TypeScript 的起源到 Hello World

前端

TypeScript：入门指南

概述

TypeScript 作为 JavaScript 的超集，为前端开发带来了革命性的变化。它引入了类型注解，显著提升了代码可靠性和可维护性，并提供丰富的库支持，使应用程序开发变得高效便捷。

安装和配置

在踏上 TypeScript 之旅前，你需要安装 Node.js，然后通过 npm 命令安装 TypeScript：

npm install -g typescript

配置 TypeScript 编译器时，创建一个 tsconfig.json 文件，其中包含指定编译选项的 compilerOptions 对象：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist"
  }
}

第一个 TypeScript 程序

现在，让我们编写一个简单的 "Hello, world!" TypeScript 程序：

// 注释

console.log("Hello, world!");

将此代码保存在 helloworld.ts 文件中，然后通过 tsc 命令编译：

tsc helloworld.ts

编译后的 helloworld.js 可通过 Node.js 运行：

node helloworld.js

深入了解 TypeScript

类型系统

TypeScript 的类型系统是一个关键特征，它强制实施类型检查，防止类型错误。你可以在变量声明中指定类型，如下所示：

let age: number = 25;

接口和类

接口了对象属性的形状，而类则基于接口创建具体的对象：

interface Person {
  name: string;
  age: number;
}

class Employee implements Person {
  name: string;
  age: number;
  salary: number;
}

模块和命名空间

模块组织 TypeScript 代码，而命名空间防止符号冲突：

module MyModule {
  export class MyClass {}
}

库支持

TypeScript 生态系统拥有丰富的库支持，例如 lodash、jQuery 和 React。它们可以极大地简化应用程序开发：

import * as _ from "lodash";
console.log(_.join(["a", "b", "c"]));

进阶特性

TypeScript 提供了其他进阶特性，例如泛型、异步编程和装饰器。这些特性使代码更具灵活性和可扩展性。

结论

TypeScript 是构建大型、可靠、可维护的 JavaScript 应用程序的绝佳选择。其类型系统、接口、模块和库支持相结合，使开发者能够编写更高质量的代码。

常见问题解答

  1. TypeScript 与 JavaScript 有何区别？

    • TypeScript 是 JavaScript 的超集，它扩展了 JavaScript 的功能并添加了类型注解。

  2. TypeScript 可以编译成什么？

    • TypeScript 可以编译成 ES5、ES6、ES2015 和 ES2016 等 JavaScript 版本。

  3. TypeScript 是否与所有浏览器兼容？

    • TypeScript 编译后的 JavaScript 代码与所有支持相应 JavaScript 版本的浏览器兼容。

  4. TypeScript 是否适用于所有 JavaScript 库？

    • TypeScript 与大多数 JavaScript 库兼容，但它可能会在使用动态类型化的库时遇到一些问题。

  5. 学习 TypeScript 困难吗？

    • TypeScript 的学习曲线相对平滑，对于 JavaScript 开发人员来说，它很容易理解。