Should I use a string literal as a type of a returned value in TypeScript?

Question

I have utility methods like this:

private static getClassName(): 'my-component-class-name' {
    return 'my-component-class-name'
}

I use exact return value as the return type and TypeScript compiles it properly, without errors.

Is it a good practice to use this approach or should I put string there instead?

To make sure that it's not just ignored, I tried this one and typescript showed me an error:

private static getClassName(): 'my-component-class-name' {
    return 'wrong-value'
}

Here is the error:

Type '"wrong-value"' is not assignable to type '"my-component-class-name"'.

Here is the link to TypeScript playground with this code.

Answer 1

Not recommend!

TypeScript is a type clear script, you should use an explicit type as the return type.

TypeScript compiler will create a return type from string literal 'my-component-class-name' for getClassName() , it's a Type Aliases , equal to type returnType = 'my-component-class-name' and set the returnType as the getClassName() 's return type. however, the return 'wrong-value' is typeof 'wrong-value' s type, which is a string type, not equal to defined returnType .

if you want to let your code build success, just add | string | string after 'my-component-class-name' . it's an union type.

code snippets:

type returnType = "my-component-class-name";
var value: returnType = "my-component-class-name";

type returnType1 = "my-component-class-name" | string;
var value1: returnType1 = "union type";

type returnType2 = true;
var value2 : returnType2 = true;

type returnType3 = 1;
var value3: returnType3 = 1;

class A {
  public static getClassName(): returnType {
    return value;
  }

  public static getClassName1(): returnType1 {
    return value1;
  }

  public static getClassName2(): returnType2 {
    return value2;
  }

  public static getClassName3(): returnType3 {
    return value3;
  }
}

console.log(A.getClassName());
console.log(A.getClassName1());
console.log(A.getClassName2());
console.log(A.getClassName3());

the output is:

my-component-class-name
union type
true
1

Type Aliases doc: http://www.typescriptlang.org/docs/handbook/advanced-types.html .

Answer 2

As described in another answer, the compiler is ignoring your return type. Future compilers might not be so forgiving. If you really want to declare a constant, why not use a constant and not a function? Or, since you want the class name, get it from the JavaScript runtime.

Edited to add: as the comments on that answer point out, myObj.constructor.name might not survive minification or other class mangling. I've done things like getClassName functions in TypeScript before, but end up refactoring them when I think harder about why I want that name. Chances are, you want to call out some trait that isn't well-defined in JavaScript, and which wouldn't survive a refactoring that turns your class into an interface or mixin. So consider calling the method getXXXType where XXX describes the qualities you're most interested in, for example getNumericalOperatorType , getDateFormattingType , getHipaCertificationType , etc. This will also give you breathing room to add different kinds of types when you discover that your class has taken on more than one responsibility .