TypeScript基础傻瓜式教程，轻松上手

ypeScript 是一种由微软开发的编程语言，它在 JavaScript 的基础上增加了静态类型和其他许多特性，旨在帮助开发人员更早地捕获错误并使代码更加健壮。本教程将带你快速了解 TypeScript 的基础内容，通过简单易懂的实例，让你轻松上手。

一、什么是 TypeScript？

TypeScript 是 JavaScript 的超集，这意味着你可以在 TypeScript 中编写任何 JavaScript 代码，但它还添加了一些 JavaScript 没有的特性，比如类型系统和现代 ECMAScript 的更多高级功能。

二、安装 TypeScript

在我们开始之前，需要在本地安装 TypeScript。你可以使用 npm（Node.js 包管理器）来完成这一步：

npm install -g typescript

安装完成后，可以使用以下命令来检查版本：

tsc --version

三、创建第一个 TypeScript 文件

在你的项目目录中创建一个名为 hello.ts 的文件：

// hello.ts
const greeting: string = 'Hello, TypeScript!';
console.log(greeting);

编译 TypeScript 文件：

tsc hello.ts

运行编译后的 JavaScript 文件：

node hello.js

你会看到 Hello, TypeScript! 被打印到控制台上。

四、基础类型

TypeScript 提供了许多基础类型，包括如下几种：

1. 字符串 (String)

let name: string = 'TypeScript';
console.log(`Hello, ${name}`);

2. 数字 (Number)

let age: number = 25;
console.log(`Age: ${age}`);

3. 布尔 (Boolean)

let isLearning: boolean = true;
console.log(`Is learning TypeScript: ${isLearning}`);

五、接口 (Interface)

接口用于定义对象的结构，是 TypeScript 中非常强大的一个特性。

interface Person {
    firstName: string;
    lastName: string;
    age: number;
}

const student: Person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 20
};

console.log(`Student: ${student.firstName} ${student.lastName}, Age: ${student.age}`);

六、类 (Class)

TypeScript 中的类帮助你更好地组织和封装代码结构。

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }

    greet(): string {
        return `Hello, ${this.greeting}`;
    }
}

let greeter = new Greeter('World');
console.log(greeter.greet());

七、函数 (Function)

使用 TypeScript 来定义函数时，可以清晰地指定参数和返回值的类型。

function add(x: number, y: number): number {
    return x + y;
}

let result = add(5, 3);
console.log(`Sum: ${result}`);

八、泛型 (Generics)

泛型提供了一种方式，使得函数和类可以处理多种类型，同时提供强类型检查。

function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>('Hello, Generics');
console.log(output);

九、枚举 (Enum)

枚举是一种特殊的 "类"，用来表示一组固定的常量。

enum Color {
    Red,
    Green,
    Blue
}

let c: Color = Color.Green;
console.log(`Color: ${c}`); // 输出: 1

十、模块 (Module)

TypeScript 支持使用 es 模块系统进行模块化开发。

// util.ts
export function print(message: string): void {
    console.log(message);
}

// main.ts
import { print } from './util';

print('Hello from modules');

通过使用模块化，我们可以更好地组织代码，使其更具可维护性和可读性。

总结

TypeScript 的类型系统和其他特性使得开发变得更加可靠和高效。通过本教程，应该能够让你对 TypeScript 有一个基础的了解，并通过实例快速上手。

络编程

随着互联网的快速发展，网络应用程序的需求也越来越高。为了使网页更加丰富有趣，许多网站都开始使用套接字(socket)实现网络的实时通信。而 tcp/ip 协议则常常用于实现此类应用程序。

TCP/IP协议是一种工业标准协议，是互联网使用最广泛的协议之一。它提供了一种在不同的计算机之间进行数据传输的方式。该协议由两个协议组成：TCP和IP。其中TCP协议是面向连接的，可以确保数据的可靠传输。而IP协议则是面向无连接的，能够处理计算机之间的网络路由。

php网络编程

php进行网络编程的方式有很多，比如比较出名的swoole或者workerman框架。但是这些框架对环境有着一定要求，比如swoole就不能在windwos环境下运行。要么只能在服务器上，或者在docker里面运行。这对于敏捷性开发测试来说，都不希望花大量时间来配置环境。

我们本文介绍的几种网络编程，就十分简单。开箱即用。

tcp服务搭建

reactphp

ReactPHP是一个用于PHP中事件驱动编程的低级库。其核心是一个事件循环，在此基础上提供低级实用程序，如：流抽象、异步DNS解析程序、网络客户端/服务器、HTTP客户端/服务器以及与进程的交互。第三方库可以使用这些组件来创建异步网络客户端/服务器等。

github:

https://github.com/reactphp/reactphp

本文搭建的tcp服务，基于ReactPHP来实现。

安装

本文使用windows环境，使用php 8.0.2composer 2.2.6

• 新建一个文件夹 socket-test
• 切换到socket-test文件夹，创建一个composer.json文件。并输入以下内容

{
  "require": {
      "react/socket": "^v1.15.0"   
  }
}

• 在文件夹目录打开命令窗口，输入命令：composer install
• 新建index.php文件。此时目录如下：

• 在 index.php 文件，写入以下代码

require 'vendor/autoload.php';

$loop = React\EventLoop\Loop::get();
//监听8090端口
$socket = new React\Socket\SocketServer('127.0.0.1:8090', [], $loop);

$socket->on('connection', function ($conn) {
    echo "New connection\n";

    // 接收数据
    $conn->on('data', function ($data) use ($conn) {
        echo "Received data: " . $data;

        // 将接收到的数据发送回客户端
        $conn->write($data);
    });

    // 关闭连接处理
    $conn->on('close', function () use ($conn) {
        echo "Connection closed\n";
    });

    // 错误处理
    $conn->on('error', function (\Exception $e) use ($conn) {
        echo "Error: " . $e->getMessage() . "\n";
        $conn->close();
    });
});

$socket->on('error', function (\Exception $e) {
    echo "Error: " . $e->getMessage() . "\n";
});

$loop->run();

• 在命令行执行以下命令，运行服务。 php .\index.php
• 测试连接，利用tcp/udp测试工具，连接刚才监听的端口

收到回复，证明tcp服务是通的，可以进行tcp通讯了，可以愉快的开发自己想要的逻辑了。

websocket服务搭建

cboden/ratchet

cboden/ratchet 用于异步服务WebSockets的PHP库。通过简单的接口构建应用程序，并通过组合不同的组件在不更改任何代码的情况下重用应用程序。

github:

https://github.com/ratchetphp/Ratchet

安装

在上面的基础上，命令行执行以下命令

composer require cboden/ratchet

• 新建websocket文件，并写入以下代码：

<?php
/**
 * Created by PhpStorm.
 * User: MR.Li
 * Date: 2024/5/6
 * Time: 16:35
 */

require 'vendor/autoload.php';


//websocket
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;

class EchoWebSocket implements MessageComponentInterface {
    public function onOpen(ConnectionInterface $conn) {
        // 新连接时会调用
        $conn->send('hello world');
    }

    public function onMessage(ConnectionInterface $conn, $msg) {
        // 收到消息时调用
        $conn->send($msg);
    }

    public function onClose(ConnectionInterface $conn) {
        // 连接关闭时调用
    }

    public function onError(ConnectionInterface $conn, \Exception $e) {
        // 发生错误时调用
        $conn->close();
    }
}

$loop = React\EventLoop\Loop::get();
$webSock = new EchoWebSocket();
$server = IoServer::factory(
    new HttpServer(
        new WsServer($webSock)
    ),
    8090
);

$server->run();

• 在命令行执行以下命令，运行服务。

 php .\websocket.php

测试

• 用 html 搭建一个 websocket 客户端
• 新建一个 webSocketClient.html ,并写入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Go WebSocket Tutorial</title>
</head>
<body>
<h2>Hello World</h2>

<script>

    let socket = new WebSocket("ws://127.0.0.1:8090");
    console.log("Attempting Connection...");

    socket.onopen = () => {
        console.log("Successfully Connected");
        //socket.send('Hi From the Client!')
    };

    socket.onclose = event => {
        console.log("Socket Closed Connection: ", event);
        //socket.send("Client Closed!")
    };

    socket.onerror = error => {
        console.log("Socket Error: ", error);
    };

    socket.onmessage = msg => {
        console.log("Socket getMsg: ", msg);
    };

    /* var int=self.setInterval("clock()",3000);*/
    /*function clock(){
      //  console.log('22222222')
        socket.send("Hi webcoket")
    }*/


</script>
</body>
</html>

• 在浏览器中打开webSocketClient.html。并打开控制面板调试

总结

利用 react/socket 和 cboden/ratchet两个包可以实现简单的 tcp 和 websoket服务搭建，操作简单，傻瓜式教程。让新手小白也能用上高大上的网络编程。不用去安装各种扩展，和环境。

瓜一词借鉴自傻瓜相机，又称轻便相机、全自动相机，通常指容易操作针对一般人而设计的小型全自动相机。

在 HelloGitHub 找到有趣、入门级的开源项目，大家好我是卤蛋。说到搜索第一个想到的应该是鼎鼎大名的 Elasticsearch，但 ES 对于个人项目有些重。

今天给大家带来一款轻盈、人人都会用的开源傻瓜搜索引擎——MeiliSearch

在介绍 MeiliSearch 之前，我想先聊下我是怎么找到它并喜欢上它的。

我的要求并不高

我开发的 HelloGitHub 小程序：支持关键字搜索往期月刊中的开源项目。

小程序的搜索功能是用 Rust 写的开源搜索引擎 Sonic，它虽然搜索速度快但使用过程中发现：

不支持中文分词，导致搜索结果较差
没有官方的 Python 客户端，三方开源客户端问题较多
搜索返回的结果仅有 ID，需要再去数据库关联其他数据

这些问题直接影响了搜索的体验，让我十分苦恼一边看搜索相关的知识，另外也在寻找新的开源解决方案。想找一个：

部署+配置简单、支持中文分词、搜索速度快、轻量级开源搜索引擎项目。

俗称：傻瓜中文搜索引擎。

它有个美丽的名字

它有个“美丽”（meili）的名字「MeiliSearch」，同样是用 Rust 写的开源搜索引擎，支持：

概述功能：搜索速度快、全文搜索、支持汉字、容易安装和维护，这不就是我在找的：傻瓜中文搜索引擎吗？

我已经摩拳擦掌的跃跃欲试了，话不多说搞起！

简单的开始

纸上得来终觉浅，得上手试试效果。

1、安装和启动

Linux & Mac OS 的一键安装和启动的命令：

curl -L https://install.meilisearch.com | sh
./meilisearch

这个安装够不够傻瓜启动成功如下图：

用浏览器访问：http://127.0.0.1:7700/ 就可以看到 MeiliSearch 提供的 Web 搜索页面。我提前写入了一些数据，用来演示搜索：

2、基本操作

MeiliSearch 就是一个搜索的服务，提供 RESTful API 通讯协议更加通用，官方提供了多种编程语言的客户端：

JavaScript
Python
PHP
Go
...

后面的演示将采用 Python 代码作为示例，安装 Python SDK：

# 要求 Python3.6+
pip3/pip install meilisearch

用 Python 实现连接、写入、查询、删除等基本操作：

import meilisearch

client = meilisearch.Client('http://127.0.0.1:7700', 'masterKey') # masterKey 是密码

# index 相当于数据库的表
index = client.index('books')

# 准备写入搜索的数据
documents = [
  { 'book_id': 123,  'title': 'Pride and Prejudice' },
  { 'book_id': 456,  'title': 'Le Petit Prince' },
  { 'book_id': 1,    'title': 'Alice In Wonderland' },
  { 'book_id': 1344, 'title': 'The Hobbit' },
  { 'book_id': 4,    'title': 'Harry Potter and the Half-Blood Prince' },
  { 'book_id': 42,   'title': 'The Hitchhiker\'s Guide to the Galaxy' }
]
# 删：清空指定 index
index.delete_all_documents()

# 写：
result = index.add_documents(documents) 
# 该引擎会根据写入数据 ID 做替换或者新增的操作
# 写入后并不代表搜索引擎处理完成，可以查看返回 updateId 的状态
index.get_update_status(result.get('updateId'))
# enqueued, processed or failed 三种状态（processed 代表完成）

# 查：
index.search('harry pottre')
# 结果：
# 包含丰富的字段
"""
{
  // 命中的结果
  "hits" => [{
    "book_id" => 4,
    "title" => "Harry Potter and the Half-Blood Prince"
  }],
  // 页
  "offset" => 0,
  // 每页条数
  "limit" => 20,
  // 处理耗时
  "processingTimeMs" => 1,
  // 查询的内容
  "query" => "harry pottre"
}
"""

至此已经实现了搜索的最基本的功能，但探索不止于此。

3、优化搜索效果

MeiliSearch 可通过配置规则来提高搜索结果：

synonyms：同义词
stopWords：停用词（为节省存储空间和提高搜索效率，自动过滤掉某些字或词）
rankingRules：排序规则
...

可以用 Python 客户端更新 MeiliSearch 配置，示例代码：

# 停用词
client.index('movies').update_settings({
  'stopWords': [
      'the',
      'a',
      'an'
  ],
})
# 排序规则
client.index('movies').update_ranking_rules([
    "typo",
    "words",
    "proximity",
    "attribute",
    "wordsPosition",
    "exactness",
    "asc(publish_time)",
    "desc(watch)"
])
# 查看 stop words
client.index('movies').get_stop_words()
# 重置设置
# index.reset_settings()
# 除了搜索其它操作都是异步，会直接返回一个 updateId 需要通过 ID 查询处理状态
# wait_for_pending_update 可阻塞等待处理结果

这些设置可以有效的提高搜索效果，比如使用停用词之前，搜索“开源的书籍”命中不了“开源书籍”，加了停用词即可命中，因为匹配时忽略了输入内容包含的停用词（无用词）。

说一个我遇到的坑，我测试搜索效果时发现：go 搜不到，但是 golang 就可以搜索到，排查了半天最后发现是因为 go 在上面的停用词字典中

另外，功能上对比 sonic 没有词联想（suggest），可以通过新建 index+searchableAttributes 实现。

同义词集合我没有找到，如果大家有现成的中/英文同义词词典，欢迎留言告诉我～感谢

4、部署

MeiliSearch 部署很简单，增加到系统的 systemd 服务就行了。

cat << EOF > /etc/systemd/system/meilisearch.service
[Unit]
Description=MeiliSearch
After=systemd-user-sessions.service

[Service]
Type=simple
ExecStart=/usr/bin/meilisearch --http-addr 127.0.0.1:7700 --env production --master-key xxxxxx

[Install]
WantedBy=default.target
EOF

# Set the service meilisearch
systemctl enable meilisearch

# Start the meilisearch service
systemctl start meilisearch

# Verify that the service is actually running
systemctl status meilisearch

但部署正式环境，需要注意以下几点：

生产环境必须设置密码，开发环境无强制
生产环境 Web 页面会关闭
没有远程访问和权限控制，可以通过 Nginx 实现 IP 白名单+ Cerbot 实现 HTTPS，提高安全性
可通过 curl 地址查看服务状态

以上就是我使用 MeiliSearch 的一些心得，总体给我的感觉：

安装简单，没有复杂的配置：省心
数据写入方便，功能丰富：傻瓜
查询快

一条命令即可启动搜索服务，一行代码实现搜索功能，有了它我这个搜索小白都能分分钟实现一个搜索服务，舒服～

爱的结晶（实战）

我用 MeiliSearch 重写了 HelloGitHub 小程序的搜索功能，后端用的 FastAPI 框架。除此之外还增加了一些新功能：

热门搜索词
项目详情页
项目镜像地址提高访问速度
新的界面

HelloGitHub 小程序第二版效果图如下：

后面计划增加：信息流、评论、打分、用户系统、积分系统，因为只有我一个人开发，所以进度会很慢...但我不会半途而废哒

最后

如果说 MeiliSearch 缺点的话，我觉得搜索准确度还有待提高，一方面我需要学习下分词和 NLP 的一些知识，另一方面需要再熟悉下它的 API 和原理，然后再找一些词典辅助，应该能提高准确度，但心急吃不了热豆腐慢慢来吧。

最后，希望本文的分享有帮助到你，今天的文章就到这里了。

优秀的开源项目像散落在海边的贝壳，需要发现它的人。
HelloGitHub 就是拾贝者，找开源项目来 HelloGitHub 就对了！

在线咨询

上一篇：为什么要学习HTML？HTML会过时吗？
下一篇：JavaScript-打开新页面的方法？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商