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)
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[];
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';
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)"
}
}
}