TypeScript 语言实战项目：从入门到项目实践
TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，添加了静态类型检查和基于类的面向对象编程特性。TypeScript 在大型项目中尤其受欢迎，因为它能够帮助开发者减少运行时错误，提高代码的可维护性和可读性。本文将围绕 TypeScript 语言，通过一个实战项目，从入门到项目实践，带你深入了解 TypeScript 的应用。
一、TypeScript 入门
1.1 TypeScript 简介
TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查、接口、类、模块等特性。TypeScript 的目标是让 JavaScript 开发更加高效、安全。
1.2 TypeScript 安装
我们需要安装 TypeScript 编译器。可以通过以下命令进行安装：
bash
npm install -g typescript
1.3 TypeScript 基础语法
1.3.1 声明变量
在 TypeScript 中，变量声明需要指定类型：
typescript
let age: number = 18;
1.3.2 接口
接口用于定义对象的形状：
typescript
interface Person {
name: string;
age: number;
}
1.3.3 类
TypeScript 支持面向对象编程，类是面向对象编程的基本单位：
typescript
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
sayHello(): void {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
二、实战项目：待办事项列表
2.1 项目需求
本项目将实现一个简单的待办事项列表，用户可以添加、删除待办事项，并查看所有待办事项。
2.2 项目结构
todo-list/
├── src/
│ ├── index.ts
│ ├── models/
│ │ └── todo.ts
│ ├── views/
│ │ └── todoList.tsx
│ └── utils/
│ └── todoService.ts
├── package.json
└── tsconfig.json
2.3 实现步骤
2.3.1 创建项目
创建一个新目录，并初始化 npm 项目：
bash
mkdir todo-list
cd todo-list
npm init -y
2.3.2 安装依赖
安装 React 和 React DOM：
bash
npm install react react-dom
2.3.3 编写代码
1. models/todo.ts：定义待办事项的接口。
typescript
export interface Todo {
id: number;
text: string;
completed: boolean;
}
2. views/todoList.tsx：实现待办事项列表的视图。
typescript
import React, { useState } from 'react';
import { Todo } from '../models/todo';
import TodoService from '../utils/todoService';
const TodoList: React.FC = () => {
const [todos, setTodos] = useState([]);
const addTodo = (text: string) => {
const newTodo: Todo = {
id: todos.length,
text,
completed: false,
};
setTodos([...todos, newTodo]);
};
const removeTodo = (id: number) => {
setTodos(todos.filter((todo) => todo.id !== id));
};
return (
Todo List
{todos.map((todo) => (
{todo.text}
removeTodo(todo.id)}>Delete
))}
{
if (e.key === 'Enter') {
addTodo(e.target.value);
e.target.value = '';
}
}} />
Comments NOTHING