為了檢驗中文命名在Angular中的支援程度, 把Angular官方入門教程的示例程式碼中儘量使用了中文命名. 以下原始碼庫在此.

建立專案

不支援中文命名:

$ ng new 英雄榜
Project name "英雄榜" is not valid. New project names must start with a letter, and must contain only alphanumeric characters or dashes. When adding a dash the segment after the dash must also start with a letter.
英雄榜
^
 

文字繫結

不支援中文命名變數

app.component.ts:

export class AppComponent {
  題目 = '示例';
}

app.component.html:

<h1>{{題目}}</h1>

報錯:

compiler.js:466 Uncaught Error: Template parse errors:
Parser Error: Unexpected token Lexer Error: Unexpected character [題] at column 1 in expression [題目] at column 2 in [{{題目}}] in ng:///AppModule/
 
[email protected]:4 ("<h1>[ERROR ->]{{題目}}</h1>"): ng:///AppModule/[email protected]:4
Parser Error: Lexer Error: Unexpected character [題] at column 1 in expression [題目] at column 2 in [{{題目}}] in ng:///AppModule/[email protected]:4 ("<h1>[ERROR ->]{{題目}}</h1>"): ng:///AppModule/
 
[email protected]:4
Parser Error: Lexer Error: Unexpected character [目] at column 2 in expression [題目] at column 3 in [{{題目}}] in ng:///AppModule/[email protected]:4 ("<h1>[ERROR ->]{{題目}}</h1>"): ng:///AppModule/[email protected]:4

建立component

建立新component, 貌似支援中文:

$ ng generate component 英雄
  create src/app/英雄/英雄.component.css (0 bytes)
  create src/app/英雄/英雄.component.html (25 bytes)
  create src/app/英雄/英雄.component.spec.ts (628 bytes)
  create src/app/英雄/英雄.component.ts (310 bytes)
  update src/app/app.module.ts (398 bytes)

但是報錯:

英雄.component.ts:7 Uncaught ReferenceError: ViewEncapsulation is not defined
    at eval (英雄.component.ts:7)
    at eval (英雄.component.ts:18)
    at Object.../../../../../src/app/英雄/英雄.component.ts (main.bundle.js:58)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (app.module.ts:5)
    at Object.../../../../../src/app/app.module.ts (main.bundle.js:36)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (main.ts:4)
    at Object.../../../../../src/main.ts (main.bundle.js:74)
    at __webpack_require__ (inline.bundle.js:55)

已向Angular專案提交bug report: Avoid creating component with unicode naming, instead of throwing error after finishing creation.

後經指出, 上面的錯誤並不是由中文命名導致. 但由於HTML tag不支援中文(vuejs中也有類似問題, 需要將英雄.component.ts中:

selector: 'app-英雄',

改為:

selector: 'app-heroes',

在"app.component.html"中新增:

<app-heroes></app-heroes>

顯示正常.
鑑於Angular在建立Component時自動生成selector程式碼, 之前的bug report仍然成立, 可以認為Angular本身不支援Component使用中文命名, 但自己修改selector後似乎仍然可用(以觀後效).

新增型別

支援中文命名!

新增src/app/英雄.ts:

export class 英雄 {
  id: number;
  name: string;
}

英雄.component.ts中:

  hero: 英雄 = {
    id: 1,
    name: '小明'
  };

顯示列表

由於{{}}中不能用中文命名, 因此<li *ngFor="let hero of heroes">中的hero不能用中文命名, 而heroes如果改為英雄們, 會報錯:

Parser Error: Lexer Error: Unexpected character [們] at column 15 in expression [let hero of 英雄們] at column 16 in [let hero of 英雄們] in ng:///AppModule/[email protected]:6 ("
<ul class="heroes">
  <li *ngFor="let hero of 英雄們">
    <span class="badge">{{hero.id}}</span>[ERROR ->] {{hero.name}}
  </li>
</ul>"): ng:///AppModule/[email protected]:42

小結

限於時間, 評測只能暫告一段落. 在嘗試的很小一部分功能中, 比較純粹的TypeScript部分允許中文命名, 但牽涉到模板(Template)的部分對中文命名的支援非常有限.