【TypeScript 从零实现 axios】1.3 编写第一个 TypeScript 程序

起步

在编辑器,将下面的代码输入到 greeter.ts 文件里,可以看出来和平时写的 js 文件没有区别,因为ts是js的超集。

function greeter (person) {return 'Hello, ' + person
}let user = 'Ts'console.log(greeter(user))

编译代码

我们使用了 .ts 扩展名,但是这段代码仅仅是 JavaScript 而已。

在命令行上,运行 TypeScript 编译器:

tsc greeter.ts

输出结果为一个 greeter.js 文件,它包含了和输入文件中相同的 JavsScript 代码。

在命令行上,通过 Node.js 运行这段代码:

node greeter.js

控制台输出:

Hello, Ts

类型注解

接下来让我们看看 TypeScript 工具带来的高级功能。 给 person 函数的参数添加 : string 类型注解,如下:

function greeter (person: string) {return 'Hello, ' + person
}let user = 'Yee'console.log(greeter(user))

TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式。 在这个例子里,我们希望 greeter 函数接收一个字符串参数。 然后尝试把 greeter 的调用改成传入一个数组:

function greeter (person: string) {return 'Hello, ' + person
}let user = [0, 1, 2]console.log(greeter(user))

重新编译,你会看到产生了一个错误:

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

类似地,尝试删除 greeter 调用的所有参数。 TypeScript 会告诉你使用了非期望个数的参数调用了这个函数。

error TS2554: Expected 1 arguments, but got 0.

在这两种情况中,TypeScript提供了静态的代码分析,它可以分析代码结构和提供的类型注解。

要注意的是尽管有错误,greeter.js 文件还是被创建了。 就算你的代码里有错误,你仍然可以使用 TypeScript。但在这种情况下,TypeScript 会警告你代码可能不会按预期执行。

接口

让我们继续扩展这个示例应用。这里我们使用接口来描述一个拥有 firstNamelastName 字段的对象。 在 TypeScript 里,只在两个类型内部的结构兼容,那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以,而不必明确地使用 implements 语句。

interface Person {firstName: stringlastName: string
}function greeter (person: Person) {return 'Hello, ' + person.firstName + ' ' + person.lastName
}let user = {firstName: 'Yee',lastName: 'Huang'
}console.log(greeter(user))

最后,让我们使用类来改写这个例子。 TypeScript 支持 JavaScript 的新特性,比如支持基于类的面向对象编程。让我们创建一个 User 类,它带有一个构造函数和一些公共字段。因为类的字段包含了接口所需要的字段,所以他们能很好的兼容。

还要注意的是,我在类的声明上会注明所有的成员变量,这样比较一目了然。

class User {fullName: stringfirstName: stringlastName: stringconstructor (firstName: string, lastName: string) {this.firstName = firstNamethis.lastName = lastNamethis.fullName = firstName + ' ' + lastName}
}interface Person {firstName: stringlastName: string
}function greeter (person: Person) {return 'Hello, ' + person.firstName + ' ' + person.lastName
}let user = new User('Yee', 'Huang')console.log(greeter(user))

重新运行 tsc greeter.ts,你会看到 TypeScript 里的类只是一个语法糖,本质上还是 JavaScript 函数的实现。

总结

到这里,你已经对 TypeScript 有了一个大致的印象,那么下一章让我们来一起学习 TypeScript 的一些常用语法吧。

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

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

相关文章

问题:功夫菜产品的成本由哪几方面构成() #经验分享#其他

问题:功夫菜产品的成本由哪几方面构成() A.材料成本(标准投料2%损耗)包材成本直接人工费固定加工费 B.(材料成本包材成本)*(1加价率) C&#x…

Polar Web 【简单】- 被黑掉的站

Polar Web 【简单】- 被黑掉的站 Contents Polar Web 【简单】- 被黑掉的站思路EXP运行&总结 思路 如题目所述,这是一个被黑掉的站点,由此不禁要了解该黑客发现了哪些可以入手的路径,或是留下了什么样的文件供持续访问。 目录扫描该站点发…

【C++修行之道】类和对象(二)类的6个默认成员函数、构造函数、析构函数

目录 一、类的6个默认成员函数 二、构造函数 2.1 概念 2.2 特性 2.2.5 自动生成默认构造函数 不进行显示定义的隐患: 2.2.6 自动生成的构造函数意义何在? 两个栈实现一个队列 2.2.7 无参的构造函数和全缺省的构造函数都称为默认构造函数&#x…

吃星星(1.5)

吃星星1.5版导航 ★★★★★ 吃星星(1.5)★★★★★ ★★★★该版本简介更新说明★★★★ ★★★分部代码★★★ ★头文件命名空间变量★ ★★结构体★★ ★辅助结构体★ ★角色结构体★ ★星星结构体★ ★打印结构体★ ★加载中结构体★ ★游…

计算机组成原理(一)

冯诺依曼机器的特征: 指令和数据以同等的地位存储在存储器当中指令和数据都是二进制指令和数据都是保存在存储器当中的 存储字 每个存储单元中的数据,称为存储字 存储字长 存储单元能够存储的二进制数据的长度 在一个8位系统中,字长是…

Java——IO流(一)-(1/8):File、IO流概述、File文件对象的创建(介绍、实例演示)

目录 File IO流概述 File文件对象的创建 介绍 实例演示 File 存储数据的方案 变量 double money 9999.5 数组 int[] age new int[100];对象 Student s new Student()集合 List<Student> students new ArrayList<>()…

[office] Excel教学:Excel通配符怎么用? #其他#职场发展

Excel教学&#xff1a;Excel通配符怎么用&#xff1f; 尽管Excel使用了很多年&#xff0c;但很多人都还是忽略了Excel通配符的存在&#xff0c;不知道通配符是什么&#xff0c;不知道如何使用它。今天我就完整地介绍一下通配符&#xff0c;让你彻底地认识通配符。 关于通配符…

递归(全排列andN皇后)

全排列 分治与递归 递归是实现分治的一种方法 思想思路 题目&#xff1a; 全排列i 我这样直接输出会多输出一个空行&#xff08;最后一个\n&#xff09; #include<stdio.h>using namespace std; const int maxn10; int an[maxn]; int n; bool hash[maxn]{0}; int c0…

微服务架构-可见可观测与量化分析体系

目录 一、可见可观测 1.1 概述 1.2 服务可见性 1.2.1 概述 1.2.2 服务描述 1.2.3 服务所有权 1.2.4 服务对外接口 1.2.5 服务SLA 1.2.6 服务的上下游拓扑 1.2.7 服务变更 1.2.8 服务接入和资源配额管理 1.2.9 服务线上部署和线下测试环境信息 1.3 变更可见性 1.4 …

赚钱而已,你又不是宠物,干嘛让所有人都喜欢你?

* 大家好&#xff0c;我是前端队长。前端程序员&#xff0c;2023年开始玩副业。做过AI绘画&#xff0c;公众号 AI 爆文&#xff0c;AI代写项目&#xff0c;累计变现五位数。 — 今天看到一句话说的真好&#xff1a; 太多人总想让别人喜欢自己了。有什么用&#xff0c;你又不是宠…

数据结构和算法一轮

前言 本文参考《2025年数据结构考研复习指导&#xff08;王道论坛组编&#xff09;》和相关文章&#xff0c;为考试前复习而写。 目录 前言 第一章线性表 1.1顺序表 1.2单链表 1.3循环链表 ​1.4双向链表 第二章栈和队列 2.1栈 2.2共享栈 2.3链栈 2.4队列 2.5循环…

%n的作用

%n用于在scanf中用于存储已读取的字符数。 它在printf中不常用&#xff0c;但在scanf中有时很有用。当%n出现在scanf的格式字符串中时&#xff0c;它告诉scanf在成功读取并赋值给前面的变量后&#xff0c;将到目前为止读取的字符数&#xff08;不包括任何由于空白字符、不可转…

训练营第三十一天 | 494.目标和474.一和零动态规划:完全背包理论基础518.零钱兑换II

494.目标和 力扣题目链接(opens new window) 难度&#xff1a;中等 给定一个非负整数数组&#xff0c;a1, a2, ..., an, 和一个目标数&#xff0c;S。现在你有两个符号 和 -。对于数组中的任意一个整数&#xff0c;你都可以从 或 -中选择一个符号添加在前面。 返回可以使…

17_Vue高级监听器生命周期Vue组件组件通信

文章目录 1. 数据监听器watch2. Vue生命周期3. Vue组件4. Vue组件通信Appendix 1. 数据监听器watch 首先watch需要单独引 import {watch} from vuewatch函数监听ref响应式数据 watch(监听的内容&#xff0c;监听行为)监听行为默认为(newValue,oldValue) let firstname ref…

十种排序算法的python实现

排序 1. 冒泡排序&#xff08;Bubble Sort&#xff09; 基本原理&#xff1a; 冒泡排序是一种简单的排序算法&#xff0c;它重复地遍历待排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。遍历数列的工作是重复地进行直到没有再需要交…

技术周总结2024.06.03~06.09(K8S HikariCP数据库连接池)

文章目录 一、06.05 周三1.1) 问题01: 容器领域&#xff0c;Docker与 K8S的区别和联系Docker主要功能和特点&#xff1a;使用场景&#xff1a; Kubernetes (K8S)主要功能和特点&#xff1a;使用场景&#xff1a; 联系和区别联系&#xff1a;区别&#xff1a; 结合使用总结 二、…

【ARM Cache 系列文章 1.2 -- Data Cache 和 Unified Cache 的详细介绍】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 Data Cache and Unified Cache数据缓存 (Data Cache)统一缓存 (Unified Cache)数据缓存与统一缓存的比较小结 Data Cache and Unified Cache 在 ARM架构中&#xff0c;缓存&#xff08…

Attention注意力机制:理论基础、核心架构、应用领域及最新研究动态

Attention机制源于对序列建模中长期依赖关系的有效捕获需求&#xff0c;其理论基础在于让模型动态分配权重以聚焦于输入序列中与当前任务相关的关键部分。核心架构包括Query-Key-Value三元组计算、Softmax归一化的注意力得分、加权求和生成上下文向量&#xff0c;以及扩展至多头…

vue2学习(06)----vuex

目录 一、vuex概述 1.定义 优势&#xff1a; 2.构建环境步骤 3.state状态 4.使用数据 4.1通过store直接访问 4.2通过辅助函数 5.mutations修改数据&#xff08;同步操作&#xff09; 5.1定义 5.2步骤 5.2.1定义mutations对象&#xff0c;对象中存放修改state数据的方…

每日一题——Python实现PAT乙级1037 在霍格沃茨找零钱(举一反三+思想解读+逐步优化)

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 时间复杂度分析&#xff1a; 空间复杂度分析&#xff1a; 我要更强 哲学…