TypeScript 強轉型的地雷

用 Visual Studio 撰寫 TypeScript 一整個就很開心開心，只要好好的進行型態宣告，就可享受到跟強型別一樣的 IntelliSense 提示，實在太開心了，然後就大意了，忘記了其實骨子裡還是 JavaScript 這件事。

在取回後端的 json 資料的時候，貪圖方便就直接進行強轉型，哈哈！這裡存在不確定性，我就踩到地雷了！當然如果後端是可靠的，直接強轉型是不會有問題的。

我想都已經進行型別宣告了，難到不能自動轉型嗎？哈哈！在網路上找了很久都沒找到，找到的方式都需要二次宣定去做轉型。

簡單的展示一下這個問題，建立一個 any 的物件 a，然後強轉型成 DataModel 的物件 b，這時候 a 跟 b 其實還是同一個 Instance

interface DataModel {
    id: number;
    status: string;
}

let a: any = { id: '1', status: 3 };

let b: DataModel = a as DataModel;

在存取 property 時都還是 a 的資料型態，這樣在調用該型態的方法時就會出錯。

為了型態的正確必須進行轉換：

let b: DataModel = <DataModel>{
    id: Number(a.id),
    status: String(a.status),
};

[Angular] 簡單製作多國語系

我想要用一種簡單而且直覺的方式製作多國語系，想像的用法如下:

user-list.component.html

<h2>{{lang['T_編輯使用者']}}</h2>

<div>
    <p *ngIf="lang.id == 'en'">
    Complicated English description...
    </p>
    <p *ngIf="lang.id == 'tw'">
    複雜的中文描述...
    </p>
</div>

<button type="submit">{{lang['B_儲存']}}</button>

<select [(ngModel)]="lang.id" (change)="lang.change()">
    <option *ngFor="let x of lang.options | keyvalue" [value]="x.key">{{x.value}}</option>
</select>

我希望能使用中文變數，有熟悉的文字可以讓程式看起來親切一點，對於複雜的文字區段也保留彈性，簡單的切換方式，以及狀態保留，讓 browser 紀錄選擇的語系。

user-list.component.ts

import { Component, OnInit } from '@angular/core';
import { AppLang } from 'app/app.lang';

@Component({
    selector: 'app-user-list',
    templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {

    /** 狀態選項 */
    statusItems = {
        'y': this.lang.E_啟用,
        'n': this.lang.E_停用,
    };

    constructor(
        public lang: AppLang
    ) { }

    ngOnInit() {
        let msg = String(this.lang.M_請填寫_0_的刻度值).format(3);
    }
}

已經想好使用情境了，接著來就是完成實作了!

app.lang.ts

import { Injectable } from '@angular/core';

/** 多國語言 */
@Injectable()
export class AppLang {

    constructor() {
        let _: any = {}; /* 語系字典 */
        let self: any = this;
        let names: string[] = Object.keys(this).filter(n => !'id,options,change'.includes(n));

        /* 重組語系字典 */
        Object.keys(this.options).forEach(id => {
            _[id] = {};
            names.forEach(name => _[id][name] = self[name][id]);
        });

        /* 複寫 change */
        this.change = function () {
            if (!_[this.id]) { this.id = 'tw'; }

            Object.assign(this, _[this.id]);
            localStorage['langId'] = this.id;
        }

        this.change ();
    }


    id: string = localStorage['langId'];

    options: any = {
        tw: '中文',
        en: 'English',
    };

    /** 變更語言 */
    change() { }



    /*=[ Title ]=============================================*/

    T_編輯使用者: any = {
        tw: '編輯使用者',
        en: 'Edit User',
    };
    //...

    /*=[ Field ]=============================================*/

    F_名稱: any = {
        tw: '名稱',
        en: 'Name',
    };
    //...

    /*=[ Button ]=============================================*/

    B_儲存: any = {
        tw: '儲存',
        en: 'Save',
    };
    //...


    /*=[ Enum ]=============================================*/

    E_啟用: any = {
        tw: '啟用',
        en: 'Enable',
    };
    E_停用: any = {
        tw: '停用',
        en: 'Disable',
    };
    //...


    /*=[ Message ]=============================================*/

    M_請填寫_0_的刻度值: any = {
        tw: '請填寫 {0} 的刻度值',
        en: 'Please fill in the scale value of {0}.',
    };
    //...

}

app.module.ts 配置

//...
import { AppLang } from 'app/app.lang';

@NgModule({
    declarations: [
        //...
    ],
    imports: [
        //...
    ],
    providers: [
        //...
        AppLang
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

[Angular] 將 select, radio 改成一般等於 (==)

Angular 預設的 select, radio 比對是用全等於(===)，這對用 string 的選項來說沒甚麼問題，但如果是數字選項就會出現型態不一致的問題，就必須型態轉換，這有點煩人，所以想要改成一般等於(==)，在 Angular 的原始碼找到可以複寫判斷句的地方。

app.module.ts

import { RadioControlValueAccessor, SelectControlValueAccessor } from '@angular/forms';

/* 將 SelectControlValueAccessor 的全等於改成一般等於 */
SelectControlValueAccessor.prototype.compareWith = function (a, b) {
    return a == b;
};

/* 將 RadioControlValueAccessor 的全等於改成一般等於 */
RadioControlValueAccessor.prototype.writeValue = function (value: any) {
    let self: any = this;
    self._state = value == this.value;
    self._renderer.setProperty(self._elementRef.nativeElement, 'checked', self._state);
};