reactjs TypeScript/ES6:在下面的上下文中,“:”是什么?

nhaq1z21  于 2023-05-22  发布在  React
关注(0)|答案(2)|浏览(178)

我理解TS/ES6中的以下两个用法。
1.下面,声明了一个string类型的变量myname,它将成为常量(final)。
const myname:string = 'abcd';
1.下面声明了一个变量/函数initialPath,并使用=>运算符为其分配了一个函数体。
const initialPath =({pathRoot,myvar ='',locale = ''})=> path.join(process.cwd(),pathRoot,myvar,locale.toLowerCase());
但是我不确定下面的用法,下面的:是做什么的。

module.exports = {
  application: myname,
  myservicePostfix,
  loadablePath: ({pathRoot, myvar}) =>
    path.join(basePath({pathRoot, myvar}), 'loadable.json')
}

-> application: myname是否意味着application = myname和应用程序的类型为typeof(myname)。
上一篇:loadablePath:是什么意思

z4iuyo4d

z4iuyo4d1#

你所困惑的只是一个字典对象。下面是另一个像你这样的对象的例子:

const object = {
    thing1: “hello”,
    thing2: 78,
    thing3: () => {console.log(“thing3 has been run!”)},
    thing4: [6, 3, 4, 1, 8]
}

正如你所看到的,我的object变量包含四个元素,或者东西。它们中的每一个都可以通过写入object.nameOfThing调用。
在您的示例中,您有一个嵌套函数作为元素,名为loadablePath。这与我的thing3元素非常相似,每当调用它时,它都会运行它的函数:

object.thing3()
// result —-> thing3 has been run!

简单来说,是的。正如object.thing1: “hello”意味着object.thing1 = “hello”application: myname意味着application = myname
这仅仅是一个字典对象,仅此而已。希望这能帮上忙。

jdg4fx2g

jdg4fx2g2#

在你的例子中没有涉及TypeScript。我知道TS使用冒号将类型与变量相关联可能会引起一些混淆,但这里没有任何混淆。这是纯JavaScript。
在javascript对象字面量中,属性是用key: value声明的:

const myObj = {
  foo: "bar",
  num: 42,
  myField: true
}

这相当于:

const myObj = {};
myObj.foo = "bar";
myObj.num = 42;
myObj.myField = true;

值可以是任何有效的JavaScript类型,包括函数:

function myFunction () {
  console.log('my function invoked');
}

const someObject = {
  someFunction: myFunction
}

someObject.someFunction(); // logs "my function invoked"

您也可以使用箭头功能:

const myFunction = () => console.log('my function invoked');

const someObject = {
  someFunction: myFunction
}

someObject.someFunction(); // logs "my function invoked"

上面的箭头函数可以内联在对象声明中:

const someObject = {
  someFunction: () => console.log('my function invoked')
}

someObject.someFunction(); // logs "my function invoked"

用你的例子把这一切放在一起:

// mocking these out because loadablePath references them
const path = { join: (...args) => args.join('/')}
const basePath = ({ pathRoot, myvar }) => path.join(pathRoot, myvar);

// declare the string constants referenced in your example
const myname = "Appy McApperson";
const myservicePostfix = 'My Service Postfix';

// module has to exist before we can assign it an exports property
const module = {};

module.exports = {
  application: myname,
  myservicePostfix,
  loadablePath: ({pathRoot, myvar}) =>
    path.join(basePath({pathRoot, myvar}), 'loadable.json')
}

console.log(module.exports.application)
// "Appy McApperson"

console.log(module.exports.myservicePostfix)
// "My Service Postfix"

console.log(module.exports.loadablePath({
  pathRoot: '/path/root',
  myvar: 'somepath'
})); 
// "/path/root/somepath/loadable.json"

相关问题