From 21a092c3237977fbf06c95583f566d4f87dea294 Mon Sep 17 00:00:00 2001 From: Akos Kitta Date: Wed, 4 Jan 2017 17:02:39 +0100 Subject: [PATCH 001/462] Fixed broken link to `tsconfig.json` page. Signed-off-by: Akos Kitta --- pages/tutorials/React & Webpack.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/tutorials/React & Webpack.md b/pages/tutorials/React & Webpack.md index c5c1e6e38..2b1c8a7d3 100644 --- a/pages/tutorials/React & Webpack.md +++ b/pages/tutorials/React & Webpack.md @@ -109,7 +109,7 @@ Simply create a new file in your project root named `tsconfig.json` and fill it } ``` -You can learn more about `tsconfig.json` files [here](../../tsconfig.json.md). +You can learn more about `tsconfig.json` files [here](../tsconfig.json.md). # Write some code From dee3996e1a8dda1a658a6ef08b672078cde39650 Mon Sep 17 00:00:00 2001 From: Ben Creasy Date: Sun, 5 Feb 2017 18:42:18 -0800 Subject: [PATCH 002/462] Fix broken link to tsconfig.md Noticed this at https://www.typescriptlang.org/docs/handbook/react-&-webpack.html --- pages/tutorials/React & Webpack.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/tutorials/React & Webpack.md b/pages/tutorials/React & Webpack.md index c5c1e6e38..2b1c8a7d3 100644 --- a/pages/tutorials/React & Webpack.md +++ b/pages/tutorials/React & Webpack.md @@ -109,7 +109,7 @@ Simply create a new file in your project root named `tsconfig.json` and fill it } ``` -You can learn more about `tsconfig.json` files [here](../../tsconfig.json.md). +You can learn more about `tsconfig.json` files [here](../tsconfig.json.md). # Write some code From ae92a996abfa2dd5cadd8b5e23c686fb6fb13471 Mon Sep 17 00:00:00 2001 From: Maurice de Beijer Date: Wed, 15 Feb 2017 10:20:23 +0100 Subject: [PATCH 003/462] Added webpack 2 example --- pages/Integrating with Build Tools.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/pages/Integrating with Build Tools.md b/pages/Integrating with Build Tools.md index bbeab0072..534d71f24 100644 --- a/pages/Integrating with Build Tools.md +++ b/pages/Integrating with Build Tools.md @@ -146,7 +146,7 @@ More details: [TypeScriptSamples/jspm](https://github.com/Microsoft/TypeScriptSa npm install ts-loader --save-dev ``` -### Basic webpack.config.js +### Basic webpack.config.js when using Webpack 1 ```js module.exports = { @@ -167,6 +167,27 @@ module.exports = { } ``` +### Basic webpack.config.js when using Webpack 2 + +```js +module.exports = { + entry: "./src/index.tsx", + output: { + path: '/', + filename: "bundle.js" + }, + resolve: { + extensions: [".tsx", ".ts", ".js"] + }, + module: { + rules: [ + // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader' + { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/ } + ] + } +} +``` + See [more details on ts-loader here](https://www.npmjs.com/package/ts-loader). Alternatives: From 28fc168f13706f8d9b1bb4d7cadecaff8a2550d3 Mon Sep 17 00:00:00 2001 From: Maurice de Beijer Date: Fri, 10 Mar 2017 13:32:23 +0100 Subject: [PATCH 004/462] Updates after feedback from @TheLarkInn --- pages/Integrating with Build Tools.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/Integrating with Build Tools.md b/pages/Integrating with Build Tools.md index 534d71f24..a8c7b4ee0 100644 --- a/pages/Integrating with Build Tools.md +++ b/pages/Integrating with Build Tools.md @@ -177,12 +177,12 @@ module.exports = { filename: "bundle.js" }, resolve: { - extensions: [".tsx", ".ts", ".js"] + extensions: [".tsx", ".ts", ".js", ".json"] }, module: { rules: [ // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader' - { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/ } + { test: /\.tsx?$/, use: ["ts-loader"], exclude: /node_modules/ } ] } } From e76331f96c05f68c00c7e24d2416aedfea5c5f86 Mon Sep 17 00:00:00 2001 From: Maurice de Beijer Date: Fri, 10 Mar 2017 13:34:44 +0100 Subject: [PATCH 005/462] Swapped webpack 1 and 2 @DanielRosenwasser --- pages/Integrating with Build Tools.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/pages/Integrating with Build Tools.md b/pages/Integrating with Build Tools.md index a8c7b4ee0..18f806f62 100644 --- a/pages/Integrating with Build Tools.md +++ b/pages/Integrating with Build Tools.md @@ -146,43 +146,43 @@ More details: [TypeScriptSamples/jspm](https://github.com/Microsoft/TypeScriptSa npm install ts-loader --save-dev ``` -### Basic webpack.config.js when using Webpack 1 +### Basic webpack.config.js when using Webpack 2 ```js module.exports = { entry: "./src/index.tsx", output: { + path: '/', filename: "bundle.js" }, resolve: { - // Add '.ts' and '.tsx' as a resolvable extension. - extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"] + extensions: [".tsx", ".ts", ".js", ".json"] }, module: { - loaders: [ + rules: [ // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader' - { test: /\.tsx?$/, loader: "ts-loader" } + { test: /\.tsx?$/, use: ["ts-loader"], exclude: /node_modules/ } ] } } ``` -### Basic webpack.config.js when using Webpack 2 +### Basic webpack.config.js when using Webpack 1 ```js module.exports = { entry: "./src/index.tsx", output: { - path: '/', filename: "bundle.js" }, resolve: { - extensions: [".tsx", ".ts", ".js", ".json"] + // Add '.ts' and '.tsx' as a resolvable extension. + extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"] }, module: { - rules: [ + loaders: [ // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader' - { test: /\.tsx?$/, use: ["ts-loader"], exclude: /node_modules/ } + { test: /\.tsx?$/, loader: "ts-loader" } ] } } From 0aa6892cf308a64a37c62d906ceb661142a760dc Mon Sep 17 00:00:00 2001 From: Dallon Feldner Date: Wed, 19 Apr 2017 10:38:31 -0500 Subject: [PATCH 006/462] Clarifies Mapped Types and additional members Resolves https://github.com/Microsoft/TypeScript-Handbook/issues/540 --- pages/Advanced Types.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/pages/Advanced Types.md b/pages/Advanced Types.md index 17a5a5c58..5b5044af1 100644 --- a/pages/Advanced Types.md +++ b/pages/Advanced Types.md @@ -796,6 +796,24 @@ type PersonPartial = Partial; type ReadonlyPerson = Readonly; ``` +Note that this syntax describes a type rather than a member. You **cannot** add additional members directly to a mapped typed: + +```ts +type PartialWithNewMember = { + [P in keyof T]?: T[P]; + // This is an error + newMember: boolean; +} +``` + +Although you can use union types for a similar effect: + +```ts +type PartialWithNewMember = { + [P in keyof T]?: T[P]; +} & { newMember: boolean } +``` + Let's take a look at the simplest mapped type and its parts: ```ts From 8fa5bca6bb1b2174664bae3f046d706751ad16fc Mon Sep 17 00:00:00 2001 From: Dallon Feldner Date: Wed, 19 Apr 2017 14:52:38 -0500 Subject: [PATCH 007/462] Update Advanced Types.md Feedback from pull request: * Use "intersection type" instead of "union type" * Show the correct way of doing it first, de-emphasizing the negative example --- pages/Advanced Types.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/pages/Advanced Types.md b/pages/Advanced Types.md index 5b5044af1..26dce4006 100644 --- a/pages/Advanced Types.md +++ b/pages/Advanced Types.md @@ -796,22 +796,20 @@ type PersonPartial = Partial; type ReadonlyPerson = Readonly; ``` -Note that this syntax describes a type rather than a member. You **cannot** add additional members directly to a mapped typed: +Note that this syntax describes a type rather than a member. If you want to add additional members, use an intersection type: ```ts +// Use this type PartialWithNewMember = { [P in keyof T]?: T[P]; - // This is an error - newMember: boolean; -} -``` - -Although you can use union types for a similar effect: +} & { newMember: boolean } -```ts +// Instead of this: type PartialWithNewMember = { [P in keyof T]?: T[P]; -} & { newMember: boolean } + // This is an error + newMember: boolean; +} ``` Let's take a look at the simplest mapped type and its parts: From 3a85c0443f8fc3c22c19ed7c0a41e1a8bb201650 Mon Sep 17 00:00:00 2001 From: Daniel Rosenwasser Date: Thu, 20 Apr 2017 16:07:50 -0700 Subject: [PATCH 008/462] Update Advanced Types.md --- pages/Advanced Types.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/pages/Advanced Types.md b/pages/Advanced Types.md index 26dce4006..3a971d9f5 100644 --- a/pages/Advanced Types.md +++ b/pages/Advanced Types.md @@ -796,18 +796,19 @@ type PersonPartial = Partial; type ReadonlyPerson = Readonly; ``` -Note that this syntax describes a type rather than a member. If you want to add additional members, use an intersection type: +Note that this syntax describes a type rather than a member. +If you want to add additional members, you can use an intersection type: ```ts -// Use this +// Use this: type PartialWithNewMember = { [P in keyof T]?: T[P]; } & { newMember: boolean } -// Instead of this: +// **Do not** use the following! +// This is an error! type PartialWithNewMember = { [P in keyof T]?: T[P]; - // This is an error newMember: boolean; } ``` From b2745970f64c897cddc0c956cc1e343b24937024 Mon Sep 17 00:00:00 2001 From: Kanchalai Tanglertsampan Date: Fri, 19 May 2017 02:13:43 -0700 Subject: [PATCH 009/462] Adding SFC, children type checkin --- pages/JSX.md | 114 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 112 insertions(+), 2 deletions(-) diff --git a/pages/JSX.md b/pages/JSX.md index 638b991dd..2ac897e30 100644 --- a/pages/JSX.md +++ b/pages/JSX.md @@ -102,7 +102,55 @@ import MyComponent from "./myComponent"; ; // error ``` -It is possible to limit the type of a value-based element. +There are two ways to define a value-based element: + +1. Stateless Functional Component (SFC) +2. Class Component + +Because these two types of value-based elements are indistinguishable from each other in JSX expression, we first try to resolve the expression as Stateless Functional Component using overload resolution. If the process successes, then we are done resolving the expression to its declaration. If we fail to resolve as SFC, we will then try to resolve as a class component. If that fails, we will report an error. + +### Stateless Functional Component +As the name suggested, the component is defined as JavaScript function where its first argument is a `props` object. +We enforce that its return type must be assignable to `JSX.Element` + +```ts +interface FooProp { + name: string; + X: number; + Y: number; +} + +declare function AnotherComponent(prop: {name: string}); +function ComponentFoo(prop: FooProp) { + return ; +} + +const Button = (prop: {value: string}, context: { color: string }) =>