当前位置： 首页 > news >正文

大白话TypeScript第一章基础入门

news 来源：原创 2025/5/24 21:27:37

大白话TypeScript第一章基础入门

是什么
TypeScript 可以理解为 JavaScript 的“加强版”。JavaScript 是一种很灵活的编程语言，但有时候太灵活也会带来问题，比如代码里容易出现一些隐藏的错误，而且代码多了之后，维护起来会有点费劲。TypeScript 就在 JavaScript 的基础上，加上了“类型”这个东西，就像给每个变量、函数等都贴上了标签，告诉大家它是什么类型的，这样就能在写代码的时候提前发现很多错误，让代码更健壮、更好维护。

二、环境准备

在开始写 TypeScript 代码之前，得先把环境搭好。就像盖房子得先有个合适的场地一样。

1. 安装 Node.js 和 npm

Node.js 是一个能让 JavaScript 在服务器端运行的环境，npm 是用来管理项目里各种包的工具。你可以去 Node.js 官网 下载适合你电脑系统的安装包，安装好之后，在命令行（Windows 系统可以用 cmd 或者 PowerShell，Mac 和 Linux 系统用终端）里输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功啦。

2. 安装 TypeScript

在命令行里输入 npm install -g typescript，这个命令的意思是把 TypeScript 全局安装到你的电脑上。安装好之后，输入 tsc --version，要是能看到版本号，就说明 TypeScript 安装成功了。

三、基础语法

1. 变量和类型注解

在 JavaScript 里，变量可以随便存不同类型的值，就像一个大箱子，什么都能往里放。但在 TypeScript 里，我们可以给变量贴上类型标签，规定它只能放特定类型的值。

  • 数字类型（number）：就是用来存数字的，像整数、小数都可以。
// 这里声明了一个变量 age，给它贴上了 number 类型的标签，只能存数字
let age: number = 25;
  • 字符串类型（string）：用来存文本内容，比如名字、句子等。
// 变量 name 被标记为 string 类型，只能存字符串
let name: string = "张三";
  • 布尔类型（boolean）：只有两个值，true 或者 false，就像开关一样。
// isStudent 是布尔类型，只能是 true 或者 false
let isStudent: boolean = true;

要是你给一个变量赋了和它类型不匹配的值，TypeScript 就会在编译的时候报错，提醒你这里有问题。

2. 数组和元组
  • 数组：数组就是一组数据的集合，在 TypeScript 里，数组里的元素类型可以是一样的。
// 声明一个数字类型的数组，里面只能存数字
let numbers: number[] = [1, 2, 3, 4]; 
// 另一种声明数组的方式
let names: Array<string> = ["小明", "小红", "小刚"];
  • 元组：元组和数组有点像，但它规定了每个位置上元素的类型。
// 声明一个元组，第一个元素必须是字符串，第二个元素必须是数字
let person: [string, number] = ["李四", 30];
3. 枚举

枚举就像是给一组相关的值起了个名字，方便我们使用和管理。

// 定义一个枚举类型 Color，里面有三个值
enum Color {
    Red,
    Green,
    Blue
}
// 声明一个变量 myColor，它的类型是 Color 枚举，这里赋值为 Color.Green
let myColor: Color = Color.Green;

枚举里的值默认是从 0 开始的，也就是说 Color.Red 的值是 0，Color.Green 的值是 1，Color.Blue 的值是 2。你也可以自己给它们赋值。

4. 函数

函数是一段可以重复使用的代码块，在 TypeScript 里，我们可以给函数的参数和返回值都加上类型标签。

// 定义一个函数 add，它有两个参数 a 和 b，都是 number 类型，返回值也是 number 类型
function add(a: number, b: number): number {
    return a + b;
}
// 调用函数 add，传入两个数字，得到结果
let result = add(1, 2);

要是你调用函数的时候传入的参数类型不对，或者函数返回的值类型和声明的不一样，TypeScript 都会报错。

四、编译和运行 TypeScript 代码

写好 TypeScript 代码之后，不能直接运行，得先把它编译成 JavaScript 代码。在命令行里，进入到你代码所在的文件夹，然后输入 tsc 文件名.ts，这里的“文件名.ts”就是你写的 TypeScript 文件的名字。编译成功之后，会生成一个同名的 .js 文件，这个就是编译后的 JavaScript 代码。你可以用 Node.js 来运行这个 .js 文件，在命令行里输入 node 文件名.js 就可以看到运行结果啦。

通过这些基础的内容，你就可以开始用 TypeScript 写一些简单的代码了，后续还可以继续学习更高级的特性。

有哪些实践项目可以帮助我巩固TypeScript的基础？
以下为你介绍不同类型的实践项目，能帮助你巩固 TypeScript 的基础：

命令行工具类项目

1. 简易计算器
  • 功能描述：这是一个在命令行运行的简单计算器程序，能实现基本的加、减、乘、除运算。用户输入两个数字和运算符，程序输出计算结果。
  • 巩固要点：学习如何处理命令行输入、数据类型转换、条件判断语句以及函数的使用。
  • 示例代码片段：
import readline from 'readline';

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

function calculate(num1: number, num2: number, operator: string): number {
    switch (operator) {
        case '+':
            return num1 + num2;
        case '-':
            return num1 - num2;
        case '*':
            return num1 * num2;
        case '/':
            if (num2 === 0) {
                throw new Error('Cannot divide by zero');
            }
            return num1 / num2;
        default:
            throw new Error('Invalid operator');
    }
}

rl.question('Enter the first number: ', (num1Str) => {
    rl.question('Enter the second number: ', (num2Str) => {
        rl.question('Enter the operator (+, -, *, /): ', (operator) => {
            const num1 = parseFloat(num1Str);
            const num2 = parseFloat(num2Str);
            try {
                const result = calculate(num1, num2, operator);
                console.log(`Result: ${result}`);
            } catch (error) {
                console.error(error.message);
            }
            rl.close();
        });
    });
});
2. 文件管理工具
  • 功能描述：该工具可以实现文件的复制、移动、删除等操作。用户在命令行输入相应的操作指令和文件路径，程序执行对应的操作。
  • 巩固要点：掌握文件系统操作、错误处理以及命令行参数的解析。
  • 示例代码片段：
import fs from 'fs';
import path from 'path';

function copyFile(source: string, destination: string) {
    fs.copyFile(source, destination, (err) => {
        if (err) {
            console.error(`Error copying file: ${err.message}`);
        } else {
            console.log('File copied successfully');
        }
    });
}

const sourceFilePath = path.join(__dirname, 'source.txt');
const destFilePath = path.join(__dirname, 'destination.txt');
copyFile(sourceFilePath, destFilePath);

Web 应用类项目

1. 待办事项列表
  • 功能描述：一个简单的网页应用，用户可以添加、删除和标记待办事项。使用 HTML、CSS 和 TypeScript 构建前端界面，通过 DOM 操作实现交互功能。
  • 巩固要点：学习如何操作 DOM 元素、事件处理、数据绑定以及面向对象编程的应用。
  • 示例代码片段：
class TodoItem {
    constructor(public text: string, public completed: boolean = false) {}
}

class TodoList {
    private items: TodoItem[] = [];

    addItem(text: string) {
        const newItem = new TodoItem(text);
        this.items.push(newItem);
    }

    removeItem(index: number) {
        this.items.splice(index, 1);
    }

    getItems() {
        return this.items;
    }
}

const todoList = new TodoList();
todoList.addItem('Buy groceries');
console.log(todoList.getItems());
2. 简单的图片画廊
  • 功能描述：展示一组图片的网页应用，用户可以切换图片、查看图片详情。利用 HTML、CSS 进行页面布局，TypeScript 实现图片切换逻辑。
  • 巩固要点：掌握事件监听、数组操作和异步加载图片的处理。
  • 示例代码片段：
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;

function showImage(index: number) {
    const imgElement = document.getElementById('gallery-image') as HTMLImageElement;
    imgElement.src = images[index];
}

function nextImage() {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
}

document.getElementById('next-button')?.addEventListener('click', nextImage);
showImage(currentIndex);

数据处理类项目

1. 学生成绩管理系统
  • 功能描述：可以添加学生信息和成绩，计算平均分、排名等。使用数组和对象来存储学生数据，通过函数实现各种计算功能。
  • 巩固要点：加深对数组、对象操作的理解，掌握函数封装和数据处理逻辑。
  • 示例代码片段：
class Student {
    constructor(public name: string, public scores: number[]) {}

    getAverageScore() {
        const total = this.scores.reduce((sum, score) => sum + score, 0);
        return total / this.scores.length;
    }
}

const students: Student[] = [
    new Student('Alice', [80, 90, 75]),
    new Student('Bob', [60, 70, 85])
];

students.forEach(student => {
    console.log(`${student.name}'s average score: ${student.getAverageScore()}`);
});
2. 天气数据解析器
  • 功能描述：从 JSON 格式的天气数据中提取有用信息，如温度、湿度等，并进行简单的统计分析。
  • 巩固要点：学习 JSON 数据的解析和处理，以及数据筛选和计算。
  • 示例代码片段：
const weatherData = {
    "city": "Beijing",
    "temperatures": [20, 22, 25, 23],
    "humidity": [60, 65, 70, 62]
};

function getAverageTemperature() {
    const total = weatherData.temperatures.reduce((sum, temp) => sum + temp, 0);
    return total / weatherData.temperatures.length;
}

console.log(`Average temperature in ${weatherData.city}: ${getAverageTemperature()}°C`);

相关文章：

  • [Android]浏览器下载的apk文件无法识别无法安装问题
  • 抓包工具 wireshark
  • JavaScript 语言基础之标签语句
  • centos7安装python3.11
  • ASP.NET Core 简单文件上传
  • 科技快讯 | DeepSeek推出NSA加速长上下文训练，xAI Grok系列将陆续开源，月之暗面发布Kimi Latest新模型
  • 基于SpringBoot的智慧家政服务平台系统设计与实现的设计与实现(源码+SQL脚本+LW+部署讲解等)
  • Flowmix/Docx 多模态文档编辑器：新增【操作留痕】功能，让文档编辑有迹可循！...
  • Mac【卸载 Python】 - 3.12.2
  • C++多项式Lasso回归(多变量函数拟合）
  • 使用权威的文件及磁盘擦除工具，避免不安全的文件删除带来的风险
  • 【量化策略】布林带突破策略
  • Upwork技能测试：是否值得参加？
  • 【gitlab】认识 持续集成与部署
  • 深入理解HttpSecurity的设计
  • 复习dddddddd
  • kafka-集群缩容
  • Helix——Figure 02发布通用人形机器人控制的VLA：一组神经网络权重下的快与慢双系统，让两个机器人协作干活
  • 网络空间安全（1）web应用程序的发展历程
  • 【Python爬虫(38)】解锁Scrapy - Redis：构建高效分布式爬虫
  • 营销型网站与普通网站的区别/seo优化案例
  • 做卡盟网站/2022近期时事热点素材
  • 全国工商网/谷歌seo推广公司
  • 营销型网站 财务咨询公司/网络营销乐云seo
  • 推广app网站/正规手游代理平台有哪些
  • 长沙招聘网58同城/seo搜索是什么