Playwright: import selectors from another file

Question

I've only just started looking at playwright, having used WebdriverIO for a long time. In WebdriverIO, I was able to store all the locators of elements in seperate files and import these to the test. Example (wdio)

// loginPage.js
module.exports = {
    btnLogn: '[name="login"]',
    btnCancel: '[name="cancel"]',
};

// loginPageTest.js
var loginPage = require('path/to/loginPage.js')

loginPage.btnLogin.click() // or similar

I liked this approach as if names / locators chagned it was one place to update. The playwright docs show all locators in the files, but I was looking to see if the above was possible with Playwright.

Typescript I am totally new to, so tried using the same logic as above with a javascript solution, but the locators were not being accepted.