From 36f8e4d2053459c4b3180d2f4cf01c51d0df1f59 Mon Sep 17 00:00:00 2001 From: Benjamin Horsleben Date: Thu, 8 Aug 2019 08:55:14 +0200 Subject: [PATCH 1/2] Moved the section of private properties out of TS-only, since both ECMAScript and flow supports it as well --- README.md | 45 ++++++++++++++++++++++++++++++++------------- 1 file changed, 32 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 4a51e89..f7df9b6 100644 --- a/README.md +++ b/README.md @@ -647,6 +647,38 @@ type C = Omit; However, Flow implementation is stricter in this case, as B have a property that A does not have, it would rise an error. In Typescript, however, they would be ignored. +## Private and public properties in classes + +### flow + +Note: This is currently (2019-08-08) [Stage 3](https://github.com/tc39/proposal-class-fields), and is implemented in Chrome, Babel and flow. + +```js +class SomeClass { + prop: string + #prop2: string + #prop3: string = "default value" + + constructor(prop: string, prop2: string) { + this.prop = prop + this.#prop2 = prop2 + } +} +``` + +### Typescript + +```ts +class SomeClass { + constructor(public prop: string, private prop2: string) { + // transpiles to: + // this.prop = prop; + // this.prop2 = prop2; + } + private prop3: string; +} +``` + # Same syntax Most of the syntax of Flow and TypeScript is the same. TypeScript is more expressive for certain use-cases (advanced mapped types with keysof, readonly properties), and Flow is more expressive for others (e.g. `$Diff`). @@ -810,19 +842,6 @@ function something(this: { hello: string }, firstArg: string) { } ``` -## Private and Public properties in classes - -```ts -class SomeClass { - constructor(public prop: string, private prop2: string) { - // transpiles to: - // this.prop = prop; - // this.prop2 = prop2; - } - private prop3: string; -} -``` - ## [Non-null assertion operator](https://github.com/Microsoft/TypeScript/pull/7140) Add `!` to signify we know an object is non-null. From 6da5d3219dde6ddeb1504811a05c6cfd131c5bc9 Mon Sep 17 00:00:00 2001 From: Benjamin Horsleben Date: Thu, 8 Aug 2019 23:36:10 +0200 Subject: [PATCH 2/2] Rewrote the new parts - Put the public class properties under the shared-syntax header - Rewrote the private part to be more to-the-point --- README.md | 39 ++++++++++++++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f7df9b6..af5427b 100644 --- a/README.md +++ b/README.md @@ -647,12 +647,10 @@ type C = Omit; However, Flow implementation is stricter in this case, as B have a property that A does not have, it would rise an error. In Typescript, however, they would be ignored. -## Private and public properties in classes +## Private properties in classes ### flow -Note: This is currently (2019-08-08) [Stage 3](https://github.com/tc39/proposal-class-fields), and is implemented in Chrome, Babel and flow. - ```js class SomeClass { prop: string @@ -666,7 +664,7 @@ class SomeClass { } ``` -### Typescript +### TypeScript ```ts class SomeClass { @@ -675,7 +673,7 @@ class SomeClass { // this.prop = prop; // this.prop2 = prop2; } - private prop3: string; + private prop3: string = "default value"; } ``` @@ -683,6 +681,37 @@ class SomeClass { Most of the syntax of Flow and TypeScript is the same. TypeScript is more expressive for certain use-cases (advanced mapped types with keysof, readonly properties), and Flow is more expressive for others (e.g. `$Diff`). +## Public class properties + +Both systems support public class properties: + +```js +class SomeClass { + prop: string + + a() : string { + return this.prop + } + + constructor(prop:string) { + this.prop = prop + } +} +``` + +Also, TypeScript have some syntactic sugar for setting the props through the constructor. The following TypeScript snippet is equivalent to the snippet above: + +```ts +class SomeClass { + a() : string { + return this.prop + } + + constructor(public prop:string) { + } +} +``` + ## Object callable property The basic syntax are the same, except Flow has special syntax for the internal call property slot.