关于前端:前端开发技术之TS的定义与使用

48次阅读

共计 1830 个字符，预计需要花费 5 分钟才能阅读完成。

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 {