快速开始

环境安装

为了学习使用 TypeScript,你首先要把 TypeScript 编译工具安装到你的本地环境中。打开终端执行以下命令:

npm install -g typescript

Tips:如果你无法使用 npm 命令,请确保你本地已安装了 Node 环境。Mac 电脑可能会需要用到 sudo 命令。

安装完成后,你可以通过 tsc -v 命令进一步确认 TypeScript 是否成功安装。正常情况下,它将输出你当前安装的 TypeScript 版本信息。

编写代码

环境准备就绪后,你可以尝试打开编辑器新建一个如下内容的 greet.ts 文件:

function greet(what) {console.log(`hello ${ what }`);
}greet("world");

然后将终端命令行切换到该文件目录下,执行 tsc greet.ts 编译命令。如果你是首次编译该文件,目录里会输出一个同名的 greet.js 文件。否则,编译器将更新该文件。

类型注解

或许你注意到了,上面的代码和 JavaScript 是一样的。接下来让我们更新一下这个文件:

function greet(what: string) {console.log(`hello ${ what }`);
}greet({ name: "world" });

你这里看到的 what: string 是 TypeScript 独有的一种写法,被称为类型注解。它是一种轻量级的为函数或变量添加约束的方式,语法结构为 <target>:<type>,其中 targert 是约束目标,可以是对象、函数等任意 JavaScript 值。

类型约束

重新编译这个更新后的文件,你会看到编译器终端向你报告了一个错误。

Argument of type '{ name: string; }' is not assignable to parameter of type 'string'.

这就是 TypeScript 为 JavaScript 提供的功能——类型约束。

现在我们假定 greet() 是一个第三方提供的 api,你无法对它做出修改。为了修复上面的编译错误,你必须给 greet() 传入一个 string 类型的参数。

当然,如果情况允许你修改 greet() 的定义,你可以重构 greet() 如下:

function greet(what: { name: string }) {console.log(`hello ${ what.name }`);
}

现在,greet({ name: "world" }) 就不会编译出错了。

约束变量

类似地,你也可以在变量声明的时候,为变量添加类型上的使用契约。

let isOk: boolean;
let student: {name: string;age: number;
};

这样之后,你就不能随便地为变量赋值,赋值必须符合定义的类型结构。

isOk = true; // Okaystudent = { name: "小明" }; // Error
student = { name: "小明", age: 20 }; // Okay

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/906645.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

导入SpaceClaim的iges模型尺寸被放大1000倍的问题

ANSYS APDL 和 Workbench 联合仿真中,导入 Workbench 的 iges 模型尺寸被放大1000倍问题的解决方案问题 ANSYS APDL 和 Workbench 联合仿真时,导入 SpaceClaim 的 .iges 模型尺寸被放大 1000 倍数。 如 APDL 生成的尺寸为 10 mm(注:此处的 mm 是在 APDL 编码中设置的一致单…

Linux的vim编辑器

Linux的vi/vim编辑器 命令模式 编辑模式 输入模式 vi/ vim编辑器的基本操作Linux的vi/vim编辑器基本概念:vim文本编辑器,是由vi编辑器发展演变过来的文本编辑器,因其具有使用简单、功能强大、是 Linux 众多发行版的默认文本编辑器。很多人习惯将 vim 称为 vi,其实 vim 是 v…

高度场流体模拟

【USparkle专栏】如果你深怀绝技,爱“搞点研究”,乐于分享也博采众长,我们期待你的加入,让智慧的火花碰撞交织,让知识的传递生生不息!一、原理参考这个论文:《Real-time Simulation of Large Bodies of Water with Small Scale Details》 核心是这两个公式: 我在这篇《…

Navicat将微软数据库MS-SQLServer表内容导入MySQL数据库

前言全局说明一、说明 1.1 环境: Windows 7 旗舰版 MSSQL 2012 Navicat for MySQL 10.1.7二、MySQL准备 用 Navicat 在 mysql 新建数据库,要和 MSSQL 数据库同名注意:编码也要一致2.1 mysql 新建数据 空白处新,建 test 数据库,2.2 数据库右键查看在mysql里新建数据库编码三…

深度解析:通过 AIBrix 多节点部署 DeepSeek-R1 671B 模型

本文详细介绍了如何通过 AIBrix 分布式推理平台实现 DeepSeek-R1 671B 的多节点部署。DeepSeek-R1 通过渐进式训练框架展现出优秀的逻辑推理能力 —— 在 6710 亿总参数量中,其动态激活的 370 亿参数与 128k 上下文窗口,使其在复杂任务处理中表现卓越。然而,如此庞大的模型规…

玄机靶场 第一章 应急响应-webshell查杀

玄机靶场 第一章 应急响应-webshell查杀 1.黑客webshell里面的flag flag2. 黑客使用的什么工具的shell github地址的md5 flag 哥斯拉webshell的特征3.黑客隐藏shell的完整路径的md5 flag{md5} 注 : /xxx/xxx/xxx/xxx/xxx.xxx 发现隐藏4.黑客免杀马完整路径 md5 flag 查看这是一…

玄机靶场 第一章 应急响应-Linux日志分析

玄机靶场 第一章 应急响应-Linux日志分析 1.有多少IP在爆破主机ssh的root帐号,如果有多个使用","分割 /var/log/auth.log里面存放了相关的登录信息 直接下载看根据user=root发现三个ip 网上发现神奇妙妙脚本 cat auth.log.1 | grep -a "Failed password for ro…

【每日一题】20250327

改变不了的事,不值得烦恼。【每日一题】 1.(15分) \(\hspace{0.7cm}\)已知数列 \(\{a_n\}\),\(\{b_n\}\) 和 \(\{c_n\}\) 满足: \[a_{n+1}=\frac14b_n \]\[b_{n+1}=a_n+c_n+\frac12b_n \]\[c_{n+1}=\frac14b_n \]且 \(a_n+b_n+c_{n}=1\),\(a_1=0\),\(b_1=1\),\(\displa…

必看!SpringAI轻松构建MCP Client-Server架构

MCP 这个概念相信大家已经听了无数次了,但不同人会有不同的解释,你可能也是听得云里雾里的。 不过没关系,今天这篇内容会通过 Spring AI 给你实现一个 MCP 的 Client 和 Server 架构,让你彻底搞懂 MCP 的概念,以及学会 MCP 的开发技能。 什么是MCP? MCP 是 Model Context…

国产服务器操作系统CTyunOS,技能值拉满!

新一轮科技革命和产业变革深入发展,数字经济迎来新的发展机遇。其中,以操作系统为代表的关键基础软件是新一代信息技术的灵魂,它不仅构筑起信息技术领域的根基磐石,更在守护关键信息基础设施的安全防线、实现核心技术自主可控中,发挥着不可替代的作用。 作为云服务国家队…

CSS 实现自定义滚动条样式

CSS 实现自定义滚动条样式CSS 实现自定义滚动条样式 要兼容主流浏览器(Chrome、Safari、Edge、Firefox 等),需要综合使用 Webkit 的 ::-webkit-scrollbar 伪元素和 Firefox 支持的 scrollbar-width 以及 scrollbar-color 属性。由于目前主流浏览器中只有 Webkit 内核和 Fire…

重置OpenEuler操作系统的root管理员密码

(1)启动OpenEuler系统或在终端执行重启系统命令reboot,在系统引导界面按“e”键进入内核编辑界面。成功进入内核编辑模式界面,要求输入username,这里输入root,然后要求输入密码,默认密码为openEuler#12。(2)用户名和密码输入正确后进入引导编辑界面:(3)按向下光标,…