What is the standard for use of quotes in Typescript?

Question

I notice in my application that TsLint is suggesting:

static $inject = [
        '$http',
        '$q',
        '$scope',
        'configService',
        'stateService',
        'utilityService'
    ];

for the above that:

Message 2   TsLint: ' should be "

Is this a suggested standard now for Typescript ?

Alienism

BTW you can add a project local tslint file and change to a double quote standard "quotemark": [true, "double"] – Tintoretto

Because of Apostrophe ' which can often be contained within common text output (usually much more than "), it's good to use doble quotes "". It's also more consistent with other C-like languages where ' is used for single chars. That being said, it doesn't really matter - rule of thumb - use what's already in the project and be consitent about it. One of the ideologies is also to use "" for textual output and ' for "programming" strings like constant values – Pilch

Answer 1

There is no particular standard to use single quotes for characters and double quotes for string but it is suggested to use double quotes for strings and vice versa.

From the docs:

Just like JavaScript, TypeScript also uses the double quote (") or single quote (') to surround string data.

Gage

The Google JavaScript Style Guide suggests to prefer single quote : "For consistency single-quotes (') are preferred to double-quotes ("). This is helpful when creating strings that include HTML:". google-styleguide.googlecode.com/svn/trunk/… – Garrygarson

@Rahul, the docs says double quote OR single quote, so which one is it? – Striction

For my current project, I'm not typing single or double quotes, and letting prettier and vscode auto fix them to doubles for better JSON compatibility. – Oleograph

Answer 2

This was the first result in my google search for: "double vs single quotes typescript."

Considering the accepted answer is a little old (but still valid from the docs) I would like to add this quote from: https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines updated on November 27, 2015:

Use double quotes for strings.

Granted "the code is more what you'd call 'guidelines' than actual rules." :)

Pandean

From typescript devs themselves--TypeScript Github issue #5811: "But to specifically answer your question, we occasionally work in languages other than TypeScript. All those languages either require double quotes for strings (e.g. C#, C++, F#) or at least allow double quotes for strings (e.g. Python, Ruby). It's easier not to ask people to shift their muscle memory when switching back and forth between languages." – Illuminate

it worth mentioning that the linked guidelines MUSTO NOT be considered community code guidelines. They are exclusively for internal Typescript codebase contributors. – Woosley

single-quotes are a little easier to type (no shift key) but double-quotes work for strings in just about every language - and for many (most?) languages they're required - seems like a good reason to just default to double quotes everywhere – Dissipated

In ruby it makes sense to only use double quotes when you plan on doing interpolation. When ever I see single quotes I think that there won't be anything going on inside the string. – Onida

from that page: "These are Coding Guidelines for Contributors to TypeScript This is NOT a prescriptive guideline for the TypeScript community" – Fredia

Working in a mixed language environment (in my case c# and typescript), it's easier to search for string literals across the entire codebase if you can use the same type of quotes for both – Atalanti

This answer is cursed :) In my experience with ionic which uses Typescript I got an error when used single quotes to initialize a string, and it was really unexpected. Also the error message was obscure. – Heptameter

These are the internal guidlines for TypeScript Contributors! Now this is stated with really big letters at the beginng of the page. This is not a valid reference. – Hammered

Answer 3

I would go with single quotes. I pretty much agree with this guy:

• Prefer single quotes (') unless escaping.

Reason: More JavaScript teams do this (e.g.airbnb, standard, npm, node, google/angular, facebook/react). Its easier to type (no shift needed on most keyboards). 

Prettier team recommends -single quotes as well double quotes

Also, even dotnet new templates use single quotes for Angular apps.

Gambit

Strangely, seems he's wrong about Prettier. That link (the one he references!) says they prefer double, not single. And the comment there that "FYI I prefer double quotes because JSON requires them and I often have to move snippets of object literals between JSON documents and javascript code." is fairly convincing. Oh well, YMMV, as with most subjective style decisions, I suppose. – Brazilein

On some keyboards the single quote character is even harder to press, i.e. on the German keyboard you need to press shift and a key left to the return key, so you either need to use both hands (left shift key and right single quote key pressed with pinky) or need to press two keys that are directly on top of each other (right shift key and single quote key just above it). The latter sounds easier, but it cumbersome to make that hand movement. If you need to add a lot of single quotes it's getting annoying, because you cannot use your mouse in the meantime unless you use your left hand. – Treasonous

I really recommend double quotes, because of JSON. – Tarton

The 'this guy' link address changed: basarat.gitbook.io/typescript/styleguide#quotes – Vanna

Answer 4

The coding standards document as linked by @crowebird is a good document: https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines

I like all the guidelines except for the double quotes - when it comes to using typescript with Angular 2.

This question isn't about Typescript with Angular 2, but readers may be Angular 2 users. Using single quotes makes for easier reading when marking up html strings in the typescript.

Take the following example:

@Component({
    ...,
    template: '<div class="some-class-name"></div>'
})

But if you are using double quotes you have to escape the double quotes:

@Component({
    ...,
    template: "<div class=\"some-class-name\"></div>"
})

The first option is preferable. Most of the Angular 2 demos use single quotes.

Lydalyddite

Same rule can be applied for single quotes when you use them in html. its more practical especially for html code to use ``` template strings ``` – Rainey

Using backtick ` for the html string should solve the escape issue. – Eldoneldora

you should read the bold comments at the top of that page: "These are Coding Guidelines for Contributors to TypeScript This is NOT a prescriptive guideline for the TypeScript community" – Fredia

Do people really inline their templates?? – Spermogonium

Further reading on Html-Tags with Javascript content: medium.com/geekculture/… – Vanna

Answer 5

Since it seems like there is no hard and fast answer, what's consistent across languages?

Bash/Powershell/Ruby: " enables interpolation and escape sequences. ' means the string is exactly as it is typed.

C-style languages (Java, C#, C++ etc): " is a string while ' for single characters.

Python/Javascript: no difference. If a string needs to contain ", you might delimit it with ' and vice versa.

JSON: double quotes only. This is the tilting argument.

Across languages, single quotes imply a lack of escape sequences and interpolation.

Typescript has backwards compatibility for ` (back-tick) strings so my preference is to use " (double quote) for non-escaped strings, generally free of white-space and in the following character set:

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789- or [\w\d-]* in many regex dialects. This means you can copy pasta object literals into JSON and vice versa. Quite useful in practice for little investigations, tests, etc.

For everything else, ` (back-ticks) since it cuts down on escape sequences and enables interpolation.

Note: I am not an advocate of JSON, it just seems inescapable these days ;)

Necessity

Answer 6

If you are going to be embedding template strings, then back ticks:

`

Straight from here

const lyrics = 'Never gonna give you up';
const html = `<div>${lyrics}</div>`;

I personally prefer single quotes because '' vs "" is slightly less confusing to eyeball when dealing with empty string constant.

But it's ok to override that rule if you need embed a single quote. Use the double quotes to wrapper things to avoid escaping headaches.

Flexibility is the key.

Twerp

Answer 7

Locate your tslint.json file and change the following json setting(s)

"quotemark": [
      [
        true,
        "double"
      ],
      [
        true,
        "single"
      ]
    ],

This allows for single and double quote marks in your ts files.

When using Visual Studio a restart of Visual Studio might be required.

Heinrick

I will prefer directly setting it up false "quotemark": [false] – Sistrunk