TypeScript project



  • If I have a TypeScript project with files named:

    gulpfile.ts
    package.json
    .travis.yml
    tsconfig.json
    tslint.json

    What tool would I need to build it with? I'm assuming either Travis or Gulp...



  • Travis is just for continuous integration on GitHub. So, most likely gulp, but I don't actually know for sure.



  • Yeh, looks like gulp.
    Do an 'npm install' first, too.



  • Remember that utopia of ~ 8 years ago when you got a "project file" and you could just double-click it and hit the play button and shit just worked? Sigh.


  • Garbage Person

    @blakeyrat I still live there.



  • @blakeyrat said in TypeScript project:

    Remember that utopia of ~ 8 years ago when you got a "project file" and you could just double-click it and hit the play button and shit just worked? Sigh.

    I don't think it ever actually existed - you'd normally just get a funky compiler error to resolve - but yeah.



  • Is it normal for NPM to ask you to run as Admin? Seems dangerous.

    npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\XXX\Documents\XXX\node_modules\.staging\iconv-lite-b6b962cc' -> 'C:\Users\XXX\Documents\XXX\node_modules\raw-body\node_modules\iconv-lite'
    npm ERR!     at Error (native) parent: 'raw-body' }
    npm ERR!
    npm ERR! Please try running this command again as root/Administrator.
    


  • Looks like that windows issue - some winapis randomly fail sometimes and you should retry them again and again until they succeed in the hopes that whatever is locking up the file/directory will go away (or. if it doesn't, fail with an error and have everyone blame you instead of windows).
    (No, this is not at all specific to npm)

    In short, retry the operation and have better luck this time.



  • No I'm on try #4 and always it stops at the same place with "run as administrator". I'm sitting here thinking, "do I really WANT to give this software administrative access?"

    Of course not, but I don't see any other choice.



  • I somehow doubt it will help - the program should have access to that folder.
    I'd try deleting C:\Users\XXX\Documents\XXX\node_modules\raw-body and .staging instead (and if I find that I can't delete them either, restart or rage or use an unlocker program and then rage)

    (npm should reinstall any modules you delete from node_modules folders)



  • @createdtodislikethis Jesus fucking Christ, there's 635 packages in node_modules and it didn't even finish.

    This "tiny" web analytics JS is going to end up being like 57 MB.


  • FoxDev

    @blakeyrat I've done a bit of digging, and found a suggestion to try npm cache clean before trying again, and/or deleting the contents of %APPDATA%\npm-cache and trying again.



  • @raceprouk said in TypeScript project:

    deleting the contents of %APPDATA%\npm-cache

    NPM puts its cache in roaming?

    (runs command again)

    Of course it does, why am I even surprised by bugs like this anymore.

    EDIT: now I get:

    npm WARN karma-browserify@5.1.1 requires a peer of browserify@>=10 <15 but none was installed.

    it says "warn" and not like "fatal" so... I guess it should work?

    The cache clear got me past the first issue at least.



  • On a rerun (hoping that error would magically clear, it did not), it gave me about 40,000 of these:

    npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\XXX\Documents\XXX\node_modules\request\node_modules\sshpk\package.json'

    Thanks for the warning, but... so what? Is that bad? Why? (It is correct that the file doesn't exist, I'm just not sure why it's telling me...)


  • I survived the hour long Uno hand

    @blakeyrat said in TypeScript project:

    What tool would I need to build it with?

    Gulp

    @blakeyrat said in TypeScript project:

    Is it normal for NPM to ask you to run as Admin?

    If you're installing things globally, yes.

    @createdtodislikethis said in TypeScript project:

    some winapis randomly fail sometimes

    hahahahaah, most of my windows Node problems are people not bothering to check if their special snowflake C libraries build on Windows.

    @blakeyrat said in TypeScript project:

    there's 635 packages in node_modules

    Normal. Especially on recent verisons of NPM where they flatten the dependency tree to prevent duplication.

    @blakeyrat said in TypeScript project:

    it says "warn" and not like "fatal" so... I guess it should work?

    Maybe. That's a peer dependency not being met; it's warning because you might be about to install the peer anyway. Peer dependencies are not automatically installed anymore.

    @blakeyrat said in TypeScript project:

    request\node_modules\sshpk\package.json'

    ENOENT on a package.json usually means it can't install that package dependencies because there's no dependency files. Looks like you probably have a broken install from your last retry.

    Sorry, I know this isn't much help, but you might need to find someone more familiar with your build chain. It sounds like there's some issues with your project.



  • My hunch is that the Node.JS website was a lying liar when it said "most users" should install the LTS version, and my errors are due to being 0.001 versions out-of-date on NPM.

    I'm checking that hunch now.


  • I survived the hour long Uno hand

    @blakeyrat said in TypeScript project:

    LTS version

    There's a new version going LTS in October, so if you're on Node 4 like we are, you may want to move off it. Node 6 should still be good for a couple years though.



  • @blakeyrat said in TypeScript project:

    npm WARN karma-browserify@5.1.1 requires a peer of browserify@>=10 <15 but none was installed.

    This means karma requires you to install browserify on your own, if you wish to use it.

    npm install browserify

    Since karma are unit tests, you can probably leave that off for later.

    @yamikuronue said in TypeScript project:

    There's a new version going LTS in October, so if you're on Node 4 like we are, you may want to move off it. Node 6 should still be good for a couple years though.

    I am doing node/electron development on Windows with node 6, and zero problems so far. +1.


  • I survived the hour long Uno hand

    @cartman82 said in TypeScript project:

    karma are unit tests

    @cartman82 said in TypeScript project:

    npm WARN karma-browserify

    If they're specifically doing a karma plugin to play nice with browserify, they probably want browserify. Unless that's a transitive dependency of his, but then why is this dev dependency being installed?



  • @yamikuronue karma-browserify requires browserify to work. But the authors probably didn't want to add browserify as a full-on dependency, as that would cause two versions of browserify to be installed (presuming you already require browserify for your own needs). That's usually the reason to use peer dependencies.

    As for dev dependencies, they are always installed, unless you specify that you don't want them with a switch. You might want to do that in production, although I never bothered.


  • I survived the hour long Uno hand

    @cartman82 said in TypeScript project:

    That's usually the reason to use peer dependencies.

    Yeah, I understand why. But karma-browserify is either a dev dependency of @blakeyrat 's project, or a dev dependency of something else (and therefore shouldn't be installed), or a prod dependency of something that isn't a dev dependency (and thus, wrong).



  • @yamikuronue said in TypeScript project:

    Yeah, I understand why. But karma-browserify is either a dev dependency of @blakeyrat 's project, or a dev dependency of something else (and therefore shouldn't be installed), or a prod dependency of something that isn't a dev dependency (and thus, wrong).

    I presume it's a dev dependency of his own project. Otherwise, some module fucked up.


  • I survived the hour long Uno hand

    @cartman82 Right. We're violently agreeing here. If it's a dev dependency of his project, he probably needs to install browserify.



  • Buggity bug bug bugs buggy bug.

    At least that one's well-documented. Not fixed, natch, but the bug comments document how to work around it.

    It's still just literally unbelievable to me how flaky and buggy this entire app development ecosystem is. I mean you can make excuses like "well JS isn't strongly-typed" or "well most of the development is done on macOS and not on Windows" or whatever, but the simple fact of the matter is: all this shit is buggy garbage and none of the developers care. Zero professional pride.



  • What's great about it is it's completely non-deterministic.

    For example, I'm still trying to get the TypeScript compile to work (probably not NPM's fault), since I'm stumped at the moment I cleared everything out and started fresh.

    This time NPM told me:

    npm notice created a lockfile as package-lock.json. You should commit this file.

    Wha... wha? Why? Why would I commit it? Commit it where? (Source control I assume, but what a thing to left unspoken!)

    It boggles the mind. I've ran this exact command like 4 times, and this is the first its shown me that specific result, but also the result makes no sense. Unless they're using a completely different definition of the word "lock" than any I've experienced.

    EDIT: I opened the file and it contains a list of packages and version numbers, so maybe the intent is that it "locks" those packages to those specific versions instead of always retrieving the newest version?



  • Aha finally got it built! I r genius.

    Despite pulling in something like 640 packages, the minified script turns out to only be about 25k so it's quite reasonable in size.



  • @blakeyrat said in TypeScript project:

    Wha... wha? Why? Why would I commit it? Commit it where? (Source control I assume, but what a thing to left unspoken!)
    It boggles the mind. I've ran this exact command like 4 times, and this is the first its shown me that specific result, but also the result makes no sense. Unless they're using a completely different definition of the word "lock" than any I've experienced.
    EDIT: I opened the file and it contains a list of packages and version numbers, so maybe the intent is that it "locks" those packages to those specific versions instead of always retrieving the newest version?

    Sounds like you upgraded to a new version of npm which uses lockfiles by default.

    And yes, it will make sure you always get those exact same versions when you do npm install on different machines or on production. Without that, it would install whatever fits the semver rule in your package.json, which can't always be trusted.



  • @cartman82 said in TypeScript project:

    Sounds like you upgraded to a new version of npm which uses lockfiles by default.

    Well ok but why would it tell me that? I'm just a consumer of this code. Why would NPM even assume I have the permissions to commit that file to the repo? (I don't BTW.) Why would NPM even assume the project is in a repo? Or in a repo that uses the jargon term "commit"? Like, that message is awful in about 47 different ways.

    I'd like to say I'm surprised nobody questioned it before they put it in production, but I'm not.

    @cartman82 said in TypeScript project:

    And yes, it will make sure you always get those exact same versions when you do npm install on different machines or on production. Without that, it would install whatever fits the semver rule in your package.json, which can't always be trusted.

    Ok but since I'm not the owner of the repo, if I tried to commit that file I'd be creating a major faux-pas at minimum.

    And of course the main thing that brought this up: why didn't it tell me that yesterday afternoon when I ran the exact same NPM command in the exact same folder with the exact same version of NPM? How do you even write software that's non-deterministic? That takes effort.



  • @blakeyrat said in TypeScript project:

    Well ok but why would it tell me that? I'm just a consumer of this code. Why would NPM even assume I have the permissions to commit that file to the repo? (I don't BTW.) Why would NPM even assume the project is in a repo? Or in a repo that uses the jargon term "commit"?

    They made an assumption that users of their tool will be professional programmers, who would therefore use source control and understand the related professional jargon.

    You are not just a "consumer". You are a professional.

    https://www.youtube.com/watch?v=LyQU1sdnAtM

    Watch this. It directly addresses a lot of your concerns.


  • Garbage Person

    Blakeyrat has more patience than I do.

    I tried Git once. Told it to fuck right off.
    I tried NPM once. Told it to fuck right off.

    If I ever have to deal with that shit on a daily basis, I will very seriously entertain thoughts of a career change.

    I'll sit in my little "outdated" C# box with NuGet (which despite being designed by idiots manages to actually work) and a real IDE, fat ugly TFS and fucking MSBuild.



  • @cartman82 said in TypeScript project:

    They made an assumption that users of their tool will be professional programmers, who would therefore use source control and understand the related professional jargon.

    I do and I do, it's still a terribly-written message.

    @cartman82 said in TypeScript project:

    You are not just a "consumer". You are a professional.

    Great; could I maybe get some professional-grade tools instead of this shit that breaks down every 10 minutes?

    OBLIGATORY CAR ANALOGY

    Professional-grade in cars:

    0_1498676145907_2011-gmc-sierra-denali-3500hd-front-three-quarters.jpg

    If car companies defined "professional" the way NPM and World's Biggest Asshole Cartman82 did:

    0_1498676169762_beater2.jpg

    @cartman82 said in TypeScript project:

    Watch this. It directly addresses a lot of your concerns.

    I'm at work. I shouldn't even be posting here. I'm certainly not going to watch YouTubes.



  • @blakeyrat said in TypeScript project:

    I'm at work. I shouldn't even be posting here. I'm certainly not going to watch YouTubes.

    Make a reminder.



  • @weng said in TypeScript project:

    If I ever have to deal with that shit on a daily basis, I will very seriously entertain thoughts of a career change.

    I entertain thoughts of a career change basically 6-7 hours a day, 5 days a week.

    I loved where IT was going back in '97 when I got into it. I hate with a passion where it's going now. (Which is, specifically, AS FAST AS REVERSE-GEAR ALLOWS.)



  • @cartman82 said in TypeScript project:

    Make a reminder.

    Look, it's simple: if the software's for professionals, why is it written by obvious amateurs?

    And no I'm not watching your dumb video. Ever.


  • Garbage Person

    @blakeyrat Let me help your car analogy.

    Your mechanic pays $70 to Snap-On for a fucking 1/4 inch ratchet handle. Not including any sockets.

    You pay $17.99 at Harbor Freight for a 1/4 inch ratchet and 20 sockets to go with it.

    Both have a lifetime warranty. Both will absolutely work.

    But the mechanic is buying those tools because he's a professional and depends on them to get his job done in a timely manner. It's made of better steel, so it's less likely to break. It's shaped and smoothed better, so it feels better in his hand. If it breaks, a dude will show up at his work and just give him a new one. He doesn't even have to go buy the thing in the first place, they bring the store right to him once a week.

    NPM is built to Harbor Freight standards.



  • @weng But it's worse than that because in this universe of web development, Snap-On doesn't even exist. It's full of people with the horrible Harbor Freight tools who aren't even aware how bad they are.



  • @weng said in TypeScript project:

    I tried Git once. Told it to fuck right off.

    I tell it that pretty much daily.



  • In Visual Studio Code, how do you tell it to just built a TypeScript project (as opposed to "build and then attempt to run in Node.JS")?

    I Googled around and I found Control-Shift-B, which is something like "execute build step", but I'm confused and not sure that's the "correct" way to build a project or is intended as a method to debug builds. Also the shortcut appears to have no associated menu item.

    EDIT: the more I look at VS Code's UI, does it even have the concept of just building a project and doing nothing more? Weird.



  • Next in a constant string of questions...

    Is there a way to define a type in TypeScript without also assigning it to a variable using let?

    For example, TypeScript has an interface Event. I want to pass around DOM events that have a property .detail. The problem is, Event doesn't contain .detail. So what I'd like to do is define a custom event that inherits from Event but adds a .detail property so TypeScript knows what to expect.

    Any clues? If I manage to do that, how does it interact with plain JavaScript when the event is sent? (Specifically: the plain JS won't be under any obligation to set the .detail property-- will that raise a runtime error?

    Edit:

    type CustomEvent = { Event } & { detail: Any };
    

    This gives the error "can not find name 'Any'", which means I'm doing something fundamentally wrong because Any is a type...?



  • Aha. I got it. I was trying to use an Intersection Type, when I should have been defining a new Interface thusly:

    interface CustomEvent extends Event
    {
        detail: any;
    }
    

    Also despite the documentation saying the type for "anything" is named "Any" it's actually named "any". CAPITALIZATION MATTERS DOCUMENTATION WRITERS! (To be fair the code example in the docs is correct.)



  • Next problem:

    This page https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent has a handy polyfill to get all browsers on the same page with window.CustomEvent, problem is I don't know how to execute that JS from inside a .ts file.

    I tried doing:

    declare global
    {
      // polyfill
    }
    

    But that just gives me "statements are not allowed in ambient contexts".

    Well, end of day, I'll check back tomorrow morning.

    Might just end up using the old deprecated method of creating events, since there's no other overlap between IE11 and Edge/Chrome/Firefox... and IE11 is still current for a few more years.



  • @blakeyrat said in TypeScript project:

    @weng But it's worse than that because in this universe of web development, Snap-On doesn't even exist. It's full of people with the horrible Harbor Freight tools who aren't even aware how bad they are.

    Embedded development is worse. Tools for developers are just too expensive to develop while competing with the free stuff.



  • @blakeyrat said in TypeScript project:

    If I manage to do that, how does it interact with plain JavaScript when the event is sent? (Specifically: the plain JS won't be under any obligation to set the .detail property-- will that raise a runtime error?

    TypeScript only makes type checks when compiling, they are not inserted into the generated JavaScript. If your calling code doesn't set event.detail, your code trying to read it will just get undefined, same as for any other absent property on an object.


    @blakeyrat said in TypeScript project:

    Next problem:

    This page https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent has a handy polyfill to get all browsers on the same page with window.CustomEvent, problem is I don't know how to execute that JS from inside a .ts file.

    You can just put that code in the .ts file as-is, and add some casts to any where the compiler complains. Casting to any is somewhat of a hack, but it's necessary for polyfills that add constructor functions.

    A: cast your polyfiller function to any, and tell TypeScript about the new properties on window, because its default lib doesn't have these declarations for some reason:

    interface Window {
      Event: typeof Event;
      CustomEvent: typeof CustomEvent;
    }
    
    (function () {
      if ( typeof window.CustomEvent === "function" ) return false;
    
      let CustomEventConstructor: any = function ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( 'CustomEvent' );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
      }
    
      CustomEventConstructor.prototype = window.Event.prototype;
    
      window.CustomEvent = CustomEventConstructor;
    })();
    

    B: cast the window itself to any:

    (function () {
      if ( typeof (window as any).CustomEvent === "function" ) return false;
    
      function CustomEventConstructor ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( 'CustomEvent' );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
      }
    
      CustomEventConstructor.prototype = (window as any).Event.prototype;
    
      (window as any).CustomEvent = CustomEventConstructor;
    })();
    


  • Seems like there are no typescript devs on WTDWTF.

    It's up to you to pave the way.

    UPDATE: Oh, @DCoder to the rescue.



  • @cartman82 said in TypeScript project:

    Seems like there are no typescript devs on WTDWTF.

    It's actually pretty damned easy to learn if you already know JavaScript. All the questions I have really are more about the tooling, like the intersection between when the TypeScript ends and the regular DOM begins... but learning the "any" type kind of solved 90% of those too.



  • @cartman82 said in TypeScript project:

    Seems like there are no typescript devs on WTDWTF.

    I don't know if I'd call myself a typescript dev but I've done some work with it.



  • @dcoder Thanks, that's helpful.

    To update: I decided not to bother because the reason I need to create a custom event is to create a unit test, and it turns out all the existing unit tests also use the "deprecated" event syntax. (Which is better than the current one, but isn't that so typical of the W3C.)

    Now I have a related problem:

        xxxEvent = document.createEvent("xxxdata");
        xxxEvent.initCustomEvent(
            type = "xxxdata",
            detail = "test"
        );
    

    detail is red-underlined with the message:

    Cannot find name 'detail'

    But... it's a standard DOM function? How is it possible that TypeScript knows about DOM, and knows that .initCustomEvent() is in DOM, and knows .initCustomEvent() takes a variable called type, but doesn't know that .initCustomEvent() takes a variable named detail? Nothing else has red underlines. Am I doing something wrong, or did I find a weird bug?



  • This does work:

        xxxEvent.initCustomEvent(
            "xxxdata",
            true,
            false,
            "test"
        );
    

    TypeScript doesn't let you name your params and/or skip optional params? I guess?

    Been spoiled by C#, I guess. type = 'xxxdata' worked by accident. Blarp.



  • @blakeyrat said in TypeScript project:

    but learning the "any" type kind of solved 90% of those too.

    I am sure TypeScript aficionados are having a fit at that.



  • @cartman82 How else do you describe (to TypeScript) what goes in a CustomEvent's "detail" field? It literally is "anything". (It's actually "anything or nothing at all" when converted to human being speak.)

    Maybe TypeScript experts have a better answer, I dunno.


Log in to reply