Categories
Mastering Development

TypeScript not finding variable declared in type declaration if I import a file

I made a very simple library which contains a .d.ts (source) which has the following structure (I omit the details because the file works fine, it likely is a config issue in my project): // Some helper types and interfaces type TranslationFunction = /* … */; export { TranslationFunction }; Then, I do npm i […]

Categories
Development

Why is this React Typescript app throwing errors?

I just created a new React app using npx create-react-app my-app –template typescript and it was working fine until I changed my component to from a stateless one to a stateful one. The error: JSX element type ‘App’ is not a constructor function for JSX elements. TS2605 3 | import App from “./App”; 4 | […]

Categories
Development

unable to import JSON in typescript

I have a json file which looks like this { “type”: “service_account”, “project_id”: “blele”, “private_key_id”: “9c0a8fe58c6a35a1640677b7dbf5b”, “private_key”: “—–BEGIN PRIVATE KEY—–\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCQAsmXWkbeNsLn\nktPmTGONatPlZevmvSDO0IIMymUuRHPOuTQRm6k6WkYB1BB5gulGOsOc10hGrscK\nJtxj/G+eZguTvybosKdwVbm5sZ1jCUlS/TdmAVtJVWGf1YT/nxS1RuT+d7obFGN3\nNhMzQ2sm6JwmPIfF7kcfcU9Cjgjj5mDMa7OO2PQ4/gkKi+8/HhMge/4Wde\nd+/htb6ZA6BdHFSoevHHgTkkygJF47oDeirSN5VDDc1FYqSSZnCZ45uRik3RsAcw\ndInRhknSKdcbqyug9FQgM6l9T8a0sMpwgVcAjq3WaJaUgO1Wd9nfMhoItZvc6cIc\nbbBl3FxRAgMBAAECggEACK2gNQBGsRBfR0hdE/Y0oWnlJg8tSdM\nWDx6WgZIkhrfBZyvGndsUb5YS9MASLwfA+pYFRFg84lgMLjP4i1FBcSwsrM0kgN8\n/uqB5Fx4EQj7X0uZXmMKdysMwRXbaebWYJhqW0g4hIl3YW6urIGRoPb3q+n/Muy1\nhmZhaTTi34cDJLZSbywiMxSBSqlHstlLeK7jQTIU3y0lmC4snTiMjjXjDxGHD0em\nLKlMAouZbr/kj9M+iSj+9SQoH7ZR9FD7saoncJuOUZdH7Mwz+TvqS7bbm70P7zRR\nVwpDAeqc6XP8Hv6f2hhD62x5kmopSB0CP0MhZ/JjUQKBgQDCPDdP0MnlCnRf5xV8\n6ZJSWK5QOr894GKhQwbiddVTaNPPKlqqN+HM/r69SAwNYoZ+pAH9Us01vbWaoZIE\n0afNWqRcKAQucF6kU5C3zVpMFlW2bX9wxKZA3WdIyKnND7WiHr6zO+bqNoUckY0N\nUi6pS3m4ZnPSdfVb3ULHgt8eiQKBgQC9zgrwnotEUsyD85IaEDBXEPf3XfjmKN/n\n3WppgzDgC95qQVcgkb6LZcNsKXQqBcmeNP8UDIbhVmylMw18MBM9UjNBK8BztI3Q\n9ESsrYVOFnnxQfUqDSPCraHI4qD4/sKQi/8l/CKx4Al9exnvj1awJssAfQSAJraJ\nEjzGCiOdiQKBgQC/+5bMPFmiGsBGHnk9uvwWinLY+AgY19WFAWQnqEJPrDhW9s0g\nnBWCcnUDT9ghzrWTLPaOdi5BJR8AFRznyHZsYmA8eo0PfZ/+Gl7bXY0X0aespfQl\n+Sk+ydgRt80l05Y7BNqG+/lUnMjbIP5jIUzfpqtL2XA3oMIAp+UeoDt6yQKBgE6f\nKcLwOYoMrjC+VTe8mvmFyuFJqM9WASGfgvO/5x/3aqMi+78+/+noNmH4bej2SsTg\n+QRKKqMNCLQnNmn3UYNLm6LXoc9t2gdIphBMLxL2L3zx+3IIvXl4\ntDD81zZNMkErG9wyyNrgxtgl8RZQcu4mggyrRu/CMh\nAU4EdEzxmT3jtAg28bGUys1ZINw0OY2Tlr4wZzW/iaIIK34VvtsByrNJ1G4nKlnS\n6xIYt5gv7buhMI/E8MBcf5EOThegr0kS/GYTd2H5u/Oj+gE33+V5C9qdk84v2Hn6\n1dUqBNjWjtlbRXjxFv4UAQ4=\n—–END PRIVATE KEY—–\n”, “client_email”: “firebase-adminsdk-0fcdc@be.iam.gserviceaccount.com”, “client_id”: “10713329946488”, “auth_uri”: “https://accounts.google.com/o/oauth2/auth”, “token_uri”: “https://oauth2.googleapis.com/token”, “auth_provider_x509_cert_url”: “https://www.googleapis.com/oauth2/v1/certs”, “client_x509_cert_url”: “https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-0fc.gserviceaccount.com” } in ./.keys/admin.keys.json I want to import that file in index.ts. When I did something like this import firebaseKeys from ‘./.keys/admin.keys.json’ […]

Categories
Development JSON

VSCode Extension webview load json file problem

I am trying to build a project where I have one json file that I have to parse in my main file. But I cannot include it in main file. In terminal there is no error both for main.ts and main.js. Webview panel is showing the content from the html but nothing from the main […]

Categories
Development

TypeScript cannot find namespace

I am trying to create a web game using webGL, TypeScript and node. I have a file structure that currently looks like this > node_modules > src engine.ts webgl.ts index.ts index.html package.json engine.ts looks like this: namespace EngineSpace { export class Engine { // …. } } and webgl.js: namespace EngineSpace { export class WebGLUtil […]

Categories
Development

Jest & React & Typescript & React-Testing-Library error

I have a React/NextJS project setup using Typescript and am adding unit testing with Jest and React Testing Library. A unit test for my component looks like this: import React from ‘react’; import ‘@testing-library/jest-dom/extend-expect’; import { render } from ‘@testing-library/react’; import AppLayout from ‘.’; describe(‘<AppLayout>’, () => { it(‘renders children’, () => { const children […]

Categories
Development

“Navbar refers to a value, but is being used as a type here” when trying to render a shallow copy of my component when testing

I am trying to write a test to my React component, using TypeScript, Jest as my test runner and Enzyme for testing my React components. Whenever I pass my component into the shallow Enzyme function, I get the ts error “‘Navbar’ refers to a value, but is being used as a type here.”, and underneath […]

Categories
Development

How to correctly type the apply method for browser console logging functions?

I’ve written the below class to capture the console.log function in my app so I can review the logs on devices where I can’t easily access the browser console and so later I can bundle the captured logs when reporting errors. In order to get it working, I’ve had to add ts-ignore like this: // […]

Categories
Development

WebStorm breakpoints issue with TypeScript React App (using webpack)

I tried to configure the JavaScript Debugger as the WebStorm website is telling so: https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/ However, it worked like for 2 minutes and it doesn’t work anymore, I can’t tell why.. Is it at least stable with TypeScript? Can I use the JavaScript Debugger? Edit 1 (based on @lena comment) Here you can find my […]