Can you explain the distinction between String[] and [String] in typescript? Which option would be more advantageous to use?
Can you explain the distinction between String[] and [String] in typescript? Which option would be more advantageous to use?
They are actually quite different!
New Information: Ever since TypeScript 2.7 was introduced, the distinction has become less clear (more details below):
string[] indicates an array with elements of type string (it can have any number of elements, including none).[string] signifies an array with at least one element, and that first element must be a string
[type] syntax can be expanded, such as [type1,type2,type3,typeN], which then requires the array to have at least N elements, with the first N being specified types, while the subsequent types are a union of those types.Below are some examples to clarify this concept:
const testA: string[] = []; // correct
const testB: [string] = []; // Error, needs a string at index 0
const testC: [string, number] = ["a", 0]; // correct
const testC1 = testC[0]; // testC1 is recognized as a string
const testC2 = testC[1]; // testC2 is identified as a number
const testD: [string, number] = ["a", 0, "1"]; // acceptable before 2.7, invalid after
const testD1 = testD[2]; // testD1 is interpreted as string | number
const testE: [string, number] = ["a", 0, 1]; // acceptable before 2.7, problematic after
const testE1 = testE[2]; // testE1 is inferred to be string | number
const testF: [string, number] = ["a", 0, null]; // Error, null doesn't match type string|number
Changes in TypeScript 2.7
Now, the size is fixed by default. To allow [string] to have more than one entry, you need to specify it using a rather cumbersome method:
interface MinimumStrTuple extends Array<number | string> {
0: string;
}
Let's go back to the basics - what exactly is TypeScript? TypeScript serves as a typed superset of JavaScript that ultimately compiles down to javascript.
In contrast, when writing code in JavaScript without types, you may run into issues like this:
// It's acceptable to have code like
let str = 'sfafsa' ;
str = true ;
This is where TypeScript comes in handy by allowing you to write code with specified types and flagging errors before compilation if you try assigning a value that does not match the variable type. For instance, if you experiment with different ways to define an array.
They end up being identical, why? Because TypeScript will render them the same way. For instance:
let str: String[] = ['ge', 'gege', 'egeg'];
let str2: [String] = ['ge', 'gege', 'egeg'];
Both will be compiled to:
var str = ['ge', 'gege', 'egeg'];
var str2 = ['ge', 'gege', 'egeg'];
Therefore, they compile to the same result, so feel free to choose whichever method works best for you. I suggest sticking to one convention throughout your code base. By the way, I personally prefer using syntax like let str: String[]=[];
Note: If you opt for the syntax [String], it implies that your array must contain at least one String >> therefore, an empty array will trigger an error.
A big thank you to @Lusito for making sure the answer was thorough.
The Quasar website explains that for writing universal code, the created and beforeCreate lifecycle hooks in Vue components are executed in Server Side Rendering (SSR). This raises a question: What about setup? How can I achieve SSR functionality with th ...
When I open a form that has a link to a list and try to access the list, I encounter an "id" undefined error for the form we came from, which was already functional. The issue arises when I have a GET page where I present a form to modify a record at /loc ...
Recently delved into the world of React.js and currently attempting to create a reusable header that can switch between two states: one for when the user is logged in, and another for when the user is not logged in. // Header.js var Header = React.createC ...
I need to create a form with a Photo Upload Input that allows users to upload pictures before submitting the form for faster processing. The form should also support uploading multiple files, display a progress bar, and provide a preview of the uploaded im ...
Can anyone help me understand how to map the result from a service call to an object using http.get and Observables in Angular 2? Please check out this example In my getPersonWithGetProperty method, I am trying to return an Observable of type PersonWithG ...
Has anyone successfully implemented a function in react.js to change the image source based on the direction of an arrow click? For instance, I have an array set up where clicking the right arrow should move to the next image and clicking the left arrow s ...
Trying to add a Bookmarklet to a Github README.md, but encountering issues with the markdown code: [Bookmarklet](javascript:alert('not-working')) It appears that the javascript in the link is being stripped out from the compiled output. Is this ...
I've encountered an issue while attempting to extend a class service from another class service in NestJS and utilize DI to load it in a third service. The error message I'm receiving from Nest is: Error: Nest can't resolve dependencies of ...
I am currently in the process of developing an angular application with a node.js + express backend. After successfully retrieving the necessary data from MongoDB and being able to view it through terminal, I encountered a challenge when trying to display ...
I would like to implement a functionality where, upon logging in, the user is directed to a Main Page that opens in a new window. This Main Page contains two buttons, each of which will open a specific report associated with it in a new window when clicked ...
Just successfully connected mongoDB with mongoose, but encountered an error stating TypeError: Cannot read properties of undefined (reading 'split'). How can I resolve this issue? Below is the code snippet: export const dbConnect = async () => ...
I am attempting to use a library for my Nuxt project, following the guidelines laid out in the documentation available here: getting-started Despite following the instructions provided, I keep encountering errors such as "Unknown custom element: - did you ...
HTML I'm looking to add a FAQ question within the div with the class "section-center" <body> <section class="questions"> <div class="title"> <h2>FAQ SECTION</h2> < ...
I have a class that extends EventEmitter and is capable of emitting the event hello. How can I properly declare the on method with a specific event name and listener signature? class MyClass extends events.EventEmitter { emitHello(name: string): void ...
Could someone help me understand why my React application, set up with Webpack hot reload, is not functioning properly? Below is the content of my webpack.config.js: const path = require('path'); module.exports = { mode: 'development&apo ...
Apologies for asking what may seem like a silly question. I'm still new to using AngularJS and recently came across a neat little scroll directive on http://jsfiddle.net/88TzF/622/. However, when I tried implementing the code in the HTML snippet below ...
Currently, I'm utilizing the following libraries: react v16.2.0, react-redux v5.0.7, react-router-dom v4.2.2, redux v3.7.2 The main goal is to update some properties within the Auth component and have these changes reflected when the user visits the ...
After browsing through multiple threads on accordions, none seem to match my current structure which I believed was effective. In an attempt to learn and build elements from scratch, I created the following accordion with some help from Google and experi ...
import React, { PropTypes } from 'react'; import Dialog from 'material-ui/Dialog'; export default class CustomModal extends React.Component { constructor(props){ super(props) } handlePrimaryButton = () => { this.prop ...
I've searched for similar questions, but haven't found one that matches my issue. Can someone help me figure out what to do next? In my Visual Studio project, I used package.json to download jquery typings into the node_modules folder: { "ver ...