Post(s) tagged Typescript

Typescript Interface Pick, Omit usage, and Extends multiple interfaces

Sample interfaces

export interface Credentials {  
  email: string;
  password: string;
}

export interface User {
  firstName: string;
  lastName: string;
  age: number;
}

Pick constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type

Pick syntax

Pick<Type, Keys>

Example

var newInterface: Pick<Credentials, 'email'> = {} as Pick<Credentials, 'email'>;
//newInterface contains email only

Omit constructs a type by picking all properties from Type and then removing Keys (string literal or union of string literals).

Omit syntax

Omit<Type, Keys>

Example

var newInterface: Pick<Credentials, 'email'> = {} as Pick<Credentials, 'email'>;
//newInterface omits email

Extends multiple interfaces

interface UserCredentials extends Credentials, User { }  //Extends Credentials, User
interface UserCredentials extends Credentials, Pick<User, 'firstName' | 'lastName' > { }  //Extends Credentials, User (firstName, lastName only)
interface UserCredentials extends Credentials, Omit<User, 'firstName' | 'lastName' > { }   //Extends Credentials, User (age only)


Posted on February 18, 2022

Import JSON array from local file to Typescript array

The sample JSON file content (data.json):

[
  {
    "FirstName": "Joe",
    "UserId": 1
  },
  {
    "FirstName": "Jack",
    "UserId": 2
  }
]

Next, add appropriate resolveJsonModule entry to tsconfig.json entry

{
    "compilerOptions": {  
      "esModuleInterop": true
      "resolveJsonModule": true
    } 
}

Finally, import the data and access it using the below code.

import data from './data.json';

interface Person{
    FirstName: string,
    UserId: number,
}

const userArray:User[] = data as User[];


Posted on February 27, 2022

Angular how to change environment variable values after build

Sample environment variables for development & production environment.ts

export const environment = {
    env: 'Dev'
};

environment.prod.ts

export const environment = {
    env: 'Prod'
};

In the above code using the window object like below:
environment.ts

export const environment = {
    env: window['env'] || 'Dev'
};

environment.prod.ts

export const environment = {
    env: window['env'] || 'Prod'
};

Create a .js file in the root directory and add it to index.html file as a script

<script src="./config.js"></script>

In the config.js file, you can update the environment values without rebuilding your application like below:

window['env'] = 'Uat';


Posted on March 24, 2022

How to exclude Typescript build .js, .js.map files from the project on VS Code

You can exclude the Typescript build .js .js.map from VS Code using the below steps.
Add the below code to .vscode folder settings.json file, this will exclude .js and.js when the typescript file present for the corresponding .js and .js.map file

{
    "files.exclude": {
        "**/*.js": {
            "when": "$(basename).ts"
        },
        "**/*.js.map": {
            "when": "$(basename)"
        }
    }
}


Posted on March 24, 2022
Sponsors