ts是什么

简介: VSCode提示例如:定义者指定了一个方法:export function foo(name: string): number {return name.length}

VSCode提示


例如:定义者指定了一个方法:

export function foo(name: string): number {
return name.length
}


那么作为使用者, 你会很清晰的通过VSCode的提示了解到该函数的参数和返回值信息:

而不需要去看源码,要知道,一些复杂的方法,如果没有良好的注释,看源码都不一定能很快的判断出来参数和返回值类型。


巧用注释


为了提供更完美的VSCode提示信息,我们还可以给方法加一个注释:

/** foo function
* @description count string size
*/
export function foo(name: string): number {
return name.length
}
这时候使用者看到的是:
所以,当你要提供一个方法或者类给别人用的时候,就需要把类型约束好,这样才能让使用者更好的使用。这里的提供给别人使用,往大了说就是提供一个第三方类库或者框架给别人用,如:axios lodash等,往小了说可能就是提取一个公用的方法到你的utils文件夹下。
类型推断
其实也不是所有的变量或者返回值都需要手动去设置类型,通过类型推断,可以少写很多代码。
我们看下面的例子:
export function splitString(str: string) {
const separator = ,
return str.split(separator)
}

这里的separator就可以不用写成separator:string,TS会进行类型推断。

进一步,返回类型我们也可以不用定义,TS会根据split方法的返回类型来推断splitString的返回类型。

类型推论只适用于一些简单的类型,复杂的情况还是需要手动定义。可以通过VSCode的提示检测是否正确推断了类型。

说的极端一点,TS就是为了让使用者爽,有更好的提示和约束,让你知道你是否有正确安全的使用提供的方法。而不是为了增加你的工作量和心智负担。


VSCode没有正确提示


如果你为你的项目路径设置了别名alias,那么有可能出现引入的方法没有正确提示的情况。

我们通过别名引入,splitString方法已经没有正确的类型提示了。因为TS不能正确的解析这个目标文件@/foo/b,我们可以在tsconfig.json这里的compilerOptions选项添加一个paths配置:

{
"compilerOptions": {
"paths": {
"@/*": ["src/*"]
}
}
}


这样就可以正确解析别名下文件了。


什么时候用泛型


要知道这个问题之前,你首先要知道什么是泛型,泛型解决了什么问题。可以先看看文档。

在了解了泛型是让一个组件支持多种类型之后。如果你还不知道什么时候用泛型,那就是你还不需要用。等你遇到了痛点,你自然就会想到泛型了。

比如你定义了一个方法:

function foo (arg:number):number {
return arg
}

当你需要让这个方法支持string类型的时候,你不使用泛型的话,你可能这么写:

function foo(arg: number | string): number | string {
return arg
}

这里有个问题,会出现传入number,返回string这样的情况,不够严谨。

这个时候你就会想到泛型了。

function foo(arg: T): T {
return arg
}


当然,泛型的玩法不都是那么简单的,想要玩出更高阶的泛型写法,可以多看看第三方库写的类型定义文件,看看别人是怎么写各种泛型的。


类型定义在哪?


这个问题跟上面的问题是一样的,当你不知道这玩意什么时候用,那你应该是还用不到这个玩意儿。

简单的不重用的就直接写,如上面的示例方法。

需要重用的一般来说就在方法实现的文件夹自定义一个类型,并export出去,方便其他使用者使用。

export type fooItem = string | number | null
function foo(arg:fooItem):void {
console.log(arg)
}


你也可以用一个文件夹,专门放各种公用数据类型。比如在定义前后端接口数据的时候,就可以这么干:

// ./src/model/user.ts
export interface userReq {
username: string
password: string
}
export interface userRes {
nickname: string
avatar?: string
age: number
}


相关文章
|
Java Android开发
2048【小游戏】(Java课设)
2048【小游戏】(Java课设)
439 0
|
IDE 安全 数据管理
Visual Basic for Applications (VBA):自动化Office任务
【4月更文挑战第27天】**Visual Basic for Applications (VBA)** 是Microsoft Office中的宏语言,用于自动化Excel、Word、Outlook等应用的任务。VBA基于Visual Basic,通过编写代码控制应用行为,提升效率。文章介绍了VBA环境、基础语法,展示了在Excel(数据处理)、Word(文档管理)和Outlook(邮件自动化)中的应用。强调安全性和调试重要性,学习VBA能增强Office软件的功能,实现高效自动化工作流程。
593 0
|
5月前
|
人工智能 数据库
智能体(AI Agent)开发实战之【LangChain】(四)结合大模型基于RAG实现本地知识库问答和纠错
本文介绍如何基于RAG实现知识库问答系统的输入内容纠错功能。通过加载本地知识库、构建向量数据库,结合大语言模型对输入文本进行检索比对与纠错优化,提升问答准确性。
|
10月前
|
安全 搜索推荐 网络安全
HTTPS与HTTP:区别及安全性对比
HTTP和HTTPS是现代网络通信中的两种重要协议。HTTP为明文传输,简单但不安全;HTTPS基于HTTP并通过SSL/TLS加密,确保数据安全性和完整性,防止劫持和篡改。HTTPS还提供身份验证,保护用户隐私并防止中间人攻击。尽管HTTPS有额外的性能开销和配置成本,但在涉及敏感信息的场景中,如在线支付和用户登录,其安全性优势至关重要。搜索引擎也更青睐HTTPS网站,有助于提升SEO排名。综上,HTTPS已成为大多数网站的必然选择,以保障用户数据安全和合规性。
780 1
|
Kubernetes 网络协议 网络安全
在K8S中,容器提供一个服务,外部访问慢,到底是容器网络问题?还是容器服务问题?这种怎么排查?
在K8S中,容器提供一个服务,外部访问慢,到底是容器网络问题?还是容器服务问题?这种怎么排查?
|
网络协议 Shell Linux
推荐一款开源跨平台的超级终端工具-windterm
一款风格独特、开源、且完全免费的SSH/Telnet/Serial/Shell/Sftp 客户端
推荐一款开源跨平台的超级终端工具-windterm
|
开发工具
代码重构之重复代码处理
介绍使用IDEA去重构重复的代码块
代码重构之重复代码处理
|
监控 NoSQL Java
Spring Boot 2.3.2 发布,解决 Too many open files 导致的应用宕机问题
Spring Boot 2.3.2 发布,解决 Too many open files 导致的应用宕机问题
1019 0
Spring Boot 2.3.2 发布,解决 Too many open files 导致的应用宕机问题
|
计算机视觉
Photoshop安装方法
Adobe Photoshop官方正版软件下载 下载地址:Adobe Photoshop官方正版软件下载 - 软件下载 - Adobe软件下载 - Powered by Discuz!
488 0
Photoshop安装方法