Consider the following scenario with two files, file.ts:
let a: Message = "foo"
let b: Message = "bar"
let c: Message = "baz"
Now let's introduce a second file, file2.ts
type Message = string
function fun(abc: Message): void { }
When using function fun, we can pass a string instead of Message due to it being a type alias. How can we create isomorphic types that behave like another type but enforce strict checks, similar to Haskell's newtype?
If you explore the documentation on string literal types (specifically under "String literal"), you'll find a concept similar to an enum. However, instead of choosing from a range of options, it restricts a string type to only specific values:
type Message = "apple" | "banana" | "orange";
One way to achieve this is through enumerating simulation.
type Item = "apple" | "banana" | "orange";
const Item = {
Apple: 'apple' as Item,
Banana: 'banana' as Item,
Orange: 'orange' as Item
}
Then you can implement the following:
function itemFunction(fruit: Item): void {
// functionality goes here, for example
if (fruit === Item.Banana) {
/// ...
}
}
itemFunction(Item.Apple) // works fine
itemFunction("banana") // works fine
itemFunction("pear") // gives an error
To restrict the values of the Message type to a specific set of options, you can define it like this.
type Message = "apple" | "banana" | "orange";
function welcome(message: Message) {
alert(message);
}
welcome("apple"); // runs successfully
welcome("not-on-the-list-will-fail"); // will throw an error
Here is a possible solution:
let value:Item | string | any = "bar"The code snippet below can be found in settings.ts: @Component({ selector: 'page-settings', templateUrl: 'settings.html' }) export class SettingsPage { } } Similarly, in the app.component.ts file, we are able to assign the Clas ...
Is there a way to create a variable in React that can be either a component or a string? Like this: function MyComponent(): JSX.Element { let icon: JSX.Element | string = "/example.png"; return <div>{typeof icon === "JSX.Element" ? icon : <i ...
In this scenario, a function is provided with the task of obtaining a reference to a DOM element and executing certain actions: function getElementAndDoStuff() { // element: HTMLElement | null const element = document.getElementById('id'); ...
Does anyone have any code samples showcasing how to integrate Surveyjs with React and TypeScript? I attempted to import it into my project and utilized the code provided in this resource. https://stackblitz.com/edit/surveyjs-react-stackoverflow45544026 H ...
Currently, the image is cropped by default when loaded, but I would like the crop to only occur when the crop button is clicked. I tried searching on Google and found autoCrop:false, but I am unsure where to place it in the code. Below is the HTML code: ...
Using VS Code Intellisense can greatly enhance productivity when working with internal project files, providing helpful autocompletion features and utilizing written JSDoc comments. However, my current projects involve custom JavaScript libraries stored i ...
Currently, I am exploring the integration of GraphQL with Angular. So far, I have been able to scaffold the schema successfully using the @graphql-codegen package. The services generated are functional in querying the database. However, I've noticed ...
My current challenge involves extending an existing interface within KendoUI that originates from a specific definition file. Typically, using interface merging makes this task simple, but the interface I want to extend exists in the unique global namespac ...
Implementing an Angular template to read .CSV files and generate a table involves creating two separate files: one for the header and another for the table content. For the header CSV file: header.csv https://i.stack.imgur.com/ojMo6.png For the table da ...
Upon clicking a button, I am attempting to open a modal popup but encountering an error: The button click works, however, the popup does not appear after the event. test.only('Create Template', async({ page })=>{ await page.goto('h ...
Creating a custom class extending Container in PIXI.js: export class CustomContainer extends Container { constructor(width: number, height: number) { super(); var sprite: Sprite = Sprite.fromImage("assets/images/elephant.png"); ...
Exploring ways to incorporate Scanner-JS into my Angular2 project, a tool I discovered while tinkering with the framework. Being a novice in Angular2, this question might be elementary for some. I successfully installed scanner-js via npm npm install sc ...
Is there a method to add breakpoints to .typescript source files in my Angular application with Firefox Developer Tools? While I am able to add breakpoints to the generated javascript files, is it possible to debug the .ts source files directly? This quer ...
I am creating a unique service that utilizes Node-red to send emails only when a GET request is made to 127.0.0.1:1880/hello (node-red port), and an Angular 4 web app (127.0.0.1:3000) for client access. Upon accessing the /hello page from a browser, I rec ...
Let's talk about titles. Well, maybe not this one. I tried to come up with a good title, but it didn't work out as planned. In my coding journey, I have created a cool interface called DefaultTheme: export interface DefaultTheme { colors: ...
Experiencing challenges with saving the history of updates and modifications on a State. I have an object called "Journey" which includes a list of workshops (another array). Whenever I update my list of workshops, I aim to create a new array that captures ...
I'm currently working on a component that involves some code: export class AddNewCardComponent { public concept = []; constructor( private _router: Router, private _empDiscService: empDiscService) { } ngOnIni ...
I've encountered an issue with my code involving loading values into the array usageCategory within an inline function. Despite successfully adding values to the array inside the function, I am unable to print them outside it. getAllUsageCategoryElem ...
I have an enum called "Languages" with different language codes such as nl, fr, en, and de. export enum Languages { nl = 1, fr = 2, en = 3, de = 4 } Additionally, I have a constant variable named "language" assigned the value 'de'. My g ...
I attempted to utilize TypeScript bindings in my project: npm install moment --save typings install moment --ambient -- save test.ts file content: import {moment} from 'moment/moment'; I also tried without using TypeScript bindings: npm inst ...