TypeScript 快速实战系列:基础入门|TypeScript 核心语法 1 小时吃透(必备基础)

🔥 导读:上一篇我们搞定了TS环境搭建,也搞懂了为什么大模型开发必须学TS。今天这篇,不搞复杂理论,只讲大模型开发中「最常用、最核心」的TS语法------基础类型+类型注解,1小时就能吃透,学完就能给大模型API参数、返回值做类型定义,彻底告别"参数传错"的坑!

适合人群:零基础、前端/AI开发新手,全程实战,每一行代码都能直接复制运行,结合大模型场景讲解,不学没用的语法。

一、先搞懂:TS与JS的核心区别(一句话说透)

很多人分不清TS和JS的关系,其实很简单:

TypeScript = JavaScript + 类型系统

也就是说,所有JS代码都是合法的TS代码,但TS多了"类型约束"------你可以给变量、函数参数、返回值定义"类型",告诉TS这个值应该是什么样子,写错了就会直接报错。

举个大模型开发中的例子:

// JS代码:没有类型约束,传错类型也不报错(运行时才崩)

const temperature = "0.7"; // 应该是数字,却传了字符串

// TS代码:有类型约束,传错类型直接报错(写代码时就提醒)

const temperature: number = "0.7"; // 报错:类型"string"不能赋值给类型"number"

这就是TS的核心价值------提前规避错误,尤其在大模型API调用中,参数类型繁多,有了类型约束,能少踩很多坑。

二、大模型开发最常用的5种基础类型(必记)

TS的基础类型有很多,但大模型开发中,常用的只有5种,记住它们,就能搞定80%的基础场景,不用记所有类型!

1. 字符串类型(string)

用途:大模型API密钥(apiKey)、模型名称(model)、对话内容(content)、请求地址(url)等,都是字符串类型。

// 语法:变量名: 类型 = 值

const apiKey: string = "sk-xxxxxxxxxxxxxxxx"; // 大模型API密钥

const model: string = "qwen-max"; // 通义千问模型名称

const userContent: string = "用TS写一个大模型调用函数"; // 用户对话内容

2. 数字类型(number)

用途:大模型的temperature(温度,0~2)、max_tokens(最大生成 tokens 数)、top_p等参数,都是数字类型。

const temperature: number = 0.7; // 控制生成内容的随机性

const maxTokens: number = 1000; // 最大生成 tokens 数

const topP: number = 0.9; // 控制生成内容的多样性

3. 布尔类型(boolean)

用途:大模型的stream(流式输出,true/false)、是否开启调试模式等,都是布尔类型。

const stream: boolean = true; // 开启流式输出(打字机效果)

const debug: boolean = false; // 关闭调试模式

4. 任意类型(any)

用途:临时不确定类型的值(比如大模型返回的复杂数据,暂时不知道结构),但尽量少用------用多了就失去了TS的类型约束意义,是大模型开发中最容易踩的坑。

// 临时使用,尽量避免

let llmResponse: any = {}; // 暂时不知道返回结构,先用any

⚠️ 避坑提醒:如果长期用any定义大模型返回值,就等于放弃了TS的智能提示和类型校验,和用JS没区别,后续会踩更多坑。

5. 未知类型(unknown)

用途:替代any的"安全版本",当你不确定类型时,用unknown比any更安全------unknown类型的值,不能直接使用,必须先判断类型,才能操作。

let llmResponse: unknown = "hello world";

// 不能直接使用,必须先判断类型

if (typeof llmResponse === "string") {

console.log(llmResponse.length); // 此时确定是string类型,才能调用length

}

大模型开发中,接收API返回值时,用unknown比any更安全,避免误操作。

三、核心语法:类型注解(大模型开发必用)

类型注解就是"给变量、函数参数、返回值贴标签",告诉TS它们的类型,语法非常简单:标识符: 类型

下面结合大模型开发场景,讲解3种最常用的类型注解,学完就能直接用。

1. 变量的类型注解(最基础)

就是给变量定义类型,前面讲基础类型时已经用过了,再汇总一个大模型场景的示例:

TypeScript 复制代码
// 大模型请求相关变量的类型注解
const apiKey: string = "sk-xxxxxxx";
const model: string = "gpt-3.5-turbo";
const temperature: number = 0.7;
const stream: boolean = true;
const baseUrl: string = "https://api.openai.com/v1/chat/completions";

这样定义后,只要给这些变量赋值错误的类型,TS就会直接报错,提前规避问题。

2. 函数参数的类型注解

大模型开发中,我们会写很多调用API的函数,给函数参数加类型注解,能避免传错参数类型。

TypeScript 复制代码
// 示例:定义一个大模型请求参数的函数
function getLlmParams(
  model: string, // 模型名称:字符串类型
  temperature: number, // 温度:数字类型
  stream: boolean // 流式输出:布尔类型
) {
  return {
    model,
    temperature,
    stream,
    messages: [], // 后续会讲,暂时空数组
  };
}

// 正确调用:参数类型匹配
getLlmParams("qwen-max", 0.7, true);

// 错误调用:temperature传了字符串,直接报错
getLlmParams("qwen-max", "0.7", true); // 报错:类型"string"不能赋值给类型"number"

3. 函数返回值的类型注解

给函数返回值加类型注解,能明确函数返回的是什么类型,方便后续使用,也能避免函数返回错误的值。

TypeScript 复制代码
// 定义函数返回值类型:对象类型(后续会详细讲,这里先了解)
function getLlmParams(
  model: string,
  temperature: number,
  stream: boolean
): { model: string; temperature: number; stream: boolean; messages: [] } {
  return {
    model,
    temperature,
    stream,
    messages: [],
  };
}

// 调用函数,能明确知道返回的结构和类型
const params = getLlmParams("qwen-max", 0.7, true);
console.log(params.model); // 智能提示:model是string类型

四、实战小任务:定义一个「大模型请求配置」类型变量

学完上面的内容,我们来做一个实战小任务,直接贴合大模型开发场景,巩固今天的知识点------定义一个完整的大模型请求配置变量,包含所有常用参数。

TypeScript 复制代码
// 实战:定义大模型请求配置
const llmConfig: {
  apiKey: string;
  model: string;
  temperature: number;
  stream: boolean;
  maxTokens: number;
  baseUrl: string;
} = {
  apiKey: "sk-xxxxxxxxxxxxxxxx",
  model: "gpt-3.5-turbo",
  temperature: 0.7,
  stream: true,
  maxTokens: 1000,
  baseUrl: "https://api.openai.com/v1/chat/completions",
};

// 打印配置,验证是否正确
console.log("大模型请求配置:", llmConfig);

将这段代码复制到index.ts文件中,用ts-node index.ts运行,能正常打印配置,就说明你掌握了今天的知识点!

五、避坑指南:大模型开发中,TS最容易踩的坑

  1. 滥用any类型:这是最常见的坑,很多人觉得any方便,什么都用any,结果失去了TS的类型约束,和用JS没区别;

  2. 忽略类型报错:写代码时,TS提示类型错误,觉得"能运行就行",强行忽略,后续会出现各种诡异的bug;

  3. 给变量赋值错误类型:比如把大模型的temperature赋值为字符串,虽然JS能运行,但TS会报错,一定要按照定义的类型赋值。

六、本篇总结+下一篇预告

✅ 核心收获:掌握了大模型开发最常用的5种基础类型,学会了变量、函数参数、返回值的类型注解,能独立定义大模型请求配置变量;

❌ 避坑提醒:少用any类型,重视TS的类型报错,养成"先定义类型,再写代码"的习惯;

📌 下一篇预告:《核心进阶|Interface + Type:大模型开发神器》,带你学会用Interface和Type定义复杂的大模型请求/返回类型,彻底解决"返回值字段找不到"的问题,直接搞定80%的LLM开发TS需求!

💡 评论区互动:今天的语法你学会了吗?试着自己写一个大模型请求配置变量,留言贴出你的代码,一起交流进步~

相关推荐
喂哟咦21 分钟前
关于用codex两周写了一个epub阅读器这件事
前端·javascript
CDwenhuohuo35 分钟前
前端文件预览
开发语言·前端·javascript
Restart-AHTCM1 小时前
AI 时代的大前端崛起,TypeScript 重塑前端开发
前端·人工智能·typescript·ai编程·a
008爬虫实战录1 小时前
【最新猿人学】 验证码 - 图文点选 文字验证码识别
前端·javascript
一袋米扛几楼981 小时前
【报错问题】解决 Vercel 部署报错:Express 类型失效与 TypeScript 2349/2339/2769 错误排查
ubuntu·typescript·express
一叶飘零晋1 小时前
【(一)Electron 使用之如何用vite+vue3搭建初始框架】
前端·javascript·electron
恶猫2 小时前
网页自动化模拟操作时,模拟真实按键触发事件【终级方案】
前端·javascript·自动化·vue·网页模拟
ZC跨境爬虫3 小时前
跟着 MDN 学 HTML day_2:(表单分组与高级输入控件实战)
前端·javascript·css·ui·html
千寻girling3 小时前
滑动窗口刷了快一个月(26天)了 , 还没有刷完. | 含(操作系统学什么的Java 后端)
java·开发语言·javascript·c++·人工智能·后端·python
一袋米扛几楼984 小时前
【报错问题】彻底解决 TypeScript 报错 TS2769: No overload matches this call (JWT 篇)
linux·javascript·typescript