如果你没有生活在岩石下,你对TypeScript有所了解。它是微软推出的一种新语言,基本上是带有类型的JavaScript(并编译成JavaScript在浏览器中运行)。
现在,我在一些测试项目中使用了它,但出于各种原因,我倾向于避免用TypeScript写我的教程。
首先,我主要是写初学者的教程,而TypeScript通常不是人们开始使用的。
另外,我认为如果我开始用TypeScript写东西,会带来混乱--我在说什么?
TypeScript爱好者仍然可以利用JavaScript教程,因为JavaScript可以很好地融入他们的TypeScript文件,而反之则不行。
所以,我坚持讲网络平台的基本原理,而不是讲建立在它之上的技术。
这就是说...
有些时候,我也会从JavaScript中的类型中受益。它们很有帮助。
多亏了Paul Lewis的这个视频,我发现我们确实可以在JavaScript中使用类型,使用Visual Studio Code!
首先,你需要安装TypeScript,如果你还没有的话。
npm install -g typescript
然后你在项目的根部添加一个tsconfig.json 文件。假设你的JavaScript文件在src 文件夹中,这是你在该文件中所需要的最小配置量。
{
"compilerOptions": {
"outFile": "../../built/local/tsc.js",
"checkJs": true,
"allowJs": true
},
"include": [
"src/*"
]
}
你可以决定排除文件夹,例如排除node_modules 是个好主意。
{
"compilerOptions": {
"outFile": "../../built/local/tsc.js",
"checkJs": true,
"allowJs": true
},
"include": [
"src/*"
],
"exclude": [
"node_modules",
]
}
现在,VS Code可以指出我们JavaScript代码中的类型错误。
而且,它可以自动做到这一点,不需要我们做任何事情。
特别是,它可以使用默认值推断出函数参数的类型。
假设我们有这个函数,其中times ,默认值为2。
const multiply = (aNumber, times = 2) => {
return aNumber * times
}
现在,由于第二个参数有一个默认值,我们可以调用这个函数,用
来乘以20,或者像这样来乘以10。
但是如果你传递,例如,一个字符串作为第二个参数,像multiply(20, 'hey') ,VS Code现在会告诉你有一个问题。
类型为'"嘿 "的参数不能分配给类型为'数字'的参数
真棒!我们可以执行这种类型检查。
我们也可以对那些没有默认值的参数进行这种类型检查。你可以使用JSDoc来做,它通常被用作API生成器,并添加类型提示。
/**
* @param {number} aNumber
*/
const multiply = (aNumber, times = 2) => {
return aNumber * times
}
⚠️不要忘记注释开头的双** ,否则事情将不能按预期进行。
现在如果你试图调用multiply('ho!') ,你也会得到一个错误。
类型为'"ho!"的参数不能被分配给类型为'number'的参数
除了number ,你还可以设置以下类型。
nullundefinedbooleanstringArrayObject
例子:
/**
* @param {null} aNull
* @param {undefined} anUndefined
* @param {boolean} aBoolean
* @param {string} aString
* @param {Array} anArray
* @param {Object} anObject
*/
const multiply = (aNull, anUndefined, aBoolean, aString, anArray, anObject) => {
console.log(aNull, anUndefined, aBoolean, aString, anArray, anObject)
}
现在,当然不用在注释中添加注解,让代码本身告诉你真相会更好。如果你能接受这种做事方式,那就太好了!否则,还有TypeScript。否则,还有TypeScript。