Typescript 默认属性值样式指南

Question

是否有关于如何设置默认属性值的样式指南？最好官方发布。

class MyClass {
    public foo = 'asdf';
}

并且

class MyClass {
    public foo: string;
    constructor() {
        this.foo = 'asdf';
    }
}

两者都编译为

var MyClass = /** @class */ (function () {
    function MyClass() {
        this.foo = 'asdf';
    }
    return MyClass;
}());

第一种写法更加简洁，类似于C#语言。而第二种写法更接近编译输出的语法（如果有定义文件的话），属性类型也更明确。

我查看了以下网站：https://www.typescriptlang.org/docs/home.html、https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines 和 https://angular.io/guide/styleguide。

- William Lohan

Answer 1

我不知道有哪个“官方”的样式指南在任何地方具体规定了这一点。

自从ES2015以来，类已成为JavaScript的一部分。如果你的TypeScript 目标版本是ES6或更高版本，则上述两者都编译为

class MyClass {
    constructor() {
        this.foo = 'asdf';
    }
}

此外，JavaScript中的类字段目前（截至2017年7月）是一个第三阶段提案，这意味着它们很有可能最终被纳入该语言。 因此，编译输出最终可能是：

class MyClass {
    foo = 'asdf';
}

所有这些都是我说的，我的意思是不要过于担心你的TS代码与编译后的JS之间的差异，因为这种差异最终会消失，而在此之前，TypeScript的一个重要作用就是让你在今天就可以使用明天的JavaScript功能。来自TypeScript手册的说明：

“在TypeScript中，我们允许开发人员现在使用这些技术，并将它们编译成适用于所有主要浏览器和平台的JavaScript，而不必等待JavaScript的下一个版本。”

好的，所以我的建议（非“官方”）是这样做：

class MyClass {
    public foo: string = 'asdf';
}

你已经明确了属性类型并将其初始化为类字段。这是两全其美的最佳选择，对吧？也许？

总之，希望这有所帮助；祝你好运！

- jcalz

---

通过您的建议，我从默认的Angular CLI tslint.json 中得到了来自tslint的 [tslint] Type string trivially inferred from a string literal, remove type annotation (no-inferrable-types) 的警告，但是我可以添加 ignore-properties 到 https://palantir.github.io/tslint/rules/no-inferrable-types/，谢谢。 - William Lohan