Typescript 类型项目实战入门教程
标签：
Typescript
概述
本文介绍了如何使用Typescript类型项目实战，从项目需求分析到实现功能与代码解析，详细讲解了如何开发一个简单的天气应用，包括项目结构设计和主要功能实现。通过实战案例，读者可以深入了解Typescript在实际项目中的应用。
Typescript 基础概念介绍 什么是 TypescriptTypeScript 是由微软开发的一种开源编程语言，它是 JavaScript 的一个超集，可以在任何支持 JavaScript 的地方运行。TypeScript 语法添加了静态类型检查，允许开发者定义变量、函数参数、返回值等类型，从而在编译阶段就能捕获到类型错误，减少运行时错误。
Typescript 与 JavaScript 的区别语法差异
TypeScript 允许你使用类型注解来定义变量、函数参数和返回值的类型。下面是 JavaScript 和 TypeScript 的一个简单对比：
JavaScript
let name = "Alice";
name = "Bob"; // JavaScript 不会阻止你改变变量的类型TypeScript
let name: string = "Alice";
name = "Bob"; // 允许改变类型
name = 1; // 编译时报错，不允许改变为非string类型静态类型检查
在 TypeScript 中，你可以定义变量和函数的类型，使得编译器可以提前检查代码是否符合预期的类型定义。例如：
function greet(name: string) {
return "Hello, " + name;
}
let result = greet("Alice"); // 正确
let result = greet(123); // 编译时报错- 类型检查：在编译时捕获类型错误。
- 可维护性：静态类型信息使得代码更容易理解和维护。
- 工具支持：许多现代编辑器（如 VSCode）提供了强大的类型检查和自动完成功能。
- 团队协作：统一的类型定义有助于团队成员之间共享和理解代码。
你可以使用 npm（Node.js 的包管理器）来安装 TypeScript。首先需要安装 Node.js 和 npm，然后打开命令行工具，运行以下命令：
npm install -g typescript安装完成后，你可以通过以下命令检查安装是否成功：
tsc -v这将输出 TypeScript 的版本信息。
配置 tsconfig.jsontsconfig.json 是 TypeScript 项目中的配置文件，用于指定编译器选项。创建一个新文件 tsconfig.json，并添加以下内容：
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"outDir": "./dist"
},
"include": ["src"],
"exclude": ["node_modules"]
}这个配置文件指定了以下选项：
target：编译目标（这里设置为 ES6）。module：模块类型（这里设置为 CommonJS）。strict：启用所有严格类型检查。esModuleInterop：允许将 ES6 模块导入到 CommonJS 模块。outDir：输出文件的目录。include：包含的文件夹。exclude：排除的文件夹。
- 创建一个新的文件夹，例如
my-typescript-project，并进入该文件夹。 - 初始化新的 npm 项目：
npm init -y- 安装 TypeScript 作为开发依赖：
npm install typescript --save-dev- 在项目根目录下创建
src文件夹，并在src文件夹内创建一个index.ts文件。 - 在
src/index.ts文件中添加一些简单的 TypeScript 代码，例如：
function add(a: number, b: number): number {
return a + b;
}
console.log(add(1, 2)); // 输出 3- 创建
tsconfig.json文件，并配置如上所述。 - 在命令行中运行以下命令来编译 TypeScript 代码：
npx tsc这将生成编译后的 JavaScript 代码，并存放于 dist 文件夹内。
TypeScript 提供了几种基本类型，包括：
number：表示数字类型（整数或浮点数）。string：表示字符串类型。boolean：表示布尔类型，可以取值true或false。null和undefined：表示特定的值null和undefined。void：表示函数没有返回值。
let myNumber: number = 42;
let myString: string = "Hello, world!";
let myBoolean: boolean = true;
let myNull: null = null;
let myUndefined: undefined = undefined;
let myVoid: void;数组
你可以在 TypeScript 中定义数组类型，例如：
let numbers: number[] = [1, 2, 3];
let strings: string[] = ["a", "b", "c"];
let mixedArray: Array<number | string> = [1, "two", 3, "four"];元组
元组允许你定义一个包含固定数量元素的数组，每个元素可以有不同的类型：
let myTuple: [number, string, boolean];
myTuple = [1, "abc", true];枚举
枚举用于定义一组命名的常量。例如：
enum Color { Red = 0, Green = 1, Blue = 2 };
let c: Color = Color.Red;
console.log(c); // 输出 0类型推论
TypeScript 可以在很多情况下推断变量的类型。例如：
let age = 25; // TypeScript 推断类型为 number
let name = "Alice"; // TypeScript 推断类型为 string类型断言
类型断言允许你临时将一个类型转换为另一个类型。例如：
let someValue: any = "abc";
let strLength: number = (someValue as string).length;你可以为函数的参数和返回值定义类型：
function addNumbers(a: number, b: number): number {
return a + b;
}
let result: number = addNumbers(1, 2); // 正确
let result: string = addNumbers(1, 2); // 编译时报错接口
接口用于定义对象的结构。例如：
interface Point {
x: number;
y: number;
}
let p: Point = { x: 1, y: 2 };类型别名
类型别名允许你为已存在的类型定义一个新的名字：
type Name = string;
type ID = number;
let userName: Name = "Alice";
let userNumber: ID = 123;泛型
泛型允许你编写可重用的函数和类，这些函数和类可以处理多种类型的数据。例如：
function identity<T>(arg: T): T {
return arg;
}
let output: string = identity<string>("abc"); // 输出 "abc"
let output: number = identity<number>(42); // 输出 42类型推断
编译器可以推断泛型的实际类型：
function identity<T>(arg: T): T {
return arg;
}
let output: string = identity("abc"); // 编译器推断类型为 string你可以定义类的属性、方法等，并使用类型注解：
class Rectangle {
width: number;
height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
area(): number {
return this.width * this.height;
}
}
let rectangle = new Rectangle(4, 3);
console.log(rectangle.area()); // 输出 12类可以继承其他类，并实现接口：
interface IShape {
area(): number;
}
class Square extends Rectangle implements IShape {
constructor(width: number) {
super(width, width);
}
}
let square = new Square(4);
console.log(square.area()); // 输出 16类型保护用于确保变量确实是某种特定类型，从而确保可以在安全的情况下调用该类型的方法或属性：
function isSquare(shape: IShape): shape is Square {
return (shape as Square).width === (shape as Square).height;
}
if (isSquare(square)) {
console.log(square.area()); // 输出 16
}假设你需要开发一个简单的天气应用，它可以从 API 获取当前天气信息并显示在网页上。
主要功能
- 从 API 获取天气数据。
- 显示当前温度、湿度等信息。
- 支持用户输入城市名称查询天气。
项目结构如下：
my-weather-app/
├── src/
│ ├── index.ts
│ ├── api.ts
│ ├── models/
│ │ ├── City.ts
│ │ ├── Weather.ts
│ ├── utils/
│ │ ├── request.ts
├── tsconfig.json
└── package.json主要文件说明
index.ts：主入口文件，负责启动应用。api.ts：封装 API 请求相关的逻辑。models/：存放数据模型，例如City和Weather。utils/：存放工具函数，例如request.ts。
models/City.ts
定义城市模型：
export interface City {
id: number;
name: string;
country: string;
}models/Weather.ts
定义天气模型：
export interface Weather {
temperature: number;
humidity: number;
description: string;
}utils/request.ts
封装 HTTP 请求逻辑：
import { City } from '../models/City';
async function fetchCity(id: number): Promise<City> {
const response = await fetch(`https://api.example.com/city/${id}`);
const data = await response.json();
return data;
}
async function fetchWeather(cityId: number): Promise<Weather> {
const response = await fetch(`https://api.example.com/weather/${cityId}`);
const data = await response.json();
return data;
}
export { fetchCity, fetchWeather };api.ts
封装 API 调用：
import { fetchCity, fetchWeather } from '../utils/request';
import { City, Weather } from '../models';
async function getWeatherForCity(cityName: string): Promise<Weather> {
const city = await fetchCityByName(cityName);
const weather = await fetchWeather(city.id);
return weather;
}
async function fetchCityByName(name: string): Promise<City> {
// 实际应用中需要根据 API 返回的数据解析城市信息
return { id: 1, name: "New York", country: "USA" };
}
export { getWeatherForCity };index.ts
主入口文件，启动应用：
import { getWeatherForCity } from './api';
import { Weather } from './models/Weather';
async function main() {
const weather = await getWeatherForCity("New York");
console.log(`Temperature: ${weather.temperature}°C`);
console.log(`Humidity: ${weather.humidity}%`);
console.log(`Description: ${weather.description}`);
}
main();为了将天气数据展示到网页上，可以使用 HTML 和 JavaScript 来实现。以下是简单的 HTML 结构和 JavaScript 代码示例：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
</head>
<body>
<div id="weather-info">
<p>Temperature: <span id="temperature"></span>°C</p>
<p>Humidity: <span id="humidity"></span>%</p>
<p>Description: <span id="description"></span></p>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="dist/index.js"></script>
</body>
</html>index.ts
修改 index.ts 以将天气信息显示到网页上：
import { getWeatherForCity } from './api';
import { Weather } from './models/Weather';
async function main() {
const weather = await getWeatherForCity("New York");
displayWeather(weather);
}
function displayWeather(weather: Weather) {
document.getElementById("temperature")!.textContent = `${weather.temperature}`;
document.getElementById("humidity")!.textContent = `${weather.humidity}`;
document.getElementById("description")!.textContent = weather.description;
}
main();通过以上步骤，你可以使用 TypeScript 开发一个简单的天气应用，从 API 获取天气数据，并显示在网页上。你可以根据需要进一步扩展功能，例如允许用户输入不同的城市名称来查询天气。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦