TypeScript

As my comment mentions in the original question, from the yarn documentation:

TypeScript uses its own resolver as well. In this case the situation is a bit more complex - the TS team has some concerns about allowing third-party hooks inside the tsc compiler, meaning that we can’t work with it at the moment. That being said, TypeScript isn’t only tsc and as such we’ve been able to add PnP support to the popular ts-loader - meaning that as long as you compile your TypeScript through Webpack, everything works well! Consult the dedicated section about it for more information.

To enable yarn package resolution when using Typescript you have to use webpack with ts-loader. This is how I resolved it.

• install the neccessary dependencies:

npm install webpack webpack-cli pnp-webpack-plugin ts-loader

• Create a 'webpack.config.js' file in your project root directory with the following content:

const path = require('path');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

const commonConfig = {
  mode: 'development',
  devtool: 'source-map',
  plugins: [
    new NodePolyfillPlugin(),
  ],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  node: {
    __dirname: false,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    plugins: [PnpWebpackPlugin],
  },
  resolveLoader: {
    plugins: [PnpWebpackPlugin.moduleLoader(module)],
  },
};

module.exports = [
  Object.assign(
    {
      target: 'electron-main',
      entry: { main: './src/main.ts' },
    },
    commonConfig
  ),
  Object.assign(
    {
      target: 'electron-renderer',
      entry: { preload: './src/preload.ts' },
    },
    commonConfig
  ),
];

• I updated my package.json with scripts to run webpack:

{
  "name": "ElectroMega",
  "packageManager": "[email protected]",
  "private": true,
  "scripts": {
    "build": "webpack",
    "prestart": "yarn run build",
    "start": "electron ./dist/main.js"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.3.2",
    "node-polyfill-webpack-plugin": "^1.1.4",
    "pnp-webpack-plugin": "^1.7.0",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.3",
    "webpack": "^5.54.0",
    "webpack-cli": "^4.8.0"
  },
  "dependencies": {
    "@tsconfig/node14": "^1.0.1",
    "@types/node": "^16.9.6",
    "electron": "^14.0.1"
  }
}

• Then you should be able to build your code with the command:

yarn build

My solution was a result of following the webpack GettingStarted section that explained much of the troubles I had, and the basics of using webpack.

Try npm install -g typescript@latest. You can also use npm update instead of install, without the latest modifier.

Answering the actual question and using the default directory, rather than changing it:

Yarn installs to ${env:LOCALAPPDATA}\yarn\bin

You can see this with:

yarn global bin

For example, after installing gulp:

$ ls ${env:LOCALAPPDATA}\yarn\bin


    Directory: C:\Users\mike\AppData\Local\yarn\bin


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
-a----        13-Aug-18   4:11 PM            348 gulp
-a----        13-Aug-18   4:11 PM             57 gulp.cmd

To ensure it's in your path, add this to your $profile (assuming you have PSCX ):

Add-PathVariable ${env:LOCALAPPDATA}\yarn\bin

You should only do that :

1. If Node.js >=16.10 (yarn >= 2.0) : corepack enable // else if Node.js <16.10 (yarn 1.0) : npm install --global yarn
2. Restart your terminal and your editor (all windows) if you using the terminal inside
3. Check installation with yarn --version but if you have npm it will works for sure (I have installed it many times on Windows and Linux this way & it's on the official 1.0 doc and official 2.0+ doc !

This is what worked for me:

Create your react-native App:

npx react-native init MyApp
cd MyApp

Add typescript:

yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer

Then create a tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

And a jest.config.js

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

Change your App.js to App.tsx.

That is it. Now you can change the configuration file with more strict type rules if you want to.

All the documentation is in https://reactnative.dev/docs/typescript.

Side Note: npx react-native init MyApp --template react-native-template-typescript resulted in errors when building the App. That is why I tried using the above method.