Typescript on Aamnah - Frontend Web Developer

Working with TypeScript Modules in Netlify Edge Functions

Mon, 01 Jan 2024 14:27:01 +0200

Importing TS Files

Netlify Edge Functions use Deno as the runtime, so you’ll follow Deno standards for importing/exporting files

In your import statements, you need to add the .ts file extension at the end of your filename. For example ./person.ts. File extensions are required when importing modules. All your imported files should have file extensions for their own imports too.

1// Netlify Function
2import Person, { sayHello } from "../someDir/person.ts";

1// ../someDir/person.ts
2import { randomFoo } from "./foo.ts"; // nested imports need to have file extensions too
3
4export const sayHello
5export default Person

Otherwise you will get similar to the following error:

Sorted imports in TypeScript projects

Thu, 28 Dec 2023 14:28:39 +0200

1npm install --save-dev \
2  @typescript-eslint/parser \
3  eslint-plugin-import \
4  eslint-import-resolver-typescript \
5  eslint-plugin-simple-import-sort

 1// .eslintrc.cjs
 2module.exports = {
 3  extends: [
 4    'eslint:recommended',
 5    // ...
 6    'plugin:import/recommended',
 7    'plugin:import/typescript',
 8  ],
 9  parser: '@typescript-eslint/parser',
10  parserOptions: {
11    //  ...
12    sourceType: 'module',
13  },
14  plugins: [
15    //  ...
16    'simple-import-sort', 
17    'import'
18  ],
19  rules: {
20    // ...
21    'simple-import-sort/imports': 'error',
22    'simple-import-sort/exports': 'error',
23    'import/first': 'error',
24    'import/newline-after-import': 'error',
25    'import/no-duplicates': 'error',
26  },
27  settings: {
28    //  ...
29    'import/resolver': {
30      typescript: true,
31      node: true,
32    },
33  },
34}

TypeSScript config - `target` vs. `lib`

Mon, 06 Sep 2021 08:39:24 +0500

target is pretty self explanatory, it determines which version your final JS code will be compiled down to.
lib basically tells TS what features not to complain about
By default, when you specify a target, the default lib includes that target and dom
lib specifies a set of bundled library declaration files that describe the target runtime environment.

--lib  Specify a set of bundled library declaration files that describe the target runtime environment.
one or more:  es5, es6, es2015, es7, es2016, es2017, es2018, es2019, es2020, es2021, esnext, dom, dom.iterable, webworker,                          webworker.importscripts, webworker.iterable, scripthost, es2015.core, es2015.collection, es2015.generator, es                         2015.iterable, es2015.promise, es2015.proxy, es2015.reflect, es2015.symbol, es2015.symbol.wellknown, es2016.a                         rray.include, es2017.object, es2017.sharedmemory, es2017.string, es2017.intl, es2017.typedarrays, es2018.asyn                         cgenerator, es2018.asynciterable, es2018.intl, es2018.promise, es2018.regexp, es2019.array, es2019.object, es                         2019.string, es2019.symbol, es2020.bigint, es2020.promise, es2020.sharedmemory, es2020.string, es2020.symbol.                         wellknown, es2020.intl, es2021.promise, es2021.string, es2021.weakref, esnext.array, esnext.symbol, esnext.as                         ynciterable, esnext.intl, esnext.bigint, esnext.string, esnext.promise, esnext.weakref

lib does NOT include any polyfills. If you add ESNext, it’ll not mean that TypeScript will compile down your TS code written in ESNext to your ES2015 or whatever target. It will mean that you’re kina sorta promising TS that these libs will be supported, so don’t complain about it.

Using Typescript to generate RequireJS (AMD) modules and export behaviour

Thu, 06 May 2021 04:18:45 +0500

I’m compiling to AMD modules.

Default exports are exported as exports.default = Awesomesauce
Individual exports with export class Awesomesauce output exports.Awesomesauce = Awesomesauce
Individual exports with export = Awesomesauce output return Awesomesauce. exports = syntax specifies a single object that is exported from the module

Default exports work fine when i am importing TS modules into TS modules manually. But when DurandalJS/KnockoutJS does the automatic ViewModel+View binding i run into weird issues. Hence this thorough checkup of what exports are like and what DurandalJS/KnockoutJS is expecting..

Globals in TS

Tue, 27 Apr 2021 15:05:03 +0500

Old way

create a foo.d.ts file and declare a var

1// Global file
2var ENVIRONMENT = '@ConfigurationManager.AppSettings["Environment"]'; // picking up the env value from a Web.config file in .NET MVC project

1// globalConstants.d.ts
2declare var ENVIRONMENT: string

1// foo.ts
2const Sentry = {
3    dsn: "https://iamawesome.sentry.dsn",
4    logger: "Awesome Web App",
5    environment: ENVIRONMENT, // this is defined globally 
6  },

New way

Use globalThis to access any globally defined variables (no need to create type declarations). read more

You must use var (no let or const)