{"id":7079,"date":"2019-11-03T21:30:57","date_gmt":"2019-11-03T21:30:57","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7079"},"modified":"2019-11-03T21:30:57","modified_gmt":"2019-11-03T21:30:57","slug":"properties-and-fields-in-typescript","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/properties-and-fields-in-typescript\/","title":{"rendered":"Properties and fields in TypeScript"},"content":{"rendered":"

There’s several ways to handle properties within TypeScript, let’s look at a simple class<\/p>\n

\r\nclass Point {\r\n    x: number;\r\n    y: number;\r\n}\r\n<\/pre>\n
Whilst Visual Code etc. will say these are properties, they’re more like public fields (if you wish to compare to a language such as C#), hence missing the functional side that comes with properties.<\/p>\n
By default no accessors means the properties x and y are public. TypeScript allows us to mark them as private in which case we could then write functional getters and setters as per Java, for example<\/p>\n
\r\nclass Point {\r\n    private x: number;\r\n    private y: number;\r\n\r\n    getX() {\r\n        return this.x;\r\n    }\r\n    setX(x: number) {\r\n        this.x = x;\r\n    }\r\n    getY() {\r\n        return this.y;\r\n    }\r\n    setY(y: number) {\r\n        this.y = y;\r\n    }\r\n}\r\n<\/pre>\n
TypeScript also supports C# style property getter and setters like this<\/p>\n
\r\nclass Point {\r\n    private x: number;\r\n    private y: number;\r\n\r\n    get X() : number {\r\n        return this.x;\r\n    }\r\n    set X(x : number) {\r\n        this.x = x;\r\n    }\r\n    get Y() : number {\r\n        return this.y;\r\n    }\r\n    set Y(y : number) {\r\n        this.y = y;\r\n    }\r\n}\r\n<\/pre>\n
and like C# these get\/set methods result in property style syntax, i.e.<\/p>\n
\r\nvar p = new Point();\r\np.Y = 4;\r\nconsole.log(p.Y);\r\n<\/pre>\n
Constructors within TypeScript can reduce the ceremony for creating fields and properties by using the private or public keywords for constructor arguments, for example<\/p>\n
\r\nclass Point {\r\n  constructor(public x: number, public y: number) {\r\n  }\r\n}\r\n\r\n\/\/ becomes\r\n\r\nclass Point {\r\n    get x() {\r\n        return this.x;\r\n    }\r\n    set x(x) {\r\n        this.x = x;\r\n    }\r\n    get y() {\r\n        return this.y;\r\n    }\r\n    set y(y) {\r\n        this.y = y;\r\n    }\r\n}\r\n<\/pre>\n
Using private constructor arguments is equivalent private fields, so for example<\/p>\n
\r\nclass Point {\r\n  constructor(private x: number, private y: number) {\r\n  }\r\n}\r\n\r\n\/\/ becomes\r\n\r\nclass Point {\r\n    constructor(x, y) {\r\n        this.x = x;\r\n        this.y = y;\r\n    }\r\n}\r\n<\/pre>\n
If we need to overwrite the getter\/setters functionality, we can write<\/p>\n
\r\nclass Point {\r\n    constructor(public x: number, public y: number) {\r\n    }\r\n   \r\n    public get x() : number {\r\n        return this.x;\r\n    }\r\n    public set x(x : number) {\r\n        this.x = x;\r\n    }   \r\n    public get y() : number {\r\n        return this.x;\r\n    }\r\n    public set y(y : number) {\r\n        this.y = y;\r\n    }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
There’s several ways to handle properties within TypeScript, let’s look at a simple class class Point { x: number; y: number; } Whilst Visual Code etc. will say these are properties, they’re more like public fields (if you wish to compare to a language such as C#), hence missing the functional side that comes with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[46],"tags":[],"class_list":["post-7079","post","type-post","status-publish","format-standard","hentry","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7079"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7079\/revisions"}],"predecessor-version":[{"id":7600,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7079\/revisions\/7600"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7079"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7079"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}