为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 TypeScript 入门教程：从零开始学习

TypeScript 入门教程：从零开始学习

标签：
Typescript
概述

本文是一篇关于TypeScript入门教程的文章，详细介绍了TypeScript的基础知识、优势、与其他编程语言的区别，并提供了环境搭建和配置的步骤。文章还涵盖了变量与数据类型、函数与类型推断、类与接口等核心概念，并通过实战演练展示了如何使用TypeScript构建一个简单的网页应用。

TypeScript 入门教程：从零开始学习
TypeScript 基础介绍

什么是 TypeScript

TypeScript 是由微软开发的一种开源编程语言，它是 JavaScript 的一个超集，即 TypeScript 的所有语法都是 JavaScript 的语法，同时又添加了一些新的特性。TypeScript 的主要目标是开发大型的、复杂的前端应用，它通过静态类型检查来提升开发效率和代码质量。

TypeScript 的优势

  1. 静态类型检查：通过在编译时进行类型检查，TypeScript 可以帮助开发者在编码早期发现错误，从而减少运行时错误。
  2. 支持面向对象编程：TypeScript 支持类、接口、继承等面向对象编程特性，使得代码结构更加清晰。
  3. 可扩展性：TypeScript 通过模块和命名空间支持代码的模块化，使代码更加易于维护和扩展。
  4. 编译为纯 JavaScript：TypeScript 代码最终会被编译为纯 JavaScript 代码，因此可以在任何支持 JavaScript 的环境中运行。
  5. 工具支持：TypeScript 有丰富的工具支持，如代码编辑器、IDE 插件、构建工具等，可以帮助开发者提高开发效率。

TypeScript 与其他编程语言的区别

  • 对比 JavaScript：TypeScript 和 JavaScript 都是运行在 JavaScript 引擎上的语言，但 TypeScript 通过静态类型检查增加了类型安全，使得代码更易于维护。JavaScript 缺少类型检查，容易出现类型错误。
  • 对比其他静态类型语言：如 Java 或 C#，TypeScript 是一种弱类型语言，这意味着它的类型检查是在编译时进行的，而不是在运行时。这使得 TypeScript 更接近 JavaScript，同时也兼顾了类型安全的优势。

示例代码

// TypeScript 代码示例
let message: string = "Hello, TypeScript!";
console.log(message);
环境搭建与配置

安装 Node.js 和 npm

首先，需要安装 Node.js，它是一个基于 Chrome V8 JavaScript 引擎的开源运行环境。Node.js 包含了一个 JavaScript 解释器（node.exe），可以运行 JavaScript 程序。npm 是 Node.js 的包管理工具，可以用来安装和管理 JavaScript 库。

安装 Node.js 后，会自动安装 npm，可以通过以下命令验证安装是否成功：

node -v
npm -v

安装 TypeScript

安装 TypeScript 需要使用 npm，可以通过以下命令安装：

npm install -g typescript

安装完成后，可以通过以下命令验证安装是否成功：

tsc -v

配置开发环境

创建一个项目文件夹，并在其中初始化一个新的 Node.js 项目：

mkdir ts-project
cd ts-project
npm init -y

安装 TypeScript 编译器：

npm install typescript --save-dev

创建一个 tsconfig.json 文件以配置 TypeScript 编译选项。可以通过以下命令生成默认配置：

npx tsc --init

tsconfig.json 示例配置：

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "outDir": "./dist"
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules"]
}

创建第一个 TypeScript 项目

创建一个新的 TypeScript 文件，例如 hello.ts：

// hello.ts
let message: string = "Hello, TypeScript!";
console.log(message);

在终端中运行以下命令来编译 TypeScript 代码：

tsc

这将会生成一个 hello.js 文件，你可以通过以下命令运行生成的 JavaScript 代码：

node hello.js
变量与数据类型

TypeScript 中的变量声明

在 TypeScript 中，可以通过 let 或 const 关键字声明变量，同时可以指定变量的类型。如果类型推断正确，也可以省略类型声明。

let numberVar: number = 42;
const stringVar: string = "Hello";
let booleanVar: boolean = true;

TypeScript 的基本数据类型

TypeScript 支持以下基本数据类型：

  • number：表示数字类型，可以是整数或浮点数。
  • string：表示字符串类型。
  • boolean：表示布尔类型，可以是 true 或 false。
  • null 和 undefined：表示空值类型。
  • void：表示没有返回值的函数。
let num: number = 123;
let str: string = "Hello, TypeScript!";
let bool: boolean = true;
let nullVar: null = null;
let undefinedVar: undefined = undefined;
let voidVar: void = undefined; // void 类型通常用于没有返回值的函数

TypeScript 的高级数据类型

TypeScript 还支持一些高级数据类型，如数组、元组、枚举等。

数组

数组可以使用方括号 [] 来表示，并可以指定数组元素的类型。

let numbers: number[] = [1, 2, 3];
let strings: string[] = ["apple", "banana", "cherry"];

元组

元组是一种可以指定多个不同类型元素的数据类型。元组中的每个元素都有固定的类型和位置。

let person: [string, number] = ["Alice", 25];
console.log(person[0]); // Alice
console.log(person[1]); // 25

枚举

枚举是一种为一组相关的常量提供命名的集合。可以通过 enum 关键字声明枚举，枚举成员可以通过 = 来指定值，否则从 0 开始自动递增。

enum Color {Red = 0, Green = 1, Blue = 2}
let redColor: Color = Color.Red;
console.log(redColor); // 输出 0
函数与类型推断

定义函数

在 TypeScript 中，可以使用 function 关键字定义函数，并明确指定参数类型和返回类型。

function addNumbers(a: number, b: number): number {
    return a + b;
}

函数参数与返回类型

函数参数可以指定类型，也可以有默认值。返回类型指定函数返回的类型。

function greet(name: string = "Guest"): string {
    return `Hello, ${name}!`;
}

console.log(greet()); // 输出 "Hello, Guest!"
console.log(greet("Alice")); // 输出 "Hello, Alice!"

掌握类型推断

类型推断是指 TypeScript 可以根据上下文自动推断变量的类型。对于简单的赋值语句，TypeScript 能够自动推断出变量的类型。

let num = 42; // 推断为 number 类型
let str = "Hello"; // 推断为 string 类型
let bool = true; // 推断为 boolean 类型
类与接口

TypeScript 类的基础

在 TypeScript 中，可以使用 class 关键字定义类。类可以包含属性和方法。

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    displayInfo() {
        console.log(`Name: ${this.name}, Age: ${this.age}`);
    }
}

let person = new Person("Alice", 25);
person.displayInfo(); // 输出 "Name: Alice, Age: 25"

类的继承

类支持继承，通过使用 extends 关键字可以创建一个继承自其他类的新类。

class Student extends Person {
    grade: number;

    constructor(name: string, age: number, grade: number) {
        super(name, age);
        this.grade = grade;
    }

    displayInfo() {
        super.displayInfo();
        console.log(`Grade: ${this.grade}`);
    }
}

let student = new Student("Bob", 20, 3);
student.displayInfo(); // 输出 "Name: Bob, Age: 20, Grade: 3"

接口的概念与使用

接口可以定义对象的结构，用于约束对象的属性和方法。接口可以用来定义类的结构，也可以作为函数的参数类型。

interface PersonInterface {
    name: string;
    age: number;
    displayInfo(): void;
}

class User implements PersonInterface {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    displayInfo() {
        console.log(`Name: ${this.name}, Age: ${this.age}`);
    }
}

let user = new User("Charlie", 30);
user.displayInfo(); // 输出 "Name: Charlie, Age: 30"

示例代码

interface Point {
    x: number;
    y: number;
}

function printPoint(p: Point) {
    console.log(`x: ${p.x}, y: ${p.y}`);
}

let point: Point = {x: 1, y: 2};
printPoint(point); // 输出 "x: 1, y: 2"
实战演练：构建一个简单的应用

使用 TypeScript 构建一个简单的网页应用

创建一个新的文件夹 ts-app，并在其中初始化一个新的 Node.js 项目：

mkdir ts-app
cd ts-app
npm init -y
npm install typescript --save-dev
npx tsc --init

创建一个 index.ts 文件，编写以下代码：

// index.ts
document.addEventListener("DOMContentLoaded", () => {
    let greetingElement = document.createElement("h1");
    greetingElement.textContent = "Hello, TypeScript!";
    document.body.appendChild(greetingElement);
});

安装并使用 @types/node 以获取 Node.js 类型定义：

npm install @types/node --save-dev

在 tsconfig.json 中添加以下配置：

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

在项目中创建 src 文件夹，并将 index.ts 移动到 src 文件夹中。

在项目根目录下创建一个 index.html 文件，编写以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript App</title>
</head>
<body>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="dist/index.js"></script>
</body>
</html>

通过 tsc 命令编译 index.ts：

npx tsc

调试与优化代码

使用 TypeScript 的静态类型检查功能可以发现潜在的错误。可以通过在 tsconfig.json 中启用 strict 模式来启用更多严格检查。

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

使用 IDE 或编辑器中的 TypeScript 插件可以进行代码调试和优化。例如，使用 Visual Studio Code 可以进行 TypeScript 代码的调试。

发布与部署应用

将应用部署到 Web 服务器。可以将生成的 dist 文件夹中的文件上传到远程服务器，或者使用 Web 服务器托管服务。

例如，使用 GitHub Pages 或 Netlify 托管静态网站。

  1. GitHub Pages：

    • 创建一个新的 GitHub 仓库。
    • 将 dist 文件夹中的文件推送到仓库的 gh-pages 分支。
    • 在仓库设置中启用 GitHub Pages，选择 gh-pages 分支作为源。

  2. Netlify：

    • 创建一个新的 Netlify 项目。
    • 连接到 GitHub 仓库。
    • 选择 dist 文件夹作为构建设置。
    • 发布应用。

示例代码

// index.ts
document.addEventListener("DOMContentLoaded", () => {
    let button = document.createElement("button");
    button.textContent = "Click me!";
    button.addEventListener("click", () => {
        alert("Button clicked!");
    });
    document.body.appendChild(button);
});
点击查看更多内容
发表于 2024.12.25 21:45， 共 35 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

动漫人物

手记
篇
粉丝
18
获赞与收藏
71

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消