Giter Club home page Giter Club logo

professional-ts's Introduction

Professional TypeScript

Node.js CI ts-nightly compat

What's this course about?

This course is intended to help those already somewhat familiar with TypeScript as a programming language, to the point where they're more ready to use it in a real situation with real stakes. Mike shares some of the experience he's had as LinkedIn's TypeScript infrastructure lead, so you don't have to learn things "the hard way" like he did.

Project setup

First, you should ensure you have your ssh keys working with GitHub. You can verify this by running

and getting a response like

Hi mike-north! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

Tools you MUST have installed

Next, make sure you have installed volta which ensures you have the right version of node and yarn for this project

We also strongly recommend the use of Visual Studio Code as an authoring tool. If you use something else, you're on your own.

Clone

Next, checkout a working copy of this project

git clone [email protected]:mike-north/professional-ts

enter the directory you just created

cd professional-ts

Install dependencies

yarn is the recommended package manager to use with this project. Please use it instead of npm.

Install dependencies with yarn by running

yarn

Starting the project

Start up the project in development mode by running

yarn dev

Changing any files in the src folder will result in an incremental rebuild, and a refresh of the screen.

By default, the app is served on http://localhost:3000.

Legal

© 2020 LinkedIn, All Rights Reserved

Licensing

The code in this project is licensed as BSD-2-Clause license, and the written content in the ./notes folder is licensed under CC BY-NC-SA 4.0

professional-ts's People

Contributors

mike-north avatar nbogie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

professional-ts's Issues

04-mikes-ts-setup.md - tsconfig composite misplaced

In the 04-mikes-ts-setup.md file the composite is part of compilerOptions so it should appear after not before

 {
   "compilerOptions": {
+     "composite": true,

We'll need to make a one-line change in our existing /tsconfig.json file

--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "composite": true,
   "compilerOptions": {

Running yarn on Apple M1 throws "Bad CPU type in executable" errors

I forked the repo and cloned it to an intel Mac - all worked as expected. Then cloned it to a Apple M1 machine and yarn threw errors:

/[...]/.volta/tools/image/yarn/1.22.10/bin/yarn: line 20:
/[...]/.volta/tools/image/node/12.18.4/bin/node: Bad CPU type in executable

It turns out yarn is not a universal executable and so requires Rosetta 2 to run yarn. Normally MacOS will detect if an app needs Rosetta and will ask if you want to install it. However, that does not hold true for command line apps.

If you get these errors execute the following in the terminal:

softwareupdate --install-rosetta

Once installed then yarn should work as expected.

See https://support.apple.com/en-gb/HT211861

yarn dtslint tests/types-dtslint fails with a Syntax error

Running yarn dtslint tests/types-dtslint results in a syntax error for me.

/Users/[...]/.dts/typescript-installs/4.3/node_modules/typescript/lib/typescript.js:139
    for (let i = startIndex ?? 0; i < array.length; i++) {

Which suggests dtslint does not support nullish coalescing?

Have tried with [email protected] and latest [email protected]. The repo has been archived and the project rolled into definitely typed. Not sure where that leaves us.

Yarn@4 pnp breaks vscode / eslint integration

Installing the latest yarn@4 uses pnp rather than node-modules. This prevents VSCode from finding the eslint and @types/jest dependencies.

If in notes/04-mikes-ts-setup.md you find that the lint test (swapping const for let) does not error in VSCode but does fail when running yarn lint then run:

yarn config set nodeLinker node-modules
yarn install

This should install dependencies in the local node_modules folder where VSCode can resolve them.

Duplicate plugin/preset detected

Hi.
I've installed the 'professional-ts' project, followed all instructions about how install it, but when I'm trying to run command "yarn dev" I've got a big fat error in my console.

/Users/Dima/PROJECTS /THEORY/Front-End Masters/TS Production-Grade/professional-ts/src/index.js: Duplicate plugin/preset detected. If you'd like to use two separate instances of a plugin, they need separate names, e.g.

plugins: [ ['some-plugin', {}], ['some-plugin', {}, 'some unique name'], ]

Duplicates detected are: [ { "alias": "/Users/Dima/PROJECTS /THEORY/Front-End Masters/TS Production-Grade/professional-ts/node_modules/@babel/plugin-proposal-class-properties/lib/index.js", "dirname": "/Users/Dima/PROJECTS /THEORY/Front-End Masters/TS Production-Grade/professional-ts", "ownPass": false, "file": { "request": "@babel/plugin-proposal-class-properties", "resolved": "/Users/Dima/PROJECTS /THEORY/Front-End Masters/TS Production-Grade/professional-ts/node_modules/@babel/plugin-proposal-class-properties/lib/index.js" } }, { "alias": "base$1", "options": { "loose": "#__internal__@babel/preset-env__prefer-false-but-true-is-ok-if-it-prevents-an-error" }, "dirname": "/Users/Dima/PROJECTS /THEORY/Front-End Masters/TS Production-Grade/professional-ts", "ownPass": false } ]

Relative import for dtslint failing

I've hit an issue when doing the course using the latest version of dtslint (4.1.6).

The relative import of the test declarations here:
https://github.com/mike-north/professional-ts/blob/fem/tests/types-dtslint/test.ts#L1

...will cause the dtslint tests to fail with:

ERROR: 1:52  no-relative-import-in-test  Test file should not use a relative import. Use a global import as if this were a user of the package. See: https://github.com/Microsoft/dtslint/blob/master/docs/no-relative-import-in-test.md

If I naively try an absolute import, based on the name field in package.json, it doesn't know what I'm talking about:

import { assertIsTypedArray, isITeam, ITeam } from 'professional-ts';

I've also tried variations like import { assertIsTypedArray, isITeam, ITeam } from 'professional-ts/tests/types-dtslint' but it doesn't know what professional-ts means.

If anyone else solved this issue, I'd be interested to hear.

Running yarn dev after a fresh clone & install fails due to duplicate babel plugin/preset

Hi! I just started your course and ran into an issue getting up and running. Upon running yarn dev, I see this error:

➜ yarn dev
yarn run v1.22.5
$ node ./server/index.js
⠋ Building...Serving on http://localhost:3000
🚨  /Users/josie.flynn/dev/professional-ts/src/index.js: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "/Users/josie.flynn/dev/professional-ts/node_modules/@babel/plugin-proposal-class-properties/lib/index.js",
    "dirname": "/Users/josie.flynn/dev/professional-ts",
    "ownPass": false,
    "file": {
      "request": "@babel/plugin-proposal-class-properties",
      "resolved": "/Users/josie.flynn/dev/professional-ts/node_modules/@babel/plugin-proposal-class-properties/lib/index.js"
    }
  },
  {
    "alias": "base$1",
    "options": {
      "loose": "#__internal__@babel/preset-env__prefer-false-but-true-is-ok-if-it-prevents-an-error"
    },
    "dirname": "/Users/josie.flynn/dev/professional-ts",
    "ownPass": false

I think this is happening because @babel/preset-env now includes the @babel/plugin-proposal-class-properties proposal as of their 7.10.0 release: https://babeljs.io/blog/2020/05/25/7.10.0#class-properties-and-private-methods-to-shippedproposals-option-of-babelpreset-env-11451httpsgithubcombabelbabelpull11451

Commenting out "plugins": ["@babel/plugin-proposal-class-properties"] from .babelrc seems to resolve the issue for me.

Thanks for putting your course together, it's been great so far! Just wanted to submit this in case it helps other folks who got stuck on it too.

typescript version=4.2.3 Cannot apply hunk #6

Hi There,

I just started your course last week and had no problems with yarn installing dependencies. I was playing around with yarn plug n play today and tried to configure it with this repo. I couldn't get it to work so I started from scratch and recloned and can no longer yarn install using node_modules.

`
➤ YN0000: ┌ Resolution step
➤ YN0061: │ parcel-bundler@npm:1.12.5 is deprecated: Parcel v1 is no longer maintained. Please migrate to v2, which is published under the 'parcel' package. See https://v2.parceljs.org/getting-started/migration for details.
➤ YN0032: │ node-addon-api@npm:1.7.2: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ evp_bytestokey@npm:1.0.3: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ core-js@npm:2.6.12 is deprecated: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
➤ YN0061: │ chokidar@npm:2.1.8 is deprecated: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ fsevents@npm:2.1.3: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ fsevents@npm:2.1.3 is deprecated: "Please update to latest v2.3 or v2.2"
➤ YN0061: │ fsevents@npm:1.2.13 is deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ fsevents@npm:2.1.3: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ fsevents@npm:2.1.3 is deprecated: "Please update to latest v2.3 or v2.2"
➤ YN0061: │ fsevents@npm:1.2.13 is deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
➤ YN0061: │ urix@npm:0.1.0 is deprecated: Please see https://github.com/lydell/urix#deprecated
➤ YN0061: │ request@npm:2.88.2 is deprecated: request has been deprecated, see request/request#3142
➤ YN0032: │ nan@npm:2.14.2: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ resolve-url@npm:0.2.1 is deprecated: https://github.com/lydell/resolve-url#deprecated
➤ YN0061: │ har-validator@npm:5.1.5 is deprecated: this library is no longer supported
➤ YN0061: │ request-promise-native@npm:1.0.9 is deprecated: request-promise-native has been deprecated because it extends the now deprecated request package, see request/request#3142
➤ YN0002: │ professional-ts@workspace:. doesn't provide @babel/core (p0c43c), requested by @babel/plugin-proposal-class-properties
➤ YN0002: │ professional-ts@workspace:. doesn't provide @babel/core (p1d304), requested by @babel/preset-env
➤ YN0002: │ professional-ts@workspace:. doesn't provide @babel/core (pcdb20), requested by @babel/preset-react
➤ YN0002: │ professional-ts@workspace:. doesn't provide @babel/core (p2214b), requested by @babel/preset-typescript
➤ YN0060: │ professional-ts@workspace:. provides react (p3d78b) with version 17.0.1, which doesn't satisfy what react-router-dom and some of its descendants request
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements for details, where is the six-letter p-prefixed code
➤ YN0000: └ Completed in 6s 847ms
➤ YN0000: ┌ Fetch step

...truncated...

➤ YN0066: │ typescript@patch:typescript@npm%3A4.2.3#builtin<compat/typescript>::version=4.2.3&hash=cc6730: Cannot apply hunk #6 (set enableInlineHunks for details)
➤ YN0000: └ Completed in 1s 165ms
➤ YN0000: Failed with errors in 8s 14ms

`

04-mikes-ts-setup.md - import path in a `index.test.ts`

I followed all steps in a tutorial, and received an TS error Cannot find module '..' or its corresponding type declarations.ts(2307) while trying to do

import { avg, sum3 } from '..';

What I could miss?

Folder structure is
folder

My tests/tsconfig.json internals are

{
  "extends": "../tsconfig.json",
  "references": [
    {
      "name": "my-lib",
      "path": ".."
    }
  ],
  "compilerOptions": {
    "types": [
      "jest"
    ],
    "rootDir": "..",
    "noEmit": true
  },
  "include": [
    "."
  ]
}

and in a Problems tab of VS Code I'm receiving an error
File '/home/stradivari/projects/temp/tests/index.test.ts' is not under 'rootDir' '/home/stradivari/projects/temp/src'. 'rootDir' is expected to contain all source files.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.