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

治疗皮肤科北京医院 http://pf.39.net/bdfyy/bdfjc/210403/8810613.html

VSCode提示

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

exportfunctionfoo(name:string):number{

returnname.length

}

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

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

巧用注释

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

/**foofunction

*

descriptioncountstringsize

*/

exportfunctionfoo(name:string):number{

returnname.length

}

这时候使用者看到的是:

所以,当你要提供一个方法或者类给别人用的时候,就需要把类型约束好,这样才能让使用者更好的使用。这里的提供给别人使用,往大了说就是提供一个第三方类库或者框架给别人用,如:axioslodash等,往小了说可能就是提取一个公用的方法到你的utils文件夹下。

类型推断

其实也不是所有的变量或者返回值都需要手动去设置类型,通过类型推断,可以少写很多代码。

我们看下面的例子:

exportfunctionsplitString(str:string){

constseparator=,

returnstr.split(separator)

}

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

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

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

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

VSCode没有正确提示

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

我们通过别名引入,splitString方法已经没有正确的类型提示了。因为TS不能正确的解析这个目标文件

/foo/b,我们可以在tsconfig.json这里的


转载请注明:http://www.aierlanlan.com/cyrz/3036.html