Custom Settings with Custom Class - Serialization Issue

Question

I have a custom settings class as below.

[global::System.Runtime.CompilerServices.CompilerGeneratedAttribute()] 
[global::System.CodeDom.Compiler.GeneratedCodeAttribute("Microsoft.VisualStudio.Editors.SettingsDesigner.SettingsSingleFileGenerator", "15.7.0.0")]
public sealed partial class CustomSettings : global::System.Configuration.ApplicationSettingsBase
{
    private static CustomSettings defaultInstance2 = ((CustomSettings)(global::System.Configuration.ApplicationSettingsBase.Synchronized(new CustomSettings())));

    public static CustomSettings Default2
    {
        get
        {
            return defaultInstance2;
        }
    }

    [global::System.Configuration.ApplicationScopedSettingAttribute()]
    [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
    public List<TextReplacementRule> TextReplacementRules
    {
        get { return (List<TextReplacementRule>)this["TextReplacementRules"]; }
        set { this["TextReplacementRules"] = value; }
    }

    [Serializable]
    public class TextReplacementRule
    {
        public string Name { get; set; }
        public string Channel { get; set; }
        public string ReplaceTo { get; set; }
        public string ReplaceWith { get; set; }

    }
}

And Config Settings are as below.

<AccessingConfigToUI.Properties.CustomSettings>
      <setting name="TextReplacementRules"  serializeAs="Xml" >
        <value>
          <ArrayOfTextReplacementRule xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  xmlns:xsd="http://www.w3.org/2001/XMLSchema">
            <TextReplacementRule>
              <Name>Rule1</Name>
              <Channel>EMAIL</Channel>
              <ReplaceTo>VAL1</ReplaceTo>
              <ReplaceWith>VAL2</ReplaceWith>
            </TextReplacementRule>
            <TextReplacementRule>
              <Name>Rule2</Name>
              <Channel>EMAIL</Channel>
              <ReplaceTo>VAL1</ReplaceTo>
              <ReplaceWith>VAL2</ReplaceWith>
            </TextReplacementRule>
          </ArrayOfTextReplacementRule>
        </value>
      </setting>
      </AccessingConfigToUI.Properties.CustomSettings>

And I am trying to access config in javascript using below code.

   <script type="text/javascript">
       var configSetting = "@(AccessingConfigToUI.Properties.CustomSettings.Default2.TextReplacementRules)";
   </script>

On debugging I do see 2 records in this["TextReplacementRules"] But JS variable- "configSetting" has below value after page renders.

System.Collections.Generic.List`1[AccessingConfigToUI.Properties.CustomSettings+TextReplacementRule]"

Seems like serialization issue. I need to see values set in config files.( 2 records).

Please help.