乐趣区

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

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
}

退出移动版