microsoft/TypeScript
1
0
Fork 0
mirror of https://github.com/microsoft/TypeScript.git synced 2026-02-23 10:29:01 -06:00
Code Issues Packages Projects Releases 212 Wiki Activity

Merge pull request #15160 from Microsoft/master-jsxChildren

Browse Source 
[Master] Type checking JSX children
This commit is contained in:
Yui 2017-04-21 10:02:13 -07:00 committed by GitHub
commit a1a2006074
77 changed files with 3068 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

235
src/compiler/checker.ts
View File

@ -361,7 +361,7 @@ namespace ts {
// The presence of a particular fact means that the given test is true for some (and possibly all) values
// of that kind of type.
BaseStringStrictFacts = TypeofEQString | TypeofNENumber | TypeofNEBoolean | TypeofNESymbol | TypeofNEObject | TypeofNEFunction | TypeofNEHostObject | NEUndefined | NENull | NEUndefinedOrNull,
BaseStringFacts = BaseStringStrictFacts | EQUndefined | EQNull | EQUndefinedOrNull | Falsy,
BaseStringFacts = BaseStringStrictFacts | EQUndefined | EQNull | EQUndefinedOrNull | Falsy,
StringStrictFacts = BaseStringStrictFacts | Truthy | Falsy,
StringFacts = BaseStringFacts | Truthy,
EmptyStringStrictFacts = BaseStringStrictFacts | Falsy,
@ -423,14 +423,20 @@ namespace ts {
let _jsxNamespace: string;
let _jsxFactoryEntity: EntityName;
let _jsxElementPropertiesName: string;
let _hasComputedJsxElementPropertiesName = false;
let _jsxElementChildrenPropertyName: string;
let _hasComputedJsxElementChildrenPropertyName = false;
/** Things we lazy load from the JSX namespace */
const jsxTypes = createMap<Type>();
const JsxNames = {
JSX: "JSX",
IntrinsicElements: "IntrinsicElements",
ElementClass: "ElementClass",
ElementAttributesPropertyNameContainer: "ElementAttributesProperty",
ElementChildrenAttributeNameContainer: "ElementChildrenAttribute",
Element: "Element",
IntrinsicAttributes: "IntrinsicAttributes",
IntrinsicClassAttributes: "IntrinsicClassAttributes"
@ -468,7 +474,7 @@ namespace ts {
return checker;
function getJsxNamespace(): string {
if (_jsxNamespace === undefined) {
if (!_jsxNamespace) {
_jsxNamespace = "React";
if (compilerOptions.jsxFactory) {
_jsxFactoryEntity = parseIsolatedEntityName(compilerOptions.jsxFactory, languageVersion);
@ -1628,7 +1634,7 @@ namespace ts {
}
}
// May be an untyped module. If so, ignore resolutionDiagnostic.
// May be an untyped module. If so, ignore resolutionDiagnostic.
if (!isRelative && resolvedModule && !extensionIsTypeScript(resolvedModule.extension)) {
if (isForAugmentation) {
const diag = Diagnostics.Invalid_module_name_in_augmentation_Module_0_resolves_to_an_untyped_module_at_1_which_cannot_be_augmented;
@ -3977,7 +3983,7 @@ namespace ts {
type;
}
function getTypeForDeclarationFromJSDocComment(declaration: Node ) {
function getTypeForDeclarationFromJSDocComment(declaration: Node) {
const jsdocType = getJSDocType(declaration);
if (jsdocType) {
return getTypeFromTypeNode(jsdocType);
@ -5644,7 +5650,7 @@ namespace ts {
function getConstraintOfType(type: TypeVariable | UnionOrIntersectionType): Type {
return type.flags & TypeFlags.TypeParameter ? getConstraintOfTypeParameter(<TypeParameter>type) :
type.flags & TypeFlags.IndexedAccess ? getConstraintOfIndexedAccess(<IndexedAccessType>type) :
getBaseConstraintOfType(type);
getBaseConstraintOfType(type);
}
function getConstraintOfTypeParameter(typeParameter: TypeParameter): Type {
@ -5717,7 +5723,7 @@ namespace ts {
}
return t.flags & TypeFlags.Union && baseTypes.length === types.length ? getUnionType(baseTypes) :
t.flags & TypeFlags.Intersection && baseTypes.length ? getIntersectionType(baseTypes) :
undefined;
undefined;
}
if (t.flags & TypeFlags.Index) {
return stringType;
@ -5768,11 +5774,11 @@ namespace ts {
const t = type.flags & TypeFlags.TypeVariable ? getBaseConstraintOfType(type) || emptyObjectType : type;
return t.flags & TypeFlags.Intersection ? getApparentTypeOfIntersectionType(<IntersectionType>t) :
t.flags & TypeFlags.StringLike ? globalStringType :
t.flags & TypeFlags.NumberLike ? globalNumberType :
t.flags & TypeFlags.BooleanLike ? globalBooleanType :
t.flags & TypeFlags.ESSymbol ? getGlobalESSymbolType(/*reportErrors*/ languageVersion >= ScriptTarget.ES2015) :
t.flags & TypeFlags.NonPrimitive ? emptyObjectType :
t;
t.flags & TypeFlags.NumberLike ? globalNumberType :
t.flags & TypeFlags.BooleanLike ? globalBooleanType :
t.flags & TypeFlags.ESSymbol ? getGlobalESSymbolType(/*reportErrors*/ languageVersion >= ScriptTarget.ES2015) :
t.flags & TypeFlags.NonPrimitive ? emptyObjectType :
t;
}
function createUnionOrIntersectionProperty(containingType: UnionOrIntersectionType, name: string): Symbol {
@ -7216,8 +7222,8 @@ namespace ts {
function getIndexType(type: Type): Type {
return maybeTypeOfKind(type, TypeFlags.TypeVariable) ? getIndexTypeForGenericType(<TypeVariable | UnionOrIntersectionType>type) :
getObjectFlags(type) & ObjectFlags.Mapped ? getConstraintTypeFromMappedType(<MappedType>type) :
type.flags & TypeFlags.Any || getIndexInfoOfType(type, IndexKind.String) ? stringType :
getLiteralTypeFromPropertyNames(type);
type.flags & TypeFlags.Any || getIndexInfoOfType(type, IndexKind.String) ? stringType :
getLiteralTypeFromPropertyNames(type);
}
function getIndexTypeOrString(type: Type): Type {
@ -7413,7 +7419,7 @@ namespace ts {
* this function should be called in a left folding style, with left = previous result of getSpreadType
* and right = the new element to be spread.
*/
function getSpreadType(left: Type, right: Type): Type {
function getSpreadType(left: Type, right: Type): Type {
if (left.flags & TypeFlags.Any || right.flags & TypeFlags.Any) {
return anyType;
}
@ -7713,7 +7719,7 @@ namespace ts {
function createTypeMapper(sources: Type[], targets: Type[]): TypeMapper {
const mapper: TypeMapper = sources.length === 1 ? makeUnaryTypeMapper(sources[0], targets ? targets[0] : anyType) :
sources.length === 2 ? makeBinaryTypeMapper(sources[0], targets ? targets[0] : anyType, sources[1], targets ? targets[1] : anyType) :
makeArrayTypeMapper(sources, targets);
makeArrayTypeMapper(sources, targets);
mapper.mappedTypes = sources;
return mapper;
}
@ -8537,7 +8543,7 @@ namespace ts {
(globalNumberType === source && numberType === target) ||
(globalBooleanType === source && booleanType === target) ||
(getGlobalESSymbolType(/*reportErrors*/ false) === source && esSymbolType === target)) {
reportError(Diagnostics._0_is_a_primitive_but_1_is_a_wrapper_object_Prefer_using_0_when_possible, targetType, sourceType);
reportError(Diagnostics._0_is_a_primitive_but_1_is_a_wrapper_object_Prefer_using_0_when_possible, targetType, sourceType);
}
}
@ -8718,7 +8724,7 @@ namespace ts {
// Use this property as the error node as this will be more helpful in
// reasoning about what went wrong.
Debug.assert(!!errorNode);
if (isJsxAttributes(errorNode)) {
if (isJsxAttributes(errorNode) || isJsxOpeningLikeElement(errorNode)) {
// JsxAttributes has an object-literal flag and undergo same type-assignablity check as normal object-literal.
// However, using an object-literal error message will be very confusing to the users so we give different a message.
reportError(Diagnostics.Property_0_does_not_exist_on_type_1, symbolToString(prop), typeToString(target));
@ -9661,25 +9667,25 @@ namespace ts {
function isLiteralType(type: Type): boolean {
return type.flags & TypeFlags.Boolean ? true :
type.flags & TypeFlags.Union ? type.flags & TypeFlags.Enum ? true : !forEach((<UnionType>type).types, t => !isUnitType(t)) :
isUnitType(type);
isUnitType(type);
}
function getBaseTypeOfLiteralType(type: Type): Type {
return type.flags & TypeFlags.StringLiteral ? stringType :
type.flags & TypeFlags.NumberLiteral ? numberType :
type.flags & TypeFlags.BooleanLiteral ? booleanType :
type.flags & TypeFlags.EnumLiteral ? (<EnumLiteralType>type).baseType :
type.flags & TypeFlags.Union && !(type.flags & TypeFlags.Enum) ? getUnionType(sameMap((<UnionType>type).types, getBaseTypeOfLiteralType)) :
type;
type.flags & TypeFlags.BooleanLiteral ? booleanType :
type.flags & TypeFlags.EnumLiteral ? (<EnumLiteralType>type).baseType :
type.flags & TypeFlags.Union && !(type.flags & TypeFlags.Enum) ? getUnionType(sameMap((<UnionType>type).types, getBaseTypeOfLiteralType)) :
type;
}
function getWidenedLiteralType(type: Type): Type {
return type.flags & TypeFlags.StringLiteral && type.flags & TypeFlags.FreshLiteral ? stringType :
type.flags & TypeFlags.NumberLiteral && type.flags & TypeFlags.FreshLiteral ? numberType :
type.flags & TypeFlags.BooleanLiteral ? booleanType :
type.flags & TypeFlags.EnumLiteral ? (<EnumLiteralType>type).baseType :
type.flags & TypeFlags.Union && !(type.flags & TypeFlags.Enum) ? getUnionType(sameMap((<UnionType>type).types, getWidenedLiteralType)) :
type;
type.flags & TypeFlags.BooleanLiteral ? booleanType :
type.flags & TypeFlags.EnumLiteral ? (<EnumLiteralType>type).baseType :
type.flags & TypeFlags.Union && !(type.flags & TypeFlags.Enum) ? getUnionType(sameMap((<UnionType>type).types, getWidenedLiteralType)) :
type;
}
/**
@ -9704,9 +9710,9 @@ namespace ts {
function getFalsyFlags(type: Type): TypeFlags {
return type.flags & TypeFlags.Union ? getFalsyFlagsOfTypes((<UnionType>type).types) :
type.flags & TypeFlags.StringLiteral ? (<LiteralType>type).text === "" ? TypeFlags.StringLiteral : 0 :
type.flags & TypeFlags.NumberLiteral ? (<LiteralType>type).text === "0" ? TypeFlags.NumberLiteral : 0 :
type.flags & TypeFlags.BooleanLiteral ? type === falseType ? TypeFlags.BooleanLiteral : 0 :
type.flags & TypeFlags.PossiblyFalsy;
type.flags & TypeFlags.NumberLiteral ? (<LiteralType>type).text === "0" ? TypeFlags.NumberLiteral : 0 :
type.flags & TypeFlags.BooleanLiteral ? type === falseType ? TypeFlags.BooleanLiteral : 0 :
type.flags & TypeFlags.PossiblyFalsy;
}
function includeFalsyTypes(type: Type, flags: TypeFlags) {
@ -10882,8 +10888,8 @@ namespace ts {
isTypeSubsetOf(numberType, typeWithPrimitives) && maybeTypeOfKind(typeWithLiterals, TypeFlags.NumberLiteral)) {
return mapType(typeWithPrimitives, t =>
t.flags & TypeFlags.String ? extractTypesOfKind(typeWithLiterals, TypeFlags.String | TypeFlags.StringLiteral) :
t.flags & TypeFlags.Number ? extractTypesOfKind(typeWithLiterals, TypeFlags.Number | TypeFlags.NumberLiteral) :
t);
t.flags & TypeFlags.Number ? extractTypesOfKind(typeWithLiterals, TypeFlags.Number | TypeFlags.NumberLiteral) :
t);
}
return typeWithPrimitives;
}
@ -11459,7 +11465,7 @@ namespace ts {
const discriminantType = getUnionType(clauseTypes);
const caseType =
discriminantType.flags & TypeFlags.Never ? neverType :
replacePrimitivesWithLiterals(filterType(type, t => isTypeComparableTo(discriminantType, t)), discriminantType);
replacePrimitivesWithLiterals(filterType(type, t => isTypeComparableTo(discriminantType, t)), discriminantType);
if (!hasDefaultClause) {
return caseType;
}
@ -11539,8 +11545,8 @@ namespace ts {
// two types.
return isTypeSubtypeOf(candidate, type) ? candidate :
isTypeAssignableTo(type, candidate) ? type :
isTypeAssignableTo(candidate, type) ? candidate :
getIntersectionType([type, candidate]);
isTypeAssignableTo(candidate, type) ? candidate :
getIntersectionType([type, candidate]);
}
function narrowTypeByTypePredicate(type: Type, callExpression: CallExpression, assumeTrue: boolean): Type {
@ -11805,7 +11811,7 @@ namespace ts {
isInAmbientContext(declaration);
const initialType = assumeInitialized ? (isParameter ? removeOptionalityFromDeclaredType(type, getRootDeclaration(declaration) as VariableLikeDeclaration) : type) :
type === autoType || type === autoArrayType ? undefinedType :
includeFalsyTypes(type, TypeFlags.Undefined);
includeFalsyTypes(type, TypeFlags.Undefined);
const flowType = getFlowTypeOfReference(node, type, initialType, flowContainer, !assumeInitialized);
// A variable is considered uninitialized when it is possible to analyze the entire control flow graph
// from declaration to use, and when the variable's declared type doesn't include undefined but the
@ -12288,7 +12294,7 @@ namespace ts {
func.kind === SyntaxKind.GetAccessor ||
func.kind === SyntaxKind.SetAccessor) && func.parent.kind === SyntaxKind.ObjectLiteralExpression ? <ObjectLiteralExpression>func.parent :
func.kind === SyntaxKind.FunctionExpression && func.parent.kind === SyntaxKind.PropertyAssignment ? <ObjectLiteralExpression>func.parent.parent :
undefined;
undefined;
}
function getThisTypeArgument(type: Type): Type {
@ -12619,6 +12625,36 @@ namespace ts {
return node === conditional.whenTrue || node === conditional.whenFalse ? getContextualType(conditional) : undefined;
}
function getContextualTypeForJsxExpression(node: JsxExpression): Type {
// JSX expression can appear in two position : JSX Element's children or JSX attribute
const jsxAttributes = isJsxAttributeLike(node.parent) ?
node.parent.parent :
node.parent.openingElement.attributes; // node.parent is JsxElement
// When we trying to resolve JsxOpeningLikeElement as a stateless function element, we will already give its attributes a contextual type
// which is a type of the parameter of the signature we are trying out.
// If there is no contextual type (e.g. we are trying to resolve stateful component), get attributes type from resolving element's tagName
const attributesType = getContextualType(jsxAttributes);
if (!attributesType || isTypeAny(attributesType)) {
return undefined;
}
if (isJsxAttribute(node.parent)) {
// JSX expression is in JSX attribute
return getTypeOfPropertyOfType(attributesType, (node.parent as JsxAttribute).name.text);
}
else if (node.parent.kind === SyntaxKind.JsxElement) {
// JSX expression is in children of JSX Element, we will look for an "children" atttribute (we get the name from JSX.ElementAttributesProperty)
const jsxChildrenPropertyName = getJsxElementChildrenPropertyname();
return jsxChildrenPropertyName && jsxChildrenPropertyName !== "" ? getTypeOfPropertyOfType(attributesType, jsxChildrenPropertyName) : anyType;
}
else {
// JSX expression is in JSX spread attribute
return attributesType;
}
}
function getContextualTypeForJsxAttribute(attribute: JsxAttribute | JsxSpreadAttribute) {
// When we trying to resolve JsxOpeningLikeElement as a stateless function element, we will already give its attributes a contextual type
// which is a type of the parameter of the signature we are trying out.
@ -12702,7 +12738,7 @@ namespace ts {
case SyntaxKind.ParenthesizedExpression:
return getContextualType(<ParenthesizedExpression>parent);
case SyntaxKind.JsxExpression:
return getContextualType(<JsxExpression>parent);
return getContextualTypeForJsxExpression(<JsxExpression>parent);
case SyntaxKind.JsxAttribute:
case SyntaxKind.JsxSpreadAttribute:
return getContextualTypeForJsxAttribute(<JsxAttribute | JsxSpreadAttribute>parent);
@ -13157,21 +13193,6 @@ namespace ts {
checkExpression(node.closingElement.tagName);
}
// Check children
for (const child of node.children) {
switch (child.kind) {
case SyntaxKind.JsxExpression:
checkJsxExpression(<JsxExpression>child);
break;
case SyntaxKind.JsxElement:
checkJsxElement(<JsxElement>child);
break;
case SyntaxKind.JsxSelfClosingElement:
checkJsxSelfClosingElement(<JsxSelfClosingElement>child);
break;
}
}
return getJsxGlobalElementType() || anyType;
}
@ -13264,6 +13285,42 @@ namespace ts {
}
});
}
// Handle children attribute
const parent = openingLikeElement.parent.kind === SyntaxKind.JsxElement ? openingLikeElement.parent as JsxElement : undefined;
// We have to check that openingElement of the parent is the one we are visiting as this may not be true for selfClosingElement
if (parent && parent.openingElement === openingLikeElement && parent.children.length > 0) {
const childrenTypes: Type[] = [];
for (const child of (parent as JsxElement).children) {
// In React, JSX text that contains only whitespaces will be ignored so we don't want to type-check that
// because then type of children property will have constituent of string type.
if (child.kind === SyntaxKind.JsxText) {
if (!child.containsOnlyWhiteSpaces) {
childrenTypes.push(stringType);
}
}
else {
childrenTypes.push(checkExpression(child, checkMode));
}
}
// Error if there is a attribute named "children" and children element.
// This is because children element will overwrite the value from attributes
const jsxChildrenPropertyName = getJsxElementChildrenPropertyname();
if (jsxChildrenPropertyName && jsxChildrenPropertyName !== "") {
if (attributesTable.has(jsxChildrenPropertyName)) {
error(attributes, Diagnostics._0_are_specified_twice_The_attribute_named_0_will_be_overwritten, jsxChildrenPropertyName);
}
// If there are children in the body of JSX element, create dummy attribute "children" with anyType so that it will pass the attribute checking process
const childrenPropSymbol = createSymbol(SymbolFlags.Property | SymbolFlags.Transient, jsxChildrenPropertyName);
childrenPropSymbol.type = childrenTypes.length === 1 ?
childrenTypes[0] :
createArrayType(getUnionType(childrenTypes, /*subtypeReduction*/ false));
attributesTable.set(jsxChildrenPropertyName, childrenPropSymbol);
}
}
return createJsxAttributesType(attributes.symbol, attributesTable);
/**
@ -13363,41 +13420,61 @@ namespace ts {
return getUnionType(map(signatures, getReturnTypeOfSignature), /*subtypeReduction*/ true);
}
/**
* Look into JSX namespace and then look for container with matching name as nameOfAttribPropContainer.
* Get a single property from that container if existed. Report an error if there are more than one property.
*
* @param nameOfAttribPropContainer a string of value JsxNames.ElementAttributesPropertyNameContainer or JsxNames.ElementChildrenAttributeNameContainer
* if other string is given or the container doesn't exist, return undefined.
*/
function getNameFromJsxElementAttributesContainer(nameOfAttribPropContainer: string): string {
// JSX
const jsxNamespace = getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined);
// JSX.ElementAttributesProperty | JSX.ElementChildrenAttribute [symbol]
const jsxElementAttribPropInterfaceSym = jsxNamespace && getSymbol(jsxNamespace.exports, nameOfAttribPropContainer, SymbolFlags.Type);
// JSX.ElementAttributesProperty | JSX.ElementChildrenAttribute [type]
const jsxElementAttribPropInterfaceType = jsxElementAttribPropInterfaceSym && getDeclaredTypeOfSymbol(jsxElementAttribPropInterfaceSym);
// The properties of JSX.ElementAttributesProperty | JSX.ElementChildrenAttribute
const propertiesOfJsxElementAttribPropInterface = jsxElementAttribPropInterfaceType && getPropertiesOfType(jsxElementAttribPropInterfaceType);
if (propertiesOfJsxElementAttribPropInterface) {
// Element Attributes has zero properties, so the element attributes type will be the class instance type
if (propertiesOfJsxElementAttribPropInterface.length === 0) {
return "";
}
// Element Attributes has one property, so the element attributes type will be the type of the corresponding
// property of the class instance type
else if (propertiesOfJsxElementAttribPropInterface.length === 1) {
return propertiesOfJsxElementAttribPropInterface[0].name;
}
else if (propertiesOfJsxElementAttribPropInterface.length > 1) {
// More than one property on ElementAttributesProperty is an error
error(jsxElementAttribPropInterfaceSym.declarations[0], Diagnostics.The_global_type_JSX_0_may_not_have_more_than_one_property, nameOfAttribPropContainer);
}
}
return undefined;
}
/// e.g. "props" for React.d.ts,
/// or 'undefined' if ElementAttributesProperty doesn't exist (which means all
/// non-intrinsic elements' attributes type is 'any'),
/// or '' if it has 0 properties (which means every
/// non-intrinsic elements' attributes type is the element instance type)
function getJsxElementPropertiesName() {
// JSX
const jsxNamespace = getGlobalSymbol(JsxNames.JSX, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined);
// JSX.ElementAttributesProperty [symbol]
const attribsPropTypeSym = jsxNamespace && getSymbol(jsxNamespace.exports, JsxNames.ElementAttributesPropertyNameContainer, SymbolFlags.Type);
// JSX.ElementAttributesProperty [type]
const attribPropType = attribsPropTypeSym && getDeclaredTypeOfSymbol(attribsPropTypeSym);
// The properties of JSX.ElementAttributesProperty
const attribProperties = attribPropType && getPropertiesOfType(attribPropType);
if (!_hasComputedJsxElementPropertiesName) {
_hasComputedJsxElementPropertiesName = true;
_jsxElementPropertiesName = getNameFromJsxElementAttributesContainer(JsxNames.ElementAttributesPropertyNameContainer);
}
if (attribProperties) {
// Element Attributes has zero properties, so the element attributes type will be the class instance type
if (attribProperties.length === 0) {
return "";
}
// Element Attributes has one property, so the element attributes type will be the type of the corresponding
// property of the class instance type
else if (attribProperties.length === 1) {
return attribProperties[0].name;
}
// More than one property on ElementAttributesProperty is an error
else {
error(attribsPropTypeSym.declarations[0], Diagnostics.The_global_type_JSX_0_may_not_have_more_than_one_property, JsxNames.ElementAttributesPropertyNameContainer);
return undefined;
}
}
else {
// No interface exists, so the element attributes type will be an implicit any
return undefined;
return _jsxElementPropertiesName;
}
function getJsxElementChildrenPropertyname(): string {
if (!_hasComputedJsxElementChildrenPropertyName) {
_hasComputedJsxElementChildrenPropertyName = true;
_jsxElementChildrenPropertyName = getNameFromJsxElementAttributesContainer(JsxNames.ElementChildrenAttributeNameContainer);
}
return _jsxElementChildrenPropertyName;
}
/**

4
src/compiler/diagnosticMessages.json
View File

@ -2119,6 +2119,10 @@
"category": "Error",
"code": 2709
},
"'{0}' are specified twice. The attribute named '{0}' will be overwritten.": {
"category": "Error",
"code": 2710
},
"Import declaration '{0}' is using private name '{1}'.": {
"category": "Error",

2
src/compiler/emitter.ts
View File

@ -2457,7 +2457,7 @@ namespace ts {
let indentation: number;
for (const line of lines) {
for (let i = 0; i < line.length && (indentation === undefined || i < indentation); i++) {
if (!isWhiteSpace(line.charCodeAt(i))) {
if (!isWhiteSpaceLike(line.charCodeAt(i))) {
if (indentation === undefined || i < indentation) {
indentation = i;
break;

7
src/compiler/parser.ts
View File

@ -3828,6 +3828,7 @@ namespace ts {
function parseJsxText(): JsxText {
const node = <JsxText>createNode(SyntaxKind.JsxText, scanner.getStartPos());
node.containsOnlyWhiteSpaces = currentToken === SyntaxKind.JsxTextAllWhiteSpaces;
currentToken = scanner.scanJsxToken();
return finishNode(node);
}
@ -3835,6 +3836,7 @@ namespace ts {
function parseJsxChild(): JsxChild {
switch (token()) {
case SyntaxKind.JsxText:
case SyntaxKind.JsxTextAllWhiteSpaces:
return parseJsxText();
case SyntaxKind.OpenBraceToken:
return parseJsxExpression(/*inExpressionContext*/ false);
@ -3864,7 +3866,10 @@ namespace ts {
else if (token() === SyntaxKind.ConflictMarkerTrivia) {
break;
}
result.push(parseJsxChild());
const child = parseJsxChild();
if (child) {
result.push(child);
}
}
result.end = scanner.getTokenPos();

29
src/compiler/scanner.ts
View File

@ -367,7 +367,7 @@ namespace ts {
return computeLineAndCharacterOfPosition(getLineStarts(sourceFile), position);
}
export function isWhiteSpace(ch: number): boolean {
export function isWhiteSpaceLike(ch: number): boolean {
return isWhiteSpaceSingleLine(ch) || isLineBreak(ch);
}
@ -512,7 +512,7 @@ namespace ts {
break;
default:
if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpace(ch))) {
if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpaceLike(ch))) {
pos++;
continue;
}
@ -694,7 +694,7 @@ namespace ts {
}
break scan;
default:
if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpace(ch))) {
if (ch > CharacterCodes.maxAsciiCharacter && (isWhiteSpaceLike(ch))) {
if (hasPendingCommentRange && isLineBreak(ch)) {
pendingHasTrailingNewLine = true;
}
@ -1727,8 +1727,12 @@ namespace ts {
return token = SyntaxKind.OpenBraceToken;
}
// First non-whitespace character on this line.
let firstNonWhitespace = 0;
// These initial values are special because the first line is:
// firstNonWhitespace = 0 to indicate that we want leading whitspace,
while (pos < end) {
pos++;
char = text.charCodeAt(pos);
if (char === CharacterCodes.openBrace) {
break;
@ -1740,8 +1744,23 @@ namespace ts {
}
break;
}
// FirstNonWhitespace is 0, then we only see whitespaces so far. If we see a linebreak, we want to ignore that whitespaces.
// i.e (- : whitespace)
// <div>----
// </div> becomes <div></div>
//
// <div>----</div> becomes <div>----</div>
if (isLineBreak(char) && firstNonWhitespace === 0) {
firstNonWhitespace = -1;
}
else if (!isWhiteSpaceLike(char)) {
firstNonWhitespace = pos;
}
pos++;
}
return token = SyntaxKind.JsxText;
return firstNonWhitespace === -1 ? SyntaxKind.JsxTextAllWhiteSpaces : SyntaxKind.JsxText;
}
// Scans a JSX identifier; these differ from normal identifiers in that

4
src/compiler/types.ts
View File

@ -10,7 +10,7 @@ namespace ts {
/** ES6 Map interface. */
export interface Map<T> {
get(key: string): T;
get(key: string): T | undefined;
has(key: string): boolean;
set(key: string, value: T): this;
delete(key: string): boolean;
@ -65,6 +65,7 @@ namespace ts {
NumericLiteral,
StringLiteral,
JsxText,
JsxTextAllWhiteSpaces,
RegularExpressionLiteral,
NoSubstitutionTemplateLiteral,
// Pseudo-literals
@ -1572,6 +1573,7 @@ namespace ts {
export interface JsxText extends Node {
kind: SyntaxKind.JsxText;
containsOnlyWhiteSpaces: boolean;
parent?: JsxElement;
}

2
src/services/formatting/smartIndenter.ts
View File

@ -54,7 +54,7 @@ namespace ts.formatting {
let current = position;
while (current > 0) {
const char = sourceFile.text.charCodeAt(current);
if (!isWhiteSpace(char)) {
if (!isWhiteSpaceLike(char)) {
break;
}
current--;

2
src/services/textChanges.ts
View File

@ -608,7 +608,7 @@ namespace ts.textChanges {
if (force || !isTrivia(s)) {
this.lastNonTriviaPosition = this.writer.getTextPos();
let i = 0;
while (isWhiteSpace(s.charCodeAt(s.length - i - 1))) {
while (isWhiteSpaceLike(s.charCodeAt(s.length - i - 1))) {
i++;
}
// trim trailing whitespaces

2
src/services/utilities.ts
View File

@ -1380,7 +1380,7 @@ namespace ts {
}
export function getFirstNonSpaceCharacterPosition(text: string, position: number) {
while (isWhiteSpace(text.charCodeAt(position))) {
while (isWhiteSpaceLike(text.charCodeAt(position))) {
position += 1;
}
return position;

39
tests/baselines/reference/checkJsxChildrenProperty1.js Normal file
View File

@ -0,0 +1,39 @@
//// [file.tsx]
import React = require('react');
interface Prop {
a: number,
b: string,
children: string | JSX.Element
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// OK
let k = <Comp a={10} b="hi" children ="lol" />;
let k1 =
<Comp a={10} b="hi">
hi hi hi!
</Comp>;
let k2 =
<Comp a={10} b="hi">
<div>hi hi hi!</div>
</Comp>;
//// [file.jsx]
"use strict";
exports.__esModule = true;
var React = require("react");
function Comp(p) {
return <div>{p.b}</div>;
}
// OK
var k = <Comp a={10} b="hi" children="lol"/>;
var k1 = <Comp a={10} b="hi">
hi hi hi!
</Comp>;
var k2 = <Comp a={10} b="hi">
<div>hi hi hi!</div>
</Comp>;

67
tests/baselines/reference/checkJsxChildrenProperty1.symbols Normal file
View File

@ -0,0 +1,67 @@
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : Symbol(React, Decl(file.tsx, 0, 0))
interface Prop {
>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
a: number,
>a : Symbol(Prop.a, Decl(file.tsx, 2, 16))
b: string,
>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
children: string | JSX.Element
>children : Symbol(Prop.children, Decl(file.tsx, 4, 14))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
}
function Comp(p: Prop) {
>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
>p : Symbol(p, Decl(file.tsx, 8, 14))
>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
return <div>{p.b}</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
>p : Symbol(p, Decl(file.tsx, 8, 14))
>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
// OK
let k = <Comp a={10} b="hi" children ="lol" />;
>k : Symbol(k, Decl(file.tsx, 13, 3))
>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
>a : Symbol(a, Decl(file.tsx, 13, 13))
>b : Symbol(b, Decl(file.tsx, 13, 20))
>children : Symbol(children, Decl(file.tsx, 13, 27))
let k1 =
>k1 : Symbol(k1, Decl(file.tsx, 14, 3))
<Comp a={10} b="hi">
>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
>a : Symbol(a, Decl(file.tsx, 15, 9))
>b : Symbol(b, Decl(file.tsx, 15, 16))
hi hi hi!
</Comp>;
>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
let k2 =
>k2 : Symbol(k2, Decl(file.tsx, 18, 3))
<Comp a={10} b="hi">
>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))
>a : Symbol(a, Decl(file.tsx, 19, 9))
>b : Symbol(b, Decl(file.tsx, 19, 16))
<div>hi hi hi!</div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
</Comp>;
>Comp : Symbol(Comp, Decl(file.tsx, 6, 1))

75
tests/baselines/reference/checkJsxChildrenProperty1.types Normal file
View File

@ -0,0 +1,75 @@
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : typeof React
interface Prop {
>Prop : Prop
a: number,
>a : number
b: string,
>b : string
children: string | JSX.Element
>children : string | JSX.Element
>JSX : any
>Element : JSX.Element
}
function Comp(p: Prop) {
>Comp : (p: Prop) => JSX.Element
>p : Prop
>Prop : Prop
return <div>{p.b}</div>;
><div>{p.b}</div> : JSX.Element
>div : any
>p.b : string
>p : Prop
>b : string
>div : any
}
// OK
let k = <Comp a={10} b="hi" children ="lol" />;
>k : JSX.Element
><Comp a={10} b="hi" children ="lol" /> : JSX.Element
>Comp : (p: Prop) => JSX.Element
>a : number
>10 : 10
>b : string
>children : string
let k1 =
>k1 : JSX.Element
<Comp a={10} b="hi">
><Comp a={10} b="hi"> hi hi hi! </Comp> : JSX.Element
>Comp : (p: Prop) => JSX.Element
>a : number
>10 : 10
>b : string
hi hi hi!
</Comp>;
>Comp : (p: Prop) => JSX.Element
let k2 =
>k2 : JSX.Element
<Comp a={10} b="hi">
><Comp a={10} b="hi"> <div>hi hi hi!</div> </Comp> : JSX.Element
>Comp : (p: Prop) => JSX.Element
>a : number
>10 : 10
>b : string
<div>hi hi hi!</div>
><div>hi hi hi!</div> : JSX.Element
>div : any
>div : any
</Comp>;
>Comp : (p: Prop) => JSX.Element

38
tests/baselines/reference/checkJsxChildrenProperty10.js Normal file
View File

@ -0,0 +1,38 @@
//// [file.tsx]
declare module JSX {
interface Element { }
interface ElementAttributesProperty { props: {} }
interface IntrinsicElements {
div: any;
h2: any;
h1: any;
}
}
class Button {
props: {}
render() {
return (<div>My Button</div>)
}
}
// OK
let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
let k3 = <div> {1} {"That is a number"} </div>;
let k4 = <Button> <h2> Hello </h2> </Button>;
//// [file.jsx]
var Button = (function () {
function Button() {
}
Button.prototype.render = function () {
return (<div>My Button</div>);
};
return Button;
}());
// OK
var k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
var k2 = <div> <h2> Hello </h2> {function (user) { return <h2>{user.name}</h2>; }}</div>;
var k3 = <div> {1} {"That is a number"} </div>;
var k4 = <Button> <h2> Hello </h2> </Button>;

73
tests/baselines/reference/checkJsxChildrenProperty10.symbols Normal file
View File

@ -0,0 +1,73 @@
=== tests/cases/conformance/jsx/file.tsx ===
declare module JSX {
>JSX : Symbol(JSX, Decl(file.tsx, 0, 0))
interface Element { }
>Element : Symbol(Element, Decl(file.tsx, 0, 20))
interface ElementAttributesProperty { props: {} }
>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(file.tsx, 1, 22))
>props : Symbol(ElementAttributesProperty.props, Decl(file.tsx, 2, 38))
interface IntrinsicElements {
>IntrinsicElements : Symbol(IntrinsicElements, Decl(file.tsx, 2, 50))
div: any;
>div : Symbol(IntrinsicElements.div, Decl(file.tsx, 3, 30))
h2: any;
>h2 : Symbol(IntrinsicElements.h2, Decl(file.tsx, 4, 11))
h1: any;
>h1 : Symbol(IntrinsicElements.h1, Decl(file.tsx, 5, 10))
}
}
class Button {
>Button : Symbol(Button, Decl(file.tsx, 8, 1))
props: {}
>props : Symbol(Button.props, Decl(file.tsx, 10, 14))
render() {
>render : Symbol(Button.render, Decl(file.tsx, 11, 10))
return (<div>My Button</div>)
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
}
}
// OK
let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
>k1 : Symbol(k1, Decl(file.tsx, 18, 3))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(file.tsx, 5, 10))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(file.tsx, 5, 10))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
>k2 : Symbol(k2, Decl(file.tsx, 19, 3))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>user : Symbol(user, Decl(file.tsx, 19, 34))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>user : Symbol(user, Decl(file.tsx, 19, 34))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
let k3 = <div> {1} {"That is a number"} </div>;
>k3 : Symbol(k3, Decl(file.tsx, 20, 3))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
let k4 = <Button> <h2> Hello </h2> </Button>;
>k4 : Symbol(k4, Decl(file.tsx, 21, 3))
>Button : Symbol(Button, Decl(file.tsx, 8, 1))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>Button : Symbol(Button, Decl(file.tsx, 8, 1))

89
tests/baselines/reference/checkJsxChildrenProperty10.types Normal file
View File

@ -0,0 +1,89 @@
=== tests/cases/conformance/jsx/file.tsx ===
declare module JSX {
>JSX : any
interface Element { }
>Element : Element
interface ElementAttributesProperty { props: {} }
>ElementAttributesProperty : ElementAttributesProperty
>props : {}
interface IntrinsicElements {
>IntrinsicElements : IntrinsicElements
div: any;
>div : any
h2: any;
>h2 : any
h1: any;
>h1 : any
}
}
class Button {
>Button : Button
props: {}
>props : {}
render() {
>render : () => JSX.Element
return (<div>My Button</div>)
>(<div>My Button</div>) : JSX.Element
><div>My Button</div> : JSX.Element
>div : any
>div : any
}
}
// OK
let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
>k1 : JSX.Element
><div> <h2> Hello </h2> <h1> world </h1></div> : JSX.Element
>div : any
><h2> Hello </h2> : JSX.Element
>h2 : any
>h2 : any
><h1> world </h1> : JSX.Element
>h1 : any
>h1 : any
>div : any
let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
>k2 : JSX.Element
><div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div> : JSX.Element
>div : any
><h2> Hello </h2> : JSX.Element
>h2 : any
>h2 : any
>(user: any) => <h2>{user.name}</h2> : (user: any) => JSX.Element
>user : any
><h2>{user.name}</h2> : JSX.Element
>h2 : any
>user.name : any
>user : any
>name : any
>h2 : any
>div : any
let k3 = <div> {1} {"That is a number"} </div>;
>k3 : JSX.Element
><div> {1} {"That is a number"} </div> : JSX.Element
>div : any
>1 : 1
>"That is a number" : "That is a number"
>div : any
let k4 = <Button> <h2> Hello </h2> </Button>;
>k4 : JSX.Element
><Button> <h2> Hello </h2> </Button> : JSX.Element
>Button : typeof Button
><h2> Hello </h2> : JSX.Element
>h2 : any
>h2 : any
>Button : typeof Button

38
tests/baselines/reference/checkJsxChildrenProperty11.js Normal file
View File

@ -0,0 +1,38 @@
//// [file.tsx]
declare module JSX {
interface Element { }
interface ElementAttributesProperty { props: {} }
interface IntrinsicElements {
div: any;
h2: any;
h1: any;
}
}
class Button {
props: {}
render() {
return (<div>My Button</div>)
}
}
// OK
let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
let k3 = <div> {1} {"That is a number"} </div>;
let k4 = <Button> <h2> Hello </h2> </Button>;
//// [file.jsx]
var Button = (function () {
function Button() {
}
Button.prototype.render = function () {
return (<div>My Button</div>);
};
return Button;
}());
// OK
var k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
var k2 = <div> <h2> Hello </h2> {function (user) { return <h2>{user.name}</h2>; }}</div>;
var k3 = <div> {1} {"That is a number"} </div>;
var k4 = <Button> <h2> Hello </h2> </Button>;

73
tests/baselines/reference/checkJsxChildrenProperty11.symbols Normal file
View File

@ -0,0 +1,73 @@
=== tests/cases/conformance/jsx/file.tsx ===
declare module JSX {
>JSX : Symbol(JSX, Decl(file.tsx, 0, 0))
interface Element { }
>Element : Symbol(Element, Decl(file.tsx, 0, 20))
interface ElementAttributesProperty { props: {} }
>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(file.tsx, 1, 22))
>props : Symbol(ElementAttributesProperty.props, Decl(file.tsx, 2, 38))
interface IntrinsicElements {
>IntrinsicElements : Symbol(IntrinsicElements, Decl(file.tsx, 2, 50))
div: any;
>div : Symbol(IntrinsicElements.div, Decl(file.tsx, 3, 30))
h2: any;
>h2 : Symbol(IntrinsicElements.h2, Decl(file.tsx, 4, 11))
h1: any;
>h1 : Symbol(IntrinsicElements.h1, Decl(file.tsx, 5, 10))
}
}
class Button {
>Button : Symbol(Button, Decl(file.tsx, 8, 1))
props: {}
>props : Symbol(Button.props, Decl(file.tsx, 10, 14))
render() {
>render : Symbol(Button.render, Decl(file.tsx, 11, 10))
return (<div>My Button</div>)
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
}
}
// OK
let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
>k1 : Symbol(k1, Decl(file.tsx, 18, 3))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(file.tsx, 5, 10))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(file.tsx, 5, 10))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
>k2 : Symbol(k2, Decl(file.tsx, 19, 3))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>user : Symbol(user, Decl(file.tsx, 19, 34))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>user : Symbol(user, Decl(file.tsx, 19, 34))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
let k3 = <div> {1} {"That is a number"} </div>;
>k3 : Symbol(k3, Decl(file.tsx, 20, 3))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
>div : Symbol(JSX.IntrinsicElements.div, Decl(file.tsx, 3, 30))
let k4 = <Button> <h2> Hello </h2> </Button>;
>k4 : Symbol(k4, Decl(file.tsx, 21, 3))
>Button : Symbol(Button, Decl(file.tsx, 8, 1))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(file.tsx, 4, 11))
>Button : Symbol(Button, Decl(file.tsx, 8, 1))

89
tests/baselines/reference/checkJsxChildrenProperty11.types Normal file
View File

@ -0,0 +1,89 @@
=== tests/cases/conformance/jsx/file.tsx ===
declare module JSX {
>JSX : any
interface Element { }
>Element : Element
interface ElementAttributesProperty { props: {} }
>ElementAttributesProperty : ElementAttributesProperty
>props : {}
interface IntrinsicElements {
>IntrinsicElements : IntrinsicElements
div: any;
>div : any
h2: any;
>h2 : any
h1: any;
>h1 : any
}
}
class Button {
>Button : Button
props: {}
>props : {}
render() {
>render : () => JSX.Element
return (<div>My Button</div>)
>(<div>My Button</div>) : JSX.Element
><div>My Button</div> : JSX.Element
>div : any
>div : any
}
}
// OK
let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
>k1 : JSX.Element
><div> <h2> Hello </h2> <h1> world </h1></div> : JSX.Element
>div : any
><h2> Hello </h2> : JSX.Element
>h2 : any
>h2 : any
><h1> world </h1> : JSX.Element
>h1 : any
>h1 : any
>div : any
let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
>k2 : JSX.Element
><div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div> : JSX.Element
>div : any
><h2> Hello </h2> : JSX.Element
>h2 : any
>h2 : any
>(user: any) => <h2>{user.name}</h2> : (user: any) => JSX.Element
>user : any
><h2>{user.name}</h2> : JSX.Element
>h2 : any
>user.name : any
>user : any
>name : any
>h2 : any
>div : any
let k3 = <div> {1} {"That is a number"} </div>;
>k3 : JSX.Element
><div> {1} {"That is a number"} </div> : JSX.Element
>div : any
>1 : 1
>"That is a number" : "That is a number"
>div : any
let k4 = <Button> <h2> Hello </h2> </Button>;
>k4 : JSX.Element
><Button> <h2> Hello </h2> </Button> : JSX.Element
>Button : typeof Button
><h2> Hello </h2> : JSX.Element
>h2 : any
>h2 : any
>Button : typeof Button

120
tests/baselines/reference/checkJsxChildrenProperty2.errors.txt Normal file
View File

@ -0,0 +1,120 @@
tests/cases/conformance/jsx/file.tsx(14,15): error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
tests/cases/conformance/jsx/file.tsx(17,11): error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
tests/cases/conformance/jsx/file.tsx(25,11): error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
tests/cases/conformance/jsx/file.tsx(31,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'Prop'.
Types of property 'children' are incompatible.
Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'.
Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'.
Property 'type' is missing in type '(Element | ((name: string) => Element))[]'.
tests/cases/conformance/jsx/file.tsx(37,11): error TS2322: Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'Prop'.
Types of property 'children' are incompatible.
Type '(Element | 1000000)[]' is not assignable to type 'string | Element'.
Type '(Element | 1000000)[]' is not assignable to type 'Element'.
Property 'type' is missing in type '(Element | 1000000)[]'.
tests/cases/conformance/jsx/file.tsx(43,11): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
Types of property 'children' are incompatible.
Type '(string | Element)[]' is not assignable to type 'string | Element'.
Type '(string | Element)[]' is not assignable to type 'Element'.
Property 'type' is missing in type '(string | Element)[]'.
tests/cases/conformance/jsx/file.tsx(49,11): error TS2322: Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'Prop'.
Types of property 'children' are incompatible.
Type 'Element[]' is not assignable to type 'string | Element'.
Type 'Element[]' is not assignable to type 'Element'.
Property 'type' is missing in type 'Element[]'.
==== tests/cases/conformance/jsx/file.tsx (7 errors) ====
import React = require('react');
interface Prop {
a: number,
b: string,
children: string | JSX.Element
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// Error: missing children
let k = <Comp a={10} b="hi" />;
~~~~~~~~~~~~~
!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
!!! error TS2322: Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
let k0 =
<Comp a={10} b="hi" children="Random" >
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
!!! error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
hi hi hi!
</Comp>;
let o = {
children:"Random"
}
let k1 =
<Comp a={10} b="hi" {...o} >
~~~~~~~~~~~~~~~~~~~~
!!! error TS2710: 'children' are specified twice. The attribute named 'children' will be overwritten.
hi hi hi!
</Comp>;
// Error: incorrect type
let k2 =
<Comp a={10} b="hi">
~~~~~~~~~~~~~
!!! error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
!!! error TS2322: Type '{ a: 10; b: "hi"; children: (Element | ((name: string) => Element))[]; }' is not assignable to type 'Prop'.
!!! error TS2322: Types of property 'children' are incompatible.
!!! error TS2322: Type '(Element | ((name: string) => Element))[]' is not assignable to type 'string | Element'.
!!! error TS2322: Type '(Element | ((name: string) => Element))[]' is not assignable to type 'Element'.
!!! error TS2322: Property 'type' is missing in type '(Element | ((name: string) => Element))[]'.
<div> My Div </div>
{(name: string) => <div> My name {name} </div>}
</Comp>;
let k3 =
<Comp a={10} b="hi">
~~~~~~~~~~~~~
!!! error TS2322: Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
!!! error TS2322: Type '{ a: 10; b: "hi"; children: (Element | 1000000)[]; }' is not assignable to type 'Prop'.
!!! error TS2322: Types of property 'children' are incompatible.
!!! error TS2322: Type '(Element | 1000000)[]' is not assignable to type 'string | Element'.
!!! error TS2322: Type '(Element | 1000000)[]' is not assignable to type 'Element'.
!!! error TS2322: Property 'type' is missing in type '(Element | 1000000)[]'.
<div> My Div </div>
{1000000}
</Comp>;
let k4 =
<Comp a={10} b="hi" >
~~~~~~~~~~~~~
!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
!!! error TS2322: Types of property 'children' are incompatible.
!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'string | Element'.
!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'Element'.
!!! error TS2322: Property 'type' is missing in type '(string | Element)[]'.
<div> My Div </div>
hi hi hi!
</Comp>;
let k5 =
<Comp a={10} b="hi" >
~~~~~~~~~~~~~
!!! error TS2322: Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
!!! error TS2322: Type '{ a: 10; b: "hi"; children: Element[]; }' is not assignable to type 'Prop'.
!!! error TS2322: Types of property 'children' are incompatible.
!!! error TS2322: Type 'Element[]' is not assignable to type 'string | Element'.
!!! error TS2322: Type 'Element[]' is not assignable to type 'Element'.
!!! error TS2322: Property 'type' is missing in type 'Element[]'.
<div> My Div </div>
<div> My Div </div>
</Comp>;

89
tests/baselines/reference/checkJsxChildrenProperty2.js Normal file
View File

@ -0,0 +1,89 @@
//// [file.tsx]
import React = require('react');
interface Prop {
a: number,
b: string,
children: string | JSX.Element
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// Error: missing children
let k = <Comp a={10} b="hi" />;
let k0 =
<Comp a={10} b="hi" children="Random" >
hi hi hi!
</Comp>;
let o = {
children:"Random"
}
let k1 =
<Comp a={10} b="hi" {...o} >
hi hi hi!
</Comp>;
// Error: incorrect type
let k2 =
<Comp a={10} b="hi">
<div> My Div </div>
{(name: string) => <div> My name {name} </div>}
</Comp>;
let k3 =
<Comp a={10} b="hi">
<div> My Div </div>
{1000000}
</Comp>;
let k4 =
<Comp a={10} b="hi" >
<div> My Div </div>
hi hi hi!
</Comp>;
let k5 =
<Comp a={10} b="hi" >
<div> My Div </div>
<div> My Div </div>
</Comp>;
//// [file.jsx]
"use strict";
exports.__esModule = true;
var React = require("react");
function Comp(p) {
return <div>{p.b}</div>;
}
// Error: missing children
var k = <Comp a={10} b="hi"/>;
var k0 = <Comp a={10} b="hi" children="Random">
hi hi hi!
</Comp>;
var o = {
children: "Random"
};
var k1 = <Comp a={10} b="hi" {...o}>
hi hi hi!
</Comp>;
// Error: incorrect type
var k2 = <Comp a={10} b="hi">
<div> My Div </div>
{function (name) { return <div> My name {name} </div>; }}
</Comp>;
var k3 = <Comp a={10} b="hi">
<div> My Div </div>
{1000000}
</Comp>;
var k4 = <Comp a={10} b="hi">
<div> My Div </div>
hi hi hi!
</Comp>;
var k5 = <Comp a={10} b="hi">
<div> My Div </div>
<div> My Div </div>
</Comp>;

79
tests/baselines/reference/checkJsxChildrenProperty3.js Normal file
View File

@ -0,0 +1,79 @@
//// [file.tsx]
import React = require('react');
interface IUser {
Name: string;
}
interface IFetchUserProps {
children: (user: IUser) => JSX.Element;
}
class FetchUser extends React.Component<IFetchUserProps, any> {
render() {
return this.state
? this.props.children(this.state.result)
: null;
}
}
// Ok
function UserName0() {
return (
<FetchUser>
{ user => (
<h1>{ user.Name }</h1>
) }
</FetchUser>
);
}
function UserName1() {
return (
<FetchUser>
{ user => (
<h1>{ user.Name }</h1>
) }
</FetchUser>
);
}
//// [file.jsx]
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
exports.__esModule = true;
var React = require("react");
var FetchUser = (function (_super) {
__extends(FetchUser, _super);
function FetchUser() {
return _super !== null && _super.apply(this, arguments) || this;
}
FetchUser.prototype.render = function () {
return this.state
? this.props.children(this.state.result)
: null;
};
return FetchUser;
}(React.Component));
// Ok
function UserName0() {
return (<FetchUser>
{function (user) { return (<h1>{user.Name}</h1>); }}
</FetchUser>);
}
function UserName1() {
return (<FetchUser>
{function (user) { return (<h1>{user.Name}</h1>); }}
</FetchUser>);
}

99
tests/baselines/reference/checkJsxChildrenProperty3.symbols Normal file
View File

@ -0,0 +1,99 @@
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : Symbol(React, Decl(file.tsx, 0, 0))
interface IUser {
>IUser : Symbol(IUser, Decl(file.tsx, 0, 32))
Name: string;
>Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
}
interface IFetchUserProps {
>IFetchUserProps : Symbol(IFetchUserProps, Decl(file.tsx, 4, 1))
children: (user: IUser) => JSX.Element;
>children : Symbol(IFetchUserProps.children, Decl(file.tsx, 6, 27))
>user : Symbol(user, Decl(file.tsx, 7, 15))
>IUser : Symbol(IUser, Decl(file.tsx, 0, 32))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
}
class FetchUser extends React.Component<IFetchUserProps, any> {
>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
>React.Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
>React : Symbol(React, Decl(file.tsx, 0, 0))
>Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
>IFetchUserProps : Symbol(IFetchUserProps, Decl(file.tsx, 4, 1))
render() {
>render : Symbol(FetchUser.render, Decl(file.tsx, 10, 63))
return this.state
>this.state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44))
>this : Symbol(FetchUser, Decl(file.tsx, 8, 1))
>state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44))
? this.props.children(this.state.result)
>this.props.children : Symbol(children, Decl(file.tsx, 6, 27), Decl(react.d.ts, 173, 20))
>this.props : Symbol(React.Component.props, Decl(react.d.ts, 166, 37))
>this : Symbol(FetchUser, Decl(file.tsx, 8, 1))
>props : Symbol(React.Component.props, Decl(react.d.ts, 166, 37))
>children : Symbol(children, Decl(file.tsx, 6, 27), Decl(react.d.ts, 173, 20))
>this.state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44))
>this : Symbol(FetchUser, Decl(file.tsx, 8, 1))
>state : Symbol(React.Component.state, Decl(react.d.ts, 173, 44))
: null;
}
}
// Ok
function UserName0() {
>UserName0 : Symbol(UserName0, Decl(file.tsx, 16, 1))
return (
<FetchUser>
>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
{ user => (
>user : Symbol(user, Decl(file.tsx, 22, 13))
<h1>{ user.Name }</h1>
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
>user.Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
>user : Symbol(user, Decl(file.tsx, 22, 13))
>Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
) }
</FetchUser>
>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
);
}
function UserName1() {
>UserName1 : Symbol(UserName1, Decl(file.tsx, 27, 1))
return (
<FetchUser>
>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
{ user => (
>user : Symbol(user, Decl(file.tsx, 33, 13))
<h1>{ user.Name }</h1>
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
>user.Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
>user : Symbol(user, Decl(file.tsx, 33, 13))
>Name : Symbol(IUser.Name, Decl(file.tsx, 2, 17))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
) }
</FetchUser>
>FetchUser : Symbol(FetchUser, Decl(file.tsx, 8, 1))
);
}

116
tests/baselines/reference/checkJsxChildrenProperty3.types Normal file
View File

@ -0,0 +1,116 @@
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : typeof React
interface IUser {
>IUser : IUser
Name: string;
>Name : string
}
interface IFetchUserProps {
>IFetchUserProps : IFetchUserProps
children: (user: IUser) => JSX.Element;
>children : (user: IUser) => JSX.Element
>user : IUser
>IUser : IUser
>JSX : any
>Element : JSX.Element
}
class FetchUser extends React.Component<IFetchUserProps, any> {
>FetchUser : FetchUser
>React.Component : React.Component<IFetchUserProps, any>
>React : typeof React
>Component : typeof React.Component
>IFetchUserProps : IFetchUserProps
render() {
>render : () => JSX.Element
return this.state
>this.state ? this.props.children(this.state.result) : null : JSX.Element
>this.state : any
>this : this
>state : any
? this.props.children(this.state.result)
>this.props.children(this.state.result) : JSX.Element
>this.props.children : ((user: IUser) => JSX.Element) | (((user: IUser) => JSX.Element) & string) | (((user: IUser) => JSX.Element) & number) | (((user: IUser) => JSX.Element) & true) | (((user: IUser) => JSX.Element) & false) | (((user: IUser) => JSX.Element) & React.ReactElement<any>) | (((user: IUser) => JSX.Element) & (string | number | boolean | any[] | React.ReactElement<any>)[])
>this.props : IFetchUserProps & { children?: React.ReactNode; }
>this : this
>props : IFetchUserProps & { children?: React.ReactNode; }
>children : ((user: IUser) => JSX.Element) | (((user: IUser) => JSX.Element) & string) | (((user: IUser) => JSX.Element) & number) | (((user: IUser) => JSX.Element) & true) | (((user: IUser) => JSX.Element) & false) | (((user: IUser) => JSX.Element) & React.ReactElement<any>) | (((user: IUser) => JSX.Element) & (string | number | boolean | any[] | React.ReactElement<any>)[])
>this.state.result : any
>this.state : any
>this : this
>state : any
>result : any
: null;
>null : null
}
}
// Ok
function UserName0() {
>UserName0 : () => JSX.Element
return (
>( <FetchUser> { user => ( <h1>{ user.Name }</h1> ) } </FetchUser> ) : JSX.Element
<FetchUser>
><FetchUser> { user => ( <h1>{ user.Name }</h1> ) } </FetchUser> : JSX.Element
>FetchUser : typeof FetchUser
{ user => (
>user => ( <h1>{ user.Name }</h1> ) : (user: IUser) => JSX.Element
>user : IUser
>( <h1>{ user.Name }</h1> ) : JSX.Element
<h1>{ user.Name }</h1>
><h1>{ user.Name }</h1> : JSX.Element
>h1 : any
>user.Name : string
>user : IUser
>Name : string
>h1 : any
) }
</FetchUser>
>FetchUser : typeof FetchUser
);
}
function UserName1() {
>UserName1 : () => JSX.Element
return (
>( <FetchUser> { user => ( <h1>{ user.Name }</h1> ) } </FetchUser> ) : JSX.Element
<FetchUser>
><FetchUser> { user => ( <h1>{ user.Name }</h1> ) } </FetchUser> : JSX.Element
>FetchUser : typeof FetchUser
{ user => (
>user => ( <h1>{ user.Name }</h1> ) : (user: IUser) => JSX.Element
>user : IUser
>( <h1>{ user.Name }</h1> ) : JSX.Element
<h1>{ user.Name }</h1>
><h1>{ user.Name }</h1> : JSX.Element
>h1 : any
>user.Name : string
>user : IUser
>Name : string
>h1 : any
) }
</FetchUser>
>FetchUser : typeof FetchUser
);
}

61
tests/baselines/reference/checkJsxChildrenProperty4.errors.txt Normal file
View File

@ -0,0 +1,61 @@
tests/cases/conformance/jsx/file.tsx(24,28): error TS2339: Property 'NAme' does not exist on type 'IUser'.
tests/cases/conformance/jsx/file.tsx(32,9): error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FetchUser> & IFetchUserProps & { children?: ReactNode; }'.
Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'.
Types of property 'children' are incompatible.
Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'.
Type '((user: IUser) => Element)[]' provides no match for the signature '(user: IUser): Element'.
==== tests/cases/conformance/jsx/file.tsx (2 errors) ====
import React = require('react');
interface IUser {
Name: string;
}
interface IFetchUserProps {
children: (user: IUser) => JSX.Element;
}
class FetchUser extends React.Component<IFetchUserProps, any> {
render() {
return this.state
? this.props.children(this.state.result)
: null;
}
}
// Error
function UserName() {
return (
<FetchUser>
{ user => (
<h1>{ user.NAme }</h1>
~~~~
!!! error TS2339: Property 'NAme' does not exist on type 'IUser'.
) }
</FetchUser>
);
}
function UserName1() {
return (
<FetchUser>
~~~~~~~~~~~
!!! error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<FetchUser> & IFetchUserProps & { children?: ReactNode; }'.
!!! error TS2322: Type '{ children: ((user: IUser) => Element)[]; }' is not assignable to type 'IFetchUserProps'.
!!! error TS2322: Types of property 'children' are incompatible.
!!! error TS2322: Type '((user: IUser) => Element)[]' is not assignable to type '(user: IUser) => Element'.
!!! error TS2322: Type '((user: IUser) => Element)[]' provides no match for the signature '(user: IUser): Element'.
{ user => (
<h1>{ user.Name }</h1>
) }
{ user => (
<h1>{ user.Name }</h1>
) }
</FetchUser>
);
}

87
tests/baselines/reference/checkJsxChildrenProperty4.js Normal file
View File

@ -0,0 +1,87 @@
//// [file.tsx]
import React = require('react');
interface IUser {
Name: string;
}
interface IFetchUserProps {
children: (user: IUser) => JSX.Element;
}
class FetchUser extends React.Component<IFetchUserProps, any> {
render() {
return this.state
? this.props.children(this.state.result)
: null;
}
}
// Error
function UserName() {
return (
<FetchUser>
{ user => (
<h1>{ user.NAme }</h1>
) }
</FetchUser>
);
}
function UserName1() {
return (
<FetchUser>
{ user => (
<h1>{ user.Name }</h1>
) }
{ user => (
<h1>{ user.Name }</h1>
) }
</FetchUser>
);
}
//// [file.jsx]
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
exports.__esModule = true;
var React = require("react");
var FetchUser = (function (_super) {
__extends(FetchUser, _super);
function FetchUser() {
return _super !== null && _super.apply(this, arguments) || this;
}
FetchUser.prototype.render = function () {
return this.state
? this.props.children(this.state.result)
: null;
};
return FetchUser;
}(React.Component));
// Error
function UserName() {
return (<FetchUser>
{function (user) { return (<h1>{user.NAme}</h1>); }}
</FetchUser>);
}
function UserName1() {
return (<FetchUser>
{function (user) { return (<h1>{user.Name}</h1>); }}
{function (user) { return (<h1>{user.Name}</h1>); }}
</FetchUser>);
}

62
tests/baselines/reference/checkJsxChildrenProperty5.errors.txt Normal file
View File

@ -0,0 +1,62 @@
tests/cases/conformance/jsx/file.tsx(20,15): error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
tests/cases/conformance/jsx/file.tsx(24,11): error TS2322: Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'IntrinsicAttributes & Prop'.
Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'Prop'.
Types of property 'children' are incompatible.
Type 'Element' is not assignable to type 'Button'.
Property 'render' is missing in type 'Element'.
tests/cases/conformance/jsx/file.tsx(28,11): error TS2322: Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'IntrinsicAttributes & Prop'.
Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'Prop'.
Types of property 'children' are incompatible.
Type 'typeof Button' is not assignable to type 'Button'.
Property 'render' is missing in type 'typeof Button'.
==== tests/cases/conformance/jsx/file.tsx (3 errors) ====
import React = require('react');
interface Prop {
a: number,
b: string,
children: Button;
}
class Button extends React.Component<any, any> {
render() {
return (<div>My Button</div>)
}
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// Error: no children specified
let k = <Comp a={10} b="hi" />;
~~~~~~~~~~~~~
!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'IntrinsicAttributes & Prop'.
!!! error TS2322: Type '{ a: 10; b: "hi"; }' is not assignable to type 'Prop'.
!!! error TS2322: Property 'children' is missing in type '{ a: 10; b: "hi"; }'.
// Error: JSX.element is not the same as JSX.ElementClass
let k1 =
<Comp a={10} b="hi">
~~~~~~~~~~~~~
!!! error TS2322: Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'IntrinsicAttributes & Prop'.
!!! error TS2322: Type '{ a: 10; b: "hi"; children: Element; }' is not assignable to type 'Prop'.
!!! error TS2322: Types of property 'children' are incompatible.
!!! error TS2322: Type 'Element' is not assignable to type 'Button'.
!!! error TS2322: Property 'render' is missing in type 'Element'.
<Button />
</Comp>;
let k2 =
<Comp a={10} b="hi">
~~~~~~~~~~~~~
!!! error TS2322: Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'IntrinsicAttributes & Prop'.
!!! error TS2322: Type '{ a: 10; b: "hi"; children: typeof Button; }' is not assignable to type 'Prop'.
!!! error TS2322: Types of property 'children' are incompatible.
!!! error TS2322: Type 'typeof Button' is not assignable to type 'Button'.
!!! error TS2322: Property 'render' is missing in type 'typeof Button'.
{Button}
</Comp>;

68
tests/baselines/reference/checkJsxChildrenProperty5.js Normal file
View File

@ -0,0 +1,68 @@
//// [file.tsx]
import React = require('react');
interface Prop {
a: number,
b: string,
children: Button;
}
class Button extends React.Component<any, any> {
render() {
return (<div>My Button</div>)
}
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// Error: no children specified
let k = <Comp a={10} b="hi" />;
// Error: JSX.element is not the same as JSX.ElementClass
let k1 =
<Comp a={10} b="hi">
<Button />
</Comp>;
let k2 =
<Comp a={10} b="hi">
{Button}
</Comp>;
//// [file.jsx]
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
exports.__esModule = true;
var React = require("react");
var Button = (function (_super) {
__extends(Button, _super);
function Button() {
return _super !== null && _super.apply(this, arguments) || this;
}
Button.prototype.render = function () {
return (<div>My Button</div>);
};
return Button;
}(React.Component));
function Comp(p) {
return <div>{p.b}</div>;
}
// Error: no children specified
var k = <Comp a={10} b="hi"/>;
// Error: JSX.element is not the same as JSX.ElementClass
var k1 = <Comp a={10} b="hi">
<Button />
</Comp>;
var k2 = <Comp a={10} b="hi">
{Button}
</Comp>;

91
tests/baselines/reference/checkJsxChildrenProperty6.js Normal file
View File

@ -0,0 +1,91 @@
//// [file.tsx]
import React = require('react');
interface Prop {
a: number,
b: string,
children: JSX.Element | JSX.Element[];
}
class Button extends React.Component<any, any> {
render() {
return (<div>My Button</div>)
}
}
function AnotherButton(p: any) {
return <h1>Just Another Button</h1>;
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// Ok
let k1 =
<Comp a={10} b="hi">
<Button />
<AnotherButton />
</Comp>;
let k2 =
<Comp a={10} b="hi">
<Button />
<AnotherButton />
</Comp>;
let k3 = <Comp a={10} b="hi"><Button />
<AnotherButton />
</Comp>;
let k4 = <Comp a={10} b="hi"><Button /></Comp>;
//// [file.jsx]
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
exports.__esModule = true;
var React = require("react");
var Button = (function (_super) {
__extends(Button, _super);
function Button() {
return _super !== null && _super.apply(this, arguments) || this;
}
Button.prototype.render = function () {
return (<div>My Button</div>);
};
return Button;
}(React.Component));
function AnotherButton(p) {
return <h1>Just Another Button</h1>;
}
function Comp(p) {
return <div>{p.b}</div>;
}
// Ok
var k1 = <Comp a={10} b="hi">
<Button />
<AnotherButton />
</Comp>;
var k2 = <Comp a={10} b="hi">
<Button />
<AnotherButton />
</Comp>;
var k3 = <Comp a={10} b="hi"><Button />
<AnotherButton />
</Comp>;
var k4 = <Comp a={10} b="hi"><Button /></Comp>;

116
tests/baselines/reference/checkJsxChildrenProperty6.symbols Normal file
View File

@ -0,0 +1,116 @@
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : Symbol(React, Decl(file.tsx, 0, 0))
interface Prop {
>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
a: number,
>a : Symbol(Prop.a, Decl(file.tsx, 2, 16))
b: string,
>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
children: JSX.Element | JSX.Element[];
>children : Symbol(Prop.children, Decl(file.tsx, 4, 14))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
}
class Button extends React.Component<any, any> {
>Button : Symbol(Button, Decl(file.tsx, 6, 1))
>React.Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
>React : Symbol(React, Decl(file.tsx, 0, 0))
>Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
render() {
>render : Symbol(Button.render, Decl(file.tsx, 8, 48))
return (<div>My Button</div>)
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
}
function AnotherButton(p: any) {
>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
>p : Symbol(p, Decl(file.tsx, 14, 23))
return <h1>Just Another Button</h1>;
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
}
function Comp(p: Prop) {
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
>p : Symbol(p, Decl(file.tsx, 18, 14))
>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
return <div>{p.b}</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
>p : Symbol(p, Decl(file.tsx, 18, 14))
>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
// Ok
let k1 =
>k1 : Symbol(k1, Decl(file.tsx, 23, 3))
<Comp a={10} b="hi">
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
>a : Symbol(a, Decl(file.tsx, 24, 9))
>b : Symbol(b, Decl(file.tsx, 24, 16))
<Button />
>Button : Symbol(Button, Decl(file.tsx, 6, 1))
<AnotherButton />
>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
</Comp>;
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
let k2 =
>k2 : Symbol(k2, Decl(file.tsx, 29, 3))
<Comp a={10} b="hi">
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
>a : Symbol(a, Decl(file.tsx, 30, 9))
>b : Symbol(b, Decl(file.tsx, 30, 16))
<Button />
>Button : Symbol(Button, Decl(file.tsx, 6, 1))
<AnotherButton />
>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
</Comp>;
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
let k3 = <Comp a={10} b="hi"><Button />
>k3 : Symbol(k3, Decl(file.tsx, 38, 3))
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
>a : Symbol(a, Decl(file.tsx, 38, 14))
>b : Symbol(b, Decl(file.tsx, 38, 21))
>Button : Symbol(Button, Decl(file.tsx, 6, 1))
<AnotherButton />
>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
</Comp>;
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
let k4 = <Comp a={10} b="hi"><Button /></Comp>;
>k4 : Symbol(k4, Decl(file.tsx, 42, 3))
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
>a : Symbol(a, Decl(file.tsx, 42, 14))
>b : Symbol(b, Decl(file.tsx, 42, 21))
>Button : Symbol(Button, Decl(file.tsx, 6, 1))
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))

135
tests/baselines/reference/checkJsxChildrenProperty6.types Normal file
View File

@ -0,0 +1,135 @@
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : typeof React
interface Prop {
>Prop : Prop
a: number,
>a : number
b: string,
>b : string
children: JSX.Element | JSX.Element[];
>children : JSX.Element | JSX.Element[]
>JSX : any
>Element : JSX.Element
>JSX : any
>Element : JSX.Element
}
class Button extends React.Component<any, any> {
>Button : Button
>React.Component : React.Component<any, any>
>React : typeof React
>Component : typeof React.Component
render() {
>render : () => JSX.Element
return (<div>My Button</div>)
>(<div>My Button</div>) : JSX.Element
><div>My Button</div> : JSX.Element
>div : any
>div : any
}
}
function AnotherButton(p: any) {
>AnotherButton : (p: any) => JSX.Element
>p : any
return <h1>Just Another Button</h1>;
><h1>Just Another Button</h1> : JSX.Element
>h1 : any
>h1 : any
}
function Comp(p: Prop) {
>Comp : (p: Prop) => JSX.Element
>p : Prop
>Prop : Prop
return <div>{p.b}</div>;
><div>{p.b}</div> : JSX.Element
>div : any
>p.b : string
>p : Prop
>b : string
>div : any
}
// Ok
let k1 =
>k1 : JSX.Element
<Comp a={10} b="hi">
><Comp a={10} b="hi"> <Button /> <AnotherButton /> </Comp> : JSX.Element
>Comp : (p: Prop) => JSX.Element
>a : number
>10 : 10
>b : string
<Button />
><Button /> : JSX.Element
>Button : typeof Button
<AnotherButton />
><AnotherButton /> : JSX.Element
>AnotherButton : (p: any) => JSX.Element
</Comp>;
>Comp : (p: Prop) => JSX.Element
let k2 =
>k2 : JSX.Element
<Comp a={10} b="hi">
><Comp a={10} b="hi"> <Button /> <AnotherButton /> </Comp> : JSX.Element
>Comp : (p: Prop) => JSX.Element
>a : number
>10 : 10
>b : string
<Button />
><Button /> : JSX.Element
>Button : typeof Button
<AnotherButton />
><AnotherButton /> : JSX.Element
>AnotherButton : (p: any) => JSX.Element
</Comp>;
>Comp : (p: Prop) => JSX.Element
let k3 = <Comp a={10} b="hi"><Button />
>k3 : JSX.Element
><Comp a={10} b="hi"><Button /> <AnotherButton /></Comp> : JSX.Element
>Comp : (p: Prop) => JSX.Element
>a : number
>10 : 10
>b : string
><Button /> : JSX.Element
>Button : typeof Button
<AnotherButton />
><AnotherButton /> : JSX.Element
>AnotherButton : (p: any) => JSX.Element
</Comp>;
>Comp : (p: Prop) => JSX.Element
let k4 = <Comp a={10} b="hi"><Button /></Comp>;
>k4 : JSX.Element
><Comp a={10} b="hi"><Button /></Comp> : JSX.Element
>Comp : (p: Prop) => JSX.Element
>a : number
>10 : 10
>b : string
><Button /> : JSX.Element
>Button : typeof Button
>Comp : (p: Prop) => JSX.Element

68
tests/baselines/reference/checkJsxChildrenProperty7.errors.txt Normal file
View File

@ -0,0 +1,68 @@
tests/cases/conformance/jsx/file.tsx(24,16): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
Types of property 'children' are incompatible.
Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
Type '(string | Element)[]' is not assignable to type 'Element[]'.
Type 'string | Element' is not assignable to type 'Element'.
Type 'string' is not assignable to type 'Element'.
tests/cases/conformance/jsx/file.tsx(25,16): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
Types of property 'children' are incompatible.
Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
Type '(string | Element)[]' is not assignable to type 'Element[]'.
tests/cases/conformance/jsx/file.tsx(27,16): error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
Types of property 'children' are incompatible.
Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
Type '(string | Element)[]' is not assignable to type 'Element[]'.
==== tests/cases/conformance/jsx/file.tsx (3 errors) ====
import React = require('react');
interface Prop {
a: number,
b: string,
children: JSX.Element | JSX.Element[];
}
class Button extends React.Component<any, any> {
render() {
return (<div>My Button</div>)
}
}
function AnotherButton(p: any) {
return <h1>Just Another Button</h1>;
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// Error: whitespaces matters
let k1 = <Comp a={10} b="hi"><Button /> <AnotherButton /></Comp>;
~~~~~~~~~~~~~
!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
!!! error TS2322: Types of property 'children' are incompatible.
!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'Element[]'.
!!! error TS2322: Type 'string | Element' is not assignable to type 'Element'.
!!! error TS2322: Type 'string' is not assignable to type 'Element'.
let k2 = <Comp a={10} b="hi"><Button />
~~~~~~~~~~~~~
!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
!!! error TS2322: Types of property 'children' are incompatible.
!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'Element[]'.
<AnotherButton /> </Comp>;
let k3 = <Comp a={10} b="hi"> <Button />
~~~~~~~~~~~~~
!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'IntrinsicAttributes & Prop'.
!!! error TS2322: Type '{ a: 10; b: "hi"; children: (string | Element)[]; }' is not assignable to type 'Prop'.
!!! error TS2322: Types of property 'children' are incompatible.
!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'Element | Element[]'.
!!! error TS2322: Type '(string | Element)[]' is not assignable to type 'Element[]'.
<AnotherButton /></Comp>;

66
tests/baselines/reference/checkJsxChildrenProperty7.js Normal file
View File

@ -0,0 +1,66 @@
//// [file.tsx]
import React = require('react');
interface Prop {
a: number,
b: string,
children: JSX.Element | JSX.Element[];
}
class Button extends React.Component<any, any> {
render() {
return (<div>My Button</div>)
}
}
function AnotherButton(p: any) {
return <h1>Just Another Button</h1>;
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// Error: whitespaces matters
let k1 = <Comp a={10} b="hi"><Button /> <AnotherButton /></Comp>;
let k2 = <Comp a={10} b="hi"><Button />
<AnotherButton /> </Comp>;
let k3 = <Comp a={10} b="hi"> <Button />
<AnotherButton /></Comp>;
//// [file.jsx]
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
exports.__esModule = true;
var React = require("react");
var Button = (function (_super) {
__extends(Button, _super);
function Button() {
return _super !== null && _super.apply(this, arguments) || this;
}
Button.prototype.render = function () {
return (<div>My Button</div>);
};
return Button;
}(React.Component));
function AnotherButton(p) {
return <h1>Just Another Button</h1>;
}
function Comp(p) {
return <div>{p.b}</div>;
}
// Error: whitespaces matters
var k1 = <Comp a={10} b="hi"><Button /> <AnotherButton /></Comp>;
var k2 = <Comp a={10} b="hi"><Button />
<AnotherButton /> </Comp>;
var k3 = <Comp a={10} b="hi"> <Button />
<AnotherButton /></Comp>;

68
tests/baselines/reference/checkJsxChildrenProperty8.js Normal file
View File

@ -0,0 +1,68 @@
//// [file.tsx]
import React = require('react');
interface Prop {
a: number,
b: string,
children: string | JSX.Element | (string | JSX.Element)[];
}
class Button extends React.Component<any, any> {
render() {
return (<div>My Button</div>)
}
}
function AnotherButton(p: any) {
return <h1>Just Another Button</h1>;
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// OK
let k1 = <Comp a={10} b="hi"><Button /> <AnotherButton /></Comp>;
let k2 = <Comp a={10} b="hi"><Button />
<AnotherButton /> </Comp>;
let k3 = <Comp a={10} b="hi"> <Button />
<AnotherButton /></Comp>;
let k4 = <Comp a={10} b="hi"><Button /> </Comp>;
//// [file.jsx]
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
exports.__esModule = true;
var React = require("react");
var Button = (function (_super) {
__extends(Button, _super);
function Button() {
return _super !== null && _super.apply(this, arguments) || this;
}
Button.prototype.render = function () {
return (<div>My Button</div>);
};
return Button;
}(React.Component));
function AnotherButton(p) {
return <h1>Just Another Button</h1>;
}
function Comp(p) {
return <div>{p.b}</div>;
}
// OK
var k1 = <Comp a={10} b="hi"><Button /> <AnotherButton /></Comp>;
var k2 = <Comp a={10} b="hi"><Button />
<AnotherButton /> </Comp>;
var k3 = <Comp a={10} b="hi"> <Button />
<AnotherButton /></Comp>;
var k4 = <Comp a={10} b="hi"><Button /> </Comp>;

98
tests/baselines/reference/checkJsxChildrenProperty8.symbols Normal file
View File

@ -0,0 +1,98 @@
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : Symbol(React, Decl(file.tsx, 0, 0))
interface Prop {
>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
a: number,
>a : Symbol(Prop.a, Decl(file.tsx, 2, 16))
b: string,
>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
children: string | JSX.Element | (string | JSX.Element)[];
>children : Symbol(Prop.children, Decl(file.tsx, 4, 14))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
}
class Button extends React.Component<any, any> {
>Button : Symbol(Button, Decl(file.tsx, 6, 1))
>React.Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
>React : Symbol(React, Decl(file.tsx, 0, 0))
>Component : Symbol(React.Component, Decl(react.d.ts, 158, 55))
render() {
>render : Symbol(Button.render, Decl(file.tsx, 8, 48))
return (<div>My Button</div>)
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
}
function AnotherButton(p: any) {
>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
>p : Symbol(p, Decl(file.tsx, 14, 23))
return <h1>Just Another Button</h1>;
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
}
function Comp(p: Prop) {
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
>p : Symbol(p, Decl(file.tsx, 18, 14))
>Prop : Symbol(Prop, Decl(file.tsx, 0, 32))
return <div>{p.b}</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>p.b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
>p : Symbol(p, Decl(file.tsx, 18, 14))
>b : Symbol(Prop.b, Decl(file.tsx, 3, 14))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
// OK
let k1 = <Comp a={10} b="hi"><Button /> <AnotherButton /></Comp>;
>k1 : Symbol(k1, Decl(file.tsx, 23, 3))
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
>a : Symbol(a, Decl(file.tsx, 23, 14))
>b : Symbol(b, Decl(file.tsx, 23, 21))
>Button : Symbol(Button, Decl(file.tsx, 6, 1))
>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
let k2 = <Comp a={10} b="hi"><Button />
>k2 : Symbol(k2, Decl(file.tsx, 24, 3))
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
>a : Symbol(a, Decl(file.tsx, 24, 14))
>b : Symbol(b, Decl(file.tsx, 24, 21))
>Button : Symbol(Button, Decl(file.tsx, 6, 1))
<AnotherButton /> </Comp>;
>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
let k3 = <Comp a={10} b="hi"> <Button />
>k3 : Symbol(k3, Decl(file.tsx, 26, 3))
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
>a : Symbol(a, Decl(file.tsx, 26, 14))
>b : Symbol(b, Decl(file.tsx, 26, 21))
>Button : Symbol(Button, Decl(file.tsx, 6, 1))
<AnotherButton /></Comp>;
>AnotherButton : Symbol(AnotherButton, Decl(file.tsx, 12, 1))
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
let k4 = <Comp a={10} b="hi"><Button /> </Comp>;
>k4 : Symbol(k4, Decl(file.tsx, 28, 3))
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))
>a : Symbol(a, Decl(file.tsx, 28, 14))
>b : Symbol(b, Decl(file.tsx, 28, 21))
>Button : Symbol(Button, Decl(file.tsx, 6, 1))
>Comp : Symbol(Comp, Decl(file.tsx, 16, 1))

117
tests/baselines/reference/checkJsxChildrenProperty8.types Normal file
View File

@ -0,0 +1,117 @@
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : typeof React
interface Prop {
>Prop : Prop
a: number,
>a : number
b: string,
>b : string
children: string | JSX.Element | (string | JSX.Element)[];
>children : string | JSX.Element | (string | JSX.Element)[]
>JSX : any
>Element : JSX.Element
>JSX : any
>Element : JSX.Element
}
class Button extends React.Component<any, any> {
>Button : Button
>React.Component : React.Component<any, any>
>React : typeof React
>Component : typeof React.Component
render() {
>render : () => JSX.Element
return (<div>My Button</div>)
>(<div>My Button</div>) : JSX.Element
><div>My Button</div> : JSX.Element
>div : any
>div : any
}
}
function AnotherButton(p: any) {
>AnotherButton : (p: any) => JSX.Element
>p : any
return <h1>Just Another Button</h1>;
><h1>Just Another Button</h1> : JSX.Element
>h1 : any
>h1 : any
}
function Comp(p: Prop) {
>Comp : (p: Prop) => JSX.Element
>p : Prop
>Prop : Prop
return <div>{p.b}</div>;
><div>{p.b}</div> : JSX.Element
>div : any
>p.b : string
>p : Prop
>b : string
>div : any
}
// OK
let k1 = <Comp a={10} b="hi"><Button /> <AnotherButton /></Comp>;
>k1 : JSX.Element
><Comp a={10} b="hi"><Button /> <AnotherButton /></Comp> : JSX.Element
>Comp : (p: Prop) => JSX.Element
>a : number
>10 : 10
>b : string
><Button /> : JSX.Element
>Button : typeof Button
><AnotherButton /> : JSX.Element
>AnotherButton : (p: any) => JSX.Element
>Comp : (p: Prop) => JSX.Element
let k2 = <Comp a={10} b="hi"><Button />
>k2 : JSX.Element
><Comp a={10} b="hi"><Button /> <AnotherButton /> </Comp> : JSX.Element
>Comp : (p: Prop) => JSX.Element
>a : number
>10 : 10
>b : string
><Button /> : JSX.Element
>Button : typeof Button
<AnotherButton /> </Comp>;
><AnotherButton /> : JSX.Element
>AnotherButton : (p: any) => JSX.Element
>Comp : (p: Prop) => JSX.Element
let k3 = <Comp a={10} b="hi"> <Button />
>k3 : JSX.Element
><Comp a={10} b="hi"> <Button /> <AnotherButton /></Comp> : JSX.Element
>Comp : (p: Prop) => JSX.Element
>a : number
>10 : 10
>b : string
><Button /> : JSX.Element
>Button : typeof Button
<AnotherButton /></Comp>;
><AnotherButton /> : JSX.Element
>AnotherButton : (p: any) => JSX.Element
>Comp : (p: Prop) => JSX.Element
let k4 = <Comp a={10} b="hi"><Button /> </Comp>;
>k4 : JSX.Element
><Comp a={10} b="hi"><Button /> </Comp> : JSX.Element
>Comp : (p: Prop) => JSX.Element
>a : number
>10 : 10
>b : string
><Button /> : JSX.Element
>Button : typeof Button
>Comp : (p: Prop) => JSX.Element

16
tests/baselines/reference/checkJsxChildrenProperty9.js Normal file
View File

@ -0,0 +1,16 @@
//// [file.tsx]
import React = require('react');
// OK
let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
let k3 = <div> {1} {"That is a number"} </div>;
//// [file.jsx]
"use strict";
exports.__esModule = true;
var React = require("react");
// OK
var k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
var k2 = <div> <h2> Hello </h2> {function (user) { return <h2>{user.name}</h2>; }}</div>;
var k3 = <div> {1} {"That is a number"} </div>;

30
tests/baselines/reference/checkJsxChildrenProperty9.symbols Normal file
View File

@ -0,0 +1,30 @@
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : Symbol(React, Decl(file.tsx, 0, 0))
// OK
let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
>k1 : Symbol(k1, Decl(file.tsx, 3, 3))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
>k2 : Symbol(k2, Decl(file.tsx, 4, 3))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
>user : Symbol(user, Decl(file.tsx, 4, 34))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
>user : Symbol(user, Decl(file.tsx, 4, 34))
>h2 : Symbol(JSX.IntrinsicElements.h2, Decl(react.d.ts, 2410, 48))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
let k3 = <div> {1} {"That is a number"} </div>;
>k3 : Symbol(k3, Decl(file.tsx, 5, 3))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))

42
tests/baselines/reference/checkJsxChildrenProperty9.types Normal file
View File

@ -0,0 +1,42 @@
=== tests/cases/conformance/jsx/file.tsx ===
import React = require('react');
>React : typeof React
// OK
let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
>k1 : JSX.Element
><div> <h2> Hello </h2> <h1> world </h1></div> : JSX.Element
>div : any
><h2> Hello </h2> : JSX.Element
>h2 : any
>h2 : any
><h1> world </h1> : JSX.Element
>h1 : any
>h1 : any
>div : any
let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
>k2 : JSX.Element
><div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div> : JSX.Element
>div : any
><h2> Hello </h2> : JSX.Element
>h2 : any
>h2 : any
>(user: any) => <h2>{user.name}</h2> : (user: any) => JSX.Element
>user : any
><h2>{user.name}</h2> : JSX.Element
>h2 : any
>user.name : any
>user : any
>name : any
>h2 : any
>div : any
let k3 = <div> {1} {"That is a number"} </div>;
>k3 : JSX.Element
><div> {1} {"That is a number"} </div> : JSX.Element
>div : any
>1 : 1
>"That is a number" : "That is a number"
>div : any

4
tests/baselines/reference/tsxDefaultAttributesResolution1.symbols
View File

@ -19,8 +19,8 @@ class Poisoned extends React.Component<Prop, {}> {
>render : Symbol(Poisoned.render, Decl(file.tsx, 5, 50))
return <div>Hello</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
}

4
tests/baselines/reference/tsxDefaultAttributesResolution2.symbols
View File

@ -19,8 +19,8 @@ class Poisoned extends React.Component<Prop, {}> {
>render : Symbol(Poisoned.render, Decl(file.tsx, 5, 50))
return <div>Hello</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
}

4
tests/baselines/reference/tsxSpreadAttributesResolution1.symbols
View File

@ -12,8 +12,8 @@ class Poisoned extends React.Component<{}, {}> {
>render : Symbol(Poisoned.render, Decl(file.tsx, 2, 48))
return <div>Hello</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
}

4
tests/baselines/reference/tsxSpreadAttributesResolution11.symbols
View File

@ -48,8 +48,8 @@ class OverWriteAttr extends React.Component<Prop, {}> {
>render : Symbol(OverWriteAttr.render, Decl(file.tsx, 17, 55))
return <div>Hello</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
}

4
tests/baselines/reference/tsxSpreadAttributesResolution3.symbols
View File

@ -23,8 +23,8 @@ class Poisoned extends React.Component<PoisonedProp, {}> {
>render : Symbol(Poisoned.render, Decl(file.tsx, 7, 58))
return <div>Hello</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
}

8
tests/baselines/reference/tsxSpreadAttributesResolution4.symbols
View File

@ -23,8 +23,8 @@ class Poisoned extends React.Component<PoisonedProp, {}> {
>render : Symbol(Poisoned.render, Decl(file.tsx, 7, 58))
return <div>Hello</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
}
@ -56,8 +56,8 @@ class EmptyProp extends React.Component<{}, {}> {
>render : Symbol(EmptyProp.render, Decl(file.tsx, 21, 49))
return <div>Default hi</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
}

4
tests/baselines/reference/tsxSpreadAttributesResolution7.symbols
View File

@ -22,8 +22,8 @@ class TextComponent extends React.Component<TextProps, {}> {
>render : Symbol(TextComponent.render, Decl(file.tsx, 5, 60))
return <span>Some Text..</span>;
>span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2458, 51))
>span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2458, 51))
>span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2460, 51))
>span : Symbol(JSX.IntrinsicElements.span, Decl(react.d.ts, 2460, 51))
}
}

4
tests/baselines/reference/tsxSpreadAttributesResolution8.symbols
View File

@ -45,8 +45,8 @@ class OverWriteAttr extends React.Component<Prop, {}> {
>render : Symbol(OverWriteAttr.render, Decl(file.tsx, 17, 55))
return <div>Hello</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
}

4
tests/baselines/reference/tsxSpreadAttributesResolution9.symbols
View File

@ -23,8 +23,8 @@ class Opt extends React.Component<OptionProp, {}> {
>render : Symbol(Opt.render, Decl(file.tsx, 7, 51))
return <div>Hello</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
}

4
tests/baselines/reference/tsxStatelessFunctionComponentOverload1.js
View File

@ -2,6 +2,7 @@
import React = require('react')
declare function OneThing(k: {yxx: string}): JSX.Element;
declare function OneThing(k: {yxx1: string, children: string}): JSX.Element;
declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
@ -11,6 +12,8 @@ const c1 = <OneThing yxx='ok' />
const c2 = <OneThing yy={100} yy1="hello"/>
const c3 = <OneThing yxx="hello" ignore-prop />
const c4 = <OneThing data="hello" data-prop />
const c5 = <OneThing yxx1='ok'>Hello</OneThing>
declare function TestingOneThing({y1: string}): JSX.Element;
declare function TestingOneThing(j: {"extra-data": string, yy?: string}): JSX.Element;
@ -48,6 +51,7 @@ define(["require", "exports", "react"], function (require, exports, React) {
var c2 = <OneThing yy={100} yy1="hello"/>;
var c3 = <OneThing yxx="hello" ignore-prop/>;
var c4 = <OneThing data="hello" data-prop/>;
var c5 = <OneThing yxx1='ok'>Hello</OneThing>;
// OK
var d1 = <TestingOneThing y1 extra-data/>;
var d2 = <TestingOneThing extra-data="hello"/>;

199
tests/baselines/reference/tsxStatelessFunctionComponentOverload1.symbols
View File

@ -3,173 +3,188 @@ import React = require('react')
>React : Symbol(React, Decl(file.tsx, 0, 0))
declare function OneThing(k: {yxx: string}): JSX.Element;
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
>k : Symbol(k, Decl(file.tsx, 2, 26))
>yxx : Symbol(yxx, Decl(file.tsx, 2, 30))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
declare function OneThing(k: {yxx1: string, children: string}): JSX.Element;
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
>k : Symbol(k, Decl(file.tsx, 3, 26))
>yxx1 : Symbol(yxx1, Decl(file.tsx, 3, 30))
>children : Symbol(children, Decl(file.tsx, 3, 43))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
>l : Symbol(l, Decl(file.tsx, 3, 26))
>yy : Symbol(yy, Decl(file.tsx, 3, 30))
>yy1 : Symbol(yy1, Decl(file.tsx, 3, 41))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
>l : Symbol(l, Decl(file.tsx, 4, 26))
>yy : Symbol(yy, Decl(file.tsx, 4, 30))
>yy1 : Symbol(yy1, Decl(file.tsx, 4, 41))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
>l : Symbol(l, Decl(file.tsx, 4, 26))
>yy : Symbol(yy, Decl(file.tsx, 4, 30))
>yy1 : Symbol(yy1, Decl(file.tsx, 4, 41))
>yy2 : Symbol(yy2, Decl(file.tsx, 4, 54))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
>l : Symbol(l, Decl(file.tsx, 5, 26))
>yy : Symbol(yy, Decl(file.tsx, 5, 30))
>yy1 : Symbol(yy1, Decl(file.tsx, 5, 41))
>yy2 : Symbol(yy2, Decl(file.tsx, 5, 54))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
>l1 : Symbol(l1, Decl(file.tsx, 5, 26))
>data : Symbol(data, Decl(file.tsx, 5, 31))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
>l1 : Symbol(l1, Decl(file.tsx, 6, 26))
>data : Symbol(data, Decl(file.tsx, 6, 31))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
// OK
const c1 = <OneThing yxx='ok' />
>c1 : Symbol(c1, Decl(file.tsx, 8, 5))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
>yxx : Symbol(yxx, Decl(file.tsx, 8, 20))
>c1 : Symbol(c1, Decl(file.tsx, 9, 5))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
>yxx : Symbol(yxx, Decl(file.tsx, 9, 20))
const c2 = <OneThing yy={100} yy1="hello"/>
>c2 : Symbol(c2, Decl(file.tsx, 9, 5))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
>yy : Symbol(yy, Decl(file.tsx, 9, 20))
>yy1 : Symbol(yy1, Decl(file.tsx, 9, 29))
>c2 : Symbol(c2, Decl(file.tsx, 10, 5))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
>yy : Symbol(yy, Decl(file.tsx, 10, 20))
>yy1 : Symbol(yy1, Decl(file.tsx, 10, 29))
const c3 = <OneThing yxx="hello" ignore-prop />
>c3 : Symbol(c3, Decl(file.tsx, 10, 5))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
>yxx : Symbol(yxx, Decl(file.tsx, 10, 20))
>ignore-prop : Symbol(ignore-prop, Decl(file.tsx, 10, 32))
>c3 : Symbol(c3, Decl(file.tsx, 11, 5))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
>yxx : Symbol(yxx, Decl(file.tsx, 11, 20))
>ignore-prop : Symbol(ignore-prop, Decl(file.tsx, 11, 32))
const c4 = <OneThing data="hello" data-prop />
>c4 : Symbol(c4, Decl(file.tsx, 11, 5))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 69), Decl(file.tsx, 4, 83))
>data : Symbol(data, Decl(file.tsx, 11, 20))
>data-prop : Symbol(data-prop, Decl(file.tsx, 11, 33))
>c4 : Symbol(c4, Decl(file.tsx, 12, 5))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
>data : Symbol(data, Decl(file.tsx, 12, 20))
>data-prop : Symbol(data-prop, Decl(file.tsx, 12, 33))
const c5 = <OneThing yxx1='ok'>Hello</OneThing>
>c5 : Symbol(c5, Decl(file.tsx, 13, 5))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
>yxx1 : Symbol(yxx1, Decl(file.tsx, 13, 20))
>OneThing : Symbol(OneThing, Decl(file.tsx, 0, 31), Decl(file.tsx, 2, 57), Decl(file.tsx, 3, 76), Decl(file.tsx, 4, 69), Decl(file.tsx, 5, 83))
declare function TestingOneThing({y1: string}): JSX.Element;
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
>y1 : Symbol(y1)
>string : Symbol(string, Decl(file.tsx, 13, 34))
>string : Symbol(string, Decl(file.tsx, 16, 34))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
declare function TestingOneThing(j: {"extra-data": string, yy?: string}): JSX.Element;
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
>j : Symbol(j, Decl(file.tsx, 14, 33))
>yy : Symbol(yy, Decl(file.tsx, 14, 58))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
>j : Symbol(j, Decl(file.tsx, 17, 33))
>yy : Symbol(yy, Decl(file.tsx, 17, 58))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
declare function TestingOneThing(n: {yy: number, direction?: number}): JSX.Element;
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
>n : Symbol(n, Decl(file.tsx, 15, 33))
>yy : Symbol(yy, Decl(file.tsx, 15, 37))
>direction : Symbol(direction, Decl(file.tsx, 15, 48))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
>n : Symbol(n, Decl(file.tsx, 18, 33))
>yy : Symbol(yy, Decl(file.tsx, 18, 37))
>direction : Symbol(direction, Decl(file.tsx, 18, 48))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
declare function TestingOneThing(n: {yy: string, name: string}): JSX.Element;
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
>n : Symbol(n, Decl(file.tsx, 16, 33))
>yy : Symbol(yy, Decl(file.tsx, 16, 37))
>name : Symbol(name, Decl(file.tsx, 16, 48))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
>n : Symbol(n, Decl(file.tsx, 19, 33))
>yy : Symbol(yy, Decl(file.tsx, 19, 37))
>name : Symbol(name, Decl(file.tsx, 19, 48))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
// OK
const d1 = <TestingOneThing y1 extra-data />;
>d1 : Symbol(d1, Decl(file.tsx, 19, 5))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
>y1 : Symbol(y1, Decl(file.tsx, 19, 27))
>extra-data : Symbol(extra-data, Decl(file.tsx, 19, 30))
>d1 : Symbol(d1, Decl(file.tsx, 22, 5))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
>y1 : Symbol(y1, Decl(file.tsx, 22, 27))
>extra-data : Symbol(extra-data, Decl(file.tsx, 22, 30))
const d2 = <TestingOneThing extra-data="hello" />;
>d2 : Symbol(d2, Decl(file.tsx, 20, 5))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
>extra-data : Symbol(extra-data, Decl(file.tsx, 20, 27))
>d2 : Symbol(d2, Decl(file.tsx, 23, 5))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
>extra-data : Symbol(extra-data, Decl(file.tsx, 23, 27))
const d3 = <TestingOneThing extra-data="hello" yy="hihi" />;
>d3 : Symbol(d3, Decl(file.tsx, 21, 5))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
>extra-data : Symbol(extra-data, Decl(file.tsx, 21, 27))
>yy : Symbol(yy, Decl(file.tsx, 21, 46))
>d3 : Symbol(d3, Decl(file.tsx, 24, 5))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
>extra-data : Symbol(extra-data, Decl(file.tsx, 24, 27))
>yy : Symbol(yy, Decl(file.tsx, 24, 46))
const d4 = <TestingOneThing extra-data="hello" yy={9} direction={10} />;
>d4 : Symbol(d4, Decl(file.tsx, 22, 5))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
>extra-data : Symbol(extra-data, Decl(file.tsx, 22, 27))
>yy : Symbol(yy, Decl(file.tsx, 22, 46))
>direction : Symbol(direction, Decl(file.tsx, 22, 53))
>d4 : Symbol(d4, Decl(file.tsx, 25, 5))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
>extra-data : Symbol(extra-data, Decl(file.tsx, 25, 27))
>yy : Symbol(yy, Decl(file.tsx, 25, 46))
>direction : Symbol(direction, Decl(file.tsx, 25, 53))
const d5 = <TestingOneThing extra-data="hello" yy="hello" name="Bob" />;
>d5 : Symbol(d5, Decl(file.tsx, 23, 5))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 11, 46), Decl(file.tsx, 13, 60), Decl(file.tsx, 14, 86), Decl(file.tsx, 15, 83))
>extra-data : Symbol(extra-data, Decl(file.tsx, 23, 27))
>yy : Symbol(yy, Decl(file.tsx, 23, 46))
>name : Symbol(name, Decl(file.tsx, 23, 57))
>d5 : Symbol(d5, Decl(file.tsx, 26, 5))
>TestingOneThing : Symbol(TestingOneThing, Decl(file.tsx, 13, 47), Decl(file.tsx, 16, 60), Decl(file.tsx, 17, 86), Decl(file.tsx, 18, 83))
>extra-data : Symbol(extra-data, Decl(file.tsx, 26, 27))
>yy : Symbol(yy, Decl(file.tsx, 26, 46))
>name : Symbol(name, Decl(file.tsx, 26, 57))
declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
>a : Symbol(a, Decl(file.tsx, 26, 33))
>y1 : Symbol(y1, Decl(file.tsx, 26, 37))
>y2 : Symbol(y2, Decl(file.tsx, 26, 49))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
>a : Symbol(a, Decl(file.tsx, 29, 33))
>y1 : Symbol(y1, Decl(file.tsx, 29, 37))
>y2 : Symbol(y2, Decl(file.tsx, 29, 49))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
>a : Symbol(a, Decl(file.tsx, 27, 33))
>y1 : Symbol(y1, Decl(file.tsx, 27, 37))
>y2 : Symbol(y2, Decl(file.tsx, 27, 49))
>y3 : Symbol(y3, Decl(file.tsx, 27, 62))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
>a : Symbol(a, Decl(file.tsx, 30, 33))
>y1 : Symbol(y1, Decl(file.tsx, 30, 37))
>y2 : Symbol(y2, Decl(file.tsx, 30, 49))
>y3 : Symbol(y3, Decl(file.tsx, 30, 62))
>JSX : Symbol(JSX, Decl(react.d.ts, 2352, 1))
>Element : Symbol(JSX.Element, Decl(react.d.ts, 2355, 27))
// OK
const e1 = <TestingOptional />
>e1 : Symbol(e1, Decl(file.tsx, 30, 5))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
>e1 : Symbol(e1, Decl(file.tsx, 33, 5))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
const e2 = <TestingOptional extra-prop/>
>e2 : Symbol(e2, Decl(file.tsx, 31, 5))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
>extra-prop : Symbol(extra-prop, Decl(file.tsx, 31, 27))
>e2 : Symbol(e2, Decl(file.tsx, 34, 5))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
>extra-prop : Symbol(extra-prop, Decl(file.tsx, 34, 27))
const e3 = <TestingOptional y1="hello"/>
>e3 : Symbol(e3, Decl(file.tsx, 32, 5))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
>y1 : Symbol(y1, Decl(file.tsx, 32, 27))
>e3 : Symbol(e3, Decl(file.tsx, 35, 5))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
>y1 : Symbol(y1, Decl(file.tsx, 35, 27))
const e4 = <TestingOptional y1="hello" y2={1000} />
>e4 : Symbol(e4, Decl(file.tsx, 33, 5))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
>y1 : Symbol(y1, Decl(file.tsx, 33, 27))
>y2 : Symbol(y2, Decl(file.tsx, 33, 38))
>e4 : Symbol(e4, Decl(file.tsx, 36, 5))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
>y1 : Symbol(y1, Decl(file.tsx, 36, 27))
>y2 : Symbol(y2, Decl(file.tsx, 36, 38))
const e5 = <TestingOptional y1 y3/>
>e5 : Symbol(e5, Decl(file.tsx, 34, 5))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
>y1 : Symbol(y1, Decl(file.tsx, 34, 27))
>y3 : Symbol(y3, Decl(file.tsx, 34, 30))
>e5 : Symbol(e5, Decl(file.tsx, 37, 5))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
>y1 : Symbol(y1, Decl(file.tsx, 37, 27))
>y3 : Symbol(y3, Decl(file.tsx, 37, 30))
const e6 = <TestingOptional y1 y3 y2={10} />
>e6 : Symbol(e6, Decl(file.tsx, 35, 5))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 23, 72), Decl(file.tsx, 26, 77))
>y1 : Symbol(y1, Decl(file.tsx, 35, 27))
>y3 : Symbol(y3, Decl(file.tsx, 35, 30))
>y2 : Symbol(y2, Decl(file.tsx, 35, 33))
>e6 : Symbol(e6, Decl(file.tsx, 38, 5))
>TestingOptional : Symbol(TestingOptional, Decl(file.tsx, 26, 72), Decl(file.tsx, 29, 77))
>y1 : Symbol(y1, Decl(file.tsx, 38, 27))
>y3 : Symbol(y3, Decl(file.tsx, 38, 30))
>y2 : Symbol(y2, Decl(file.tsx, 38, 33))

32
tests/baselines/reference/tsxStatelessFunctionComponentOverload1.types
View File

@ -3,14 +3,22 @@ import React = require('react')
>React : typeof React
declare function OneThing(k: {yxx: string}): JSX.Element;
>OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>k : { yxx: string; }
>yxx : string
>JSX : any
>Element : JSX.Element
declare function OneThing(k: {yxx1: string, children: string}): JSX.Element;
>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>k : { yxx1: string; children: string; }
>yxx1 : string
>children : string
>JSX : any
>Element : JSX.Element
declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
>OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>l : { yy: number; yy1: string; }
>yy : number
>yy1 : string
@ -18,7 +26,7 @@ declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
>Element : JSX.Element
declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
>OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>l : { yy: number; yy1: string; yy2: boolean; }
>yy : number
>yy1 : string
@ -27,7 +35,7 @@ declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Eleme
>Element : JSX.Element
declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
>OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>l1 : { data: string; "data-prop": boolean; }
>data : string
>JSX : any
@ -37,13 +45,13 @@ declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element
const c1 = <OneThing yxx='ok' />
>c1 : JSX.Element
><OneThing yxx='ok' /> : JSX.Element
>OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>yxx : string
const c2 = <OneThing yy={100} yy1="hello"/>
>c2 : JSX.Element
><OneThing yy={100} yy1="hello"/> : JSX.Element
>OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>yy : number
>100 : 100
>yy1 : string
@ -51,17 +59,25 @@ const c2 = <OneThing yy={100} yy1="hello"/>
const c3 = <OneThing yxx="hello" ignore-prop />
>c3 : JSX.Element
><OneThing yxx="hello" ignore-prop /> : JSX.Element
>OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>yxx : string
>ignore-prop : true
const c4 = <OneThing data="hello" data-prop />
>c4 : JSX.Element
><OneThing data="hello" data-prop /> : JSX.Element
>OneThing : { (k: { yxx: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>data : string
>data-prop : true
const c5 = <OneThing yxx1='ok'>Hello</OneThing>
>c5 : JSX.Element
><OneThing yxx1='ok'>Hello</OneThing> : JSX.Element
>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
>yxx1 : string
>OneThing : { (k: { yxx: string; }): JSX.Element; (k: { yxx1: string; children: string; }): JSX.Element; (l: { yy: number; yy1: string; }): JSX.Element; (l: { yy: number; yy1: string; yy2: boolean; }): JSX.Element; (l1: { data: string; "data-prop": boolean; }): JSX.Element; }
declare function TestingOneThing({y1: string}): JSX.Element;
>TestingOneThing : { ({y1: string}: { y1: any; }): JSX.Element; (j: { "extra-data": string; yy?: string; }): JSX.Element; (n: { yy: number; direction?: number; }): JSX.Element; (n: { yy: string; name: string; }): JSX.Element; }
>y1 : any

19
tests/baselines/reference/tsxStatelessFunctionComponentOverload4.errors.txt
View File

@ -22,17 +22,21 @@ tests/cases/conformance/jsx/file.tsx(26,29): error TS2322: Type '{ yy: "hello";
Type '{ yy: "hello"; direction: "left"; }' is not assignable to type '{ yy: string; direction?: number; }'.
Types of property 'direction' are incompatible.
Type '"left"' is not assignable to type 'number'.
tests/cases/conformance/jsx/file.tsx(32,29): error TS2322: Type '{ y1: true; y3: "hello"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
tests/cases/conformance/jsx/file.tsx(33,29): error TS2322: Type '{ y1: true; y3: "hello"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
Type '{ y1: true; y3: "hello"; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
Types of property 'y3' are incompatible.
Type '"hello"' is not assignable to type 'boolean'.
tests/cases/conformance/jsx/file.tsx(33,29): error TS2322: Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
tests/cases/conformance/jsx/file.tsx(34,29): error TS2322: Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
Types of property 'y1' are incompatible.
Type '"hello"' is not assignable to type 'boolean'.
tests/cases/conformance/jsx/file.tsx(35,29): error TS2322: Type '{ y1: "hello"; y2: 1000; children: "hi"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
tests/cases/conformance/jsx/file.tsx(36,29): error TS2322: Type '{ y1: "hello"; y2: 1000; children: string; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
==== tests/cases/conformance/jsx/file.tsx (10 errors) ====
==== tests/cases/conformance/jsx/file.tsx (12 errors) ====
import React = require('react')
declare function OneThing(): JSX.Element;
declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
@ -93,6 +97,7 @@ tests/cases/conformance/jsx/file.tsx(33,29): error TS2322: Type '{ y1: "hello";
!!! error TS2322: Type '"left"' is not assignable to type 'number'.
declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
declare function TestingOptional(a: {y1?: string, y2?: number, children: JSX.Element}): JSX.Element;
declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
// Error
@ -108,4 +113,12 @@ tests/cases/conformance/jsx/file.tsx(33,29): error TS2322: Type '{ y1: "hello";
!!! error TS2322: Type '{ y1: "hello"; y2: 1000; y3: true; }' is not assignable to type '{ y1: boolean; y2?: number; y3: boolean; }'.
!!! error TS2322: Types of property 'y1' are incompatible.
!!! error TS2322: Type '"hello"' is not assignable to type 'boolean'.
const e3 = <TestingOptional y1="hello" y2={1000} children="hi" />
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
!!! error TS2322: Type '{ y1: "hello"; y2: 1000; children: "hi"; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
!!! error TS2322: Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
const e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>
~~~~~~~~~~~~~~~~~~~~
!!! error TS2322: Type '{ y1: "hello"; y2: 1000; children: string; }' is not assignable to type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.
!!! error TS2322: Property 'children' does not exist on type 'IntrinsicAttributes & { y1: boolean; y2?: number; y3: boolean; }'.

5
tests/baselines/reference/tsxStatelessFunctionComponentOverload4.js
View File

@ -27,11 +27,14 @@ const d1 = <TestingOneThing extra-data />
const d2 = <TestingOneThing yy="hello" direction="left" />
declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
declare function TestingOptional(a: {y1?: string, y2?: number, children: JSX.Element}): JSX.Element;
declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
// Error
const e1 = <TestingOptional y1 y3="hello"/>
const e2 = <TestingOptional y1="hello" y2={1000} y3 />
const e3 = <TestingOptional y1="hello" y2={1000} children="hi" />
const e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>
//// [file.jsx]
@ -58,4 +61,6 @@ define(["require", "exports", "react"], function (require, exports, React) {
// Error
var e1 = <TestingOptional y1 y3="hello"/>;
var e2 = <TestingOptional y1="hello" y2={1000} y3/>;
var e3 = <TestingOptional y1="hello" y2={1000} children="hi"/>;
var e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>;
});

8
tests/baselines/reference/tsxStatelessFunctionComponentOverload5.errors.txt
View File

@ -1,6 +1,6 @@
tests/cases/conformance/jsx/file.tsx(48,24): error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
tests/cases/conformance/jsx/file.tsx(48,24): error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
tests/cases/conformance/jsx/file.tsx(49,24): error TS2322: Type '{ to: string; onClick: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
tests/cases/conformance/jsx/file.tsx(49,24): error TS2322: Type '{ to: string; onClick: (e: any) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
tests/cases/conformance/jsx/file.tsx(50,24): error TS2322: Type '{ onClick: () => void; to: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
Property 'onClick' does not exist on type 'IntrinsicAttributes & HyphenProps'.
@ -68,11 +68,11 @@ tests/cases/conformance/jsx/file.tsx(56,24): error TS2322: Type '{ data-format:
// Error
const b0 = <MainButton to='/some/path' onClick={(e)=>{}}>GO</MainButton>; // extra property;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
!!! error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
!!! error TS2322: Type '{ to: "/some/path"; onClick: (e: MouseEvent<any>) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
!!! error TS2322: Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
const b1 = <MainButton onClick={(e: any)=> {}} {...obj0}>Hello world</MainButton>; // extra property;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
!!! error TS2322: Type '{ to: string; onClick: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
!!! error TS2322: Type '{ to: string; onClick: (e: any) => void; children: string; }' is not assignable to type 'IntrinsicAttributes & HyphenProps'.
!!! error TS2322: Property 'to' does not exist on type 'IntrinsicAttributes & HyphenProps'.
const b2 = <MainButton {...{to: "10000"}} {...obj2} />; // extra property
~~~~~~~~~~~~~~~~~~~~~~~~~~~~

4
tests/baselines/reference/tsxStatelessFunctionComponentOverload6.js
View File

@ -50,7 +50,7 @@ const b6 = <MainButton {...obj2} />;
const b7 = <MainButton {...{onClick: () => { console.log("hi") }}} />;
const b8 = <MainButton {...{onClick() {}}} />; // OK; method declaration get retained (See GitHub #13365)
const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
const b11 = <MainButton onClick={(e) => {}} className="hello" data-format>Hello world</MainButton>;
const b12 = <MainButton data-format="Hello world" />
@ -88,7 +88,7 @@ define(["require", "exports", "react"], function (require, exports, React) {
var b7 = <MainButton {...{ onClick: function () { console.log("hi"); } }}/>;
var b8 = <MainButton {...{ onClick: function () { } }}/>; // OK; method declaration get retained (See GitHub #13365)
var b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
var b10 = <MainButton to='/some/path' children="hi">GO</MainButton>;
var b10 = <MainButton to='/some/path' children="hi"></MainButton>;
var b11 = <MainButton onClick={function (e) { }} className="hello" data-format>Hello world</MainButton>;
var b12 = <MainButton data-format="Hello world"/>;
});

2
tests/baselines/reference/tsxStatelessFunctionComponentOverload6.symbols
View File

@ -165,7 +165,7 @@ const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
>extra-prop : Symbol(extra-prop, Decl(file.tsx, 50, 38))
>MainButton : Symbol(MainButton, Decl(file.tsx, 26, 1), Decl(file.tsx, 28, 66), Decl(file.tsx, 29, 62), Decl(file.tsx, 30, 66))
const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
>b10 : Symbol(b10, Decl(file.tsx, 51, 5))
>MainButton : Symbol(MainButton, Decl(file.tsx, 26, 1), Decl(file.tsx, 28, 66), Decl(file.tsx, 29, 62), Decl(file.tsx, 30, 66))
>to : Symbol(to, Decl(file.tsx, 51, 23))

4
tests/baselines/reference/tsxStatelessFunctionComponentOverload6.types
View File

@ -197,9 +197,9 @@ const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
>extra-prop : true
>MainButton : { (buttonProps: ButtonProps): JSX.Element; (linkProps: LinkProps): JSX.Element; (hyphenProps: HyphenProps): JSX.Element; }
const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
>b10 : JSX.Element
><MainButton to='/some/path' children="hi" >GO</MainButton> : JSX.Element
><MainButton to='/some/path' children="hi" ></MainButton> : JSX.Element
>MainButton : { (buttonProps: ButtonProps): JSX.Element; (linkProps: LinkProps): JSX.Element; (hyphenProps: HyphenProps): JSX.Element; }
>to : string
>children : string

14
tests/baselines/reference/tsxStatelessFunctionComponents3.symbols
View File

@ -5,7 +5,7 @@ import React = require('react');
const Foo = (props: any) => <div/>;
>Foo : Symbol(Foo, Decl(file.tsx, 2, 5))
>props : Symbol(props, Decl(file.tsx, 2, 13))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
// Should be OK
const foo = <Foo />;
@ -19,14 +19,14 @@ var MainMenu: React.StatelessComponent<{}> = (props) => (<div>
>React : Symbol(React, Decl(file.tsx, 0, 0))
>StatelessComponent : Symbol(React.StatelessComponent, Decl(react.d.ts, 197, 40))
>props : Symbol(props, Decl(file.tsx, 8, 46))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
<h3>Main Menu</h3>
>h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2409, 48))
>h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2409, 48))
>h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2411, 48))
>h3 : Symbol(JSX.IntrinsicElements.h3, Decl(react.d.ts, 2411, 48))
</div>);
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
var App: React.StatelessComponent<{ children }> = ({children}) => (
>App : Symbol(App, Decl(file.tsx, 12, 3))
@ -36,12 +36,12 @@ var App: React.StatelessComponent<{ children }> = ({children}) => (
>children : Symbol(children, Decl(file.tsx, 12, 52))
<div >
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
<MainMenu/>
>MainMenu : Symbol(MainMenu, Decl(file.tsx, 8, 3))
</div>
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
);

8
tests/baselines/reference/tsxUnionElementType1.symbols
View File

@ -8,8 +8,8 @@ function SFC1(prop: { x: number }) {
>x : Symbol(x, Decl(file.tsx, 2, 21))
return <div>hello</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
};
@ -19,8 +19,8 @@ function SFC2(prop: { x: boolean }) {
>x : Symbol(x, Decl(file.tsx, 6, 21))
return <h1>World </h1>;
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
}
var SFCComp = SFC1 || SFC2;

12
tests/baselines/reference/tsxUnionElementType5.symbols
View File

@ -6,16 +6,16 @@ function EmptySFC1() {
>EmptySFC1 : Symbol(EmptySFC1, Decl(file.tsx, 0, 32))
return <div>hello</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
function EmptySFC2() {
>EmptySFC2 : Symbol(EmptySFC2, Decl(file.tsx, 4, 1))
return <div>Hello</div>;
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2397, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
>div : Symbol(JSX.IntrinsicElements.div, Decl(react.d.ts, 2399, 45))
}
function SFC2(prop: { x: boolean }) {
@ -24,8 +24,8 @@ function SFC2(prop: { x: boolean }) {
>x : Symbol(x, Decl(file.tsx, 10, 21))
return <h1>World</h1>;
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2407, 47))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
>h1 : Symbol(JSX.IntrinsicElements.h1, Decl(react.d.ts, 2409, 47))
}
var EmptySFCComp = EmptySFC1 || EmptySFC2;

4
tests/baselines/reference/tsxUnionTypeComponent1.symbols
View File

@ -38,8 +38,8 @@ class MyComponent extends React.Component<ComponentProps, {}> {
<MyComponent AnyComponent={() => <button>test</button>}/>
>MyComponent : Symbol(MyComponent, Decl(file.tsx, 4, 1))
>AnyComponent : Symbol(AnyComponent, Decl(file.tsx, 14, 12))
>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2383, 43))
>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2383, 43))
>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2385, 43))
>button : Symbol(JSX.IntrinsicElements.button, Decl(react.d.ts, 2385, 43))
// Component Class as Props
class MyButtonComponent extends React.Component<{},{}> {

27
tests/cases/conformance/jsx/checkJsxChildrenProperty1.tsx Normal file
View File

@ -0,0 +1,27 @@
// @filename: file.tsx
// @jsx: preserve
// @noLib: true
// @libFiles: react.d.ts,lib.d.ts
import React = require('react');
interface Prop {
a: number,
b: string,
children: string | JSX.Element
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// OK
let k = <Comp a={10} b="hi" children ="lol" />;
let k1 =
<Comp a={10} b="hi">
hi hi hi!
</Comp>;
let k2 =
<Comp a={10} b="hi">
<div>hi hi hi!</div>
</Comp>;

24
tests/cases/conformance/jsx/checkJsxChildrenProperty10.tsx Normal file
View File

@ -0,0 +1,24 @@
//@filename: file.tsx
//@jsx: preserve
declare module JSX {
interface Element { }
interface ElementAttributesProperty { props: {} }
interface IntrinsicElements {
div: any;
h2: any;
h1: any;
}
}
class Button {
props: {}
render() {
return (<div>My Button</div>)
}
}
// OK
let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
let k3 = <div> {1} {"That is a number"} </div>;
let k4 = <Button> <h2> Hello </h2> </Button>;

25
tests/cases/conformance/jsx/checkJsxChildrenProperty11.tsx Normal file
View File

@ -0,0 +1,25 @@
//@filename: file.tsx
//@jsx: preserve
//@noImplicitAny: true
declare module JSX {
interface Element { }
interface ElementAttributesProperty { props: {} }
interface IntrinsicElements {
div: any;
h2: any;
h1: any;
}
}
class Button {
props: {}
render() {
return (<div>My Button</div>)
}
}
// OK
let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
let k3 = <div> {1} {"That is a number"} </div>;
let k4 = <Button> <h2> Hello </h2> </Button>;

57
tests/cases/conformance/jsx/checkJsxChildrenProperty2.tsx Normal file
View File

@ -0,0 +1,57 @@
// @filename: file.tsx
// @jsx: preserve
// @noLib: true
// @libFiles: react.d.ts,lib.d.ts
import React = require('react');
interface Prop {
a: number,
b: string,
children: string | JSX.Element
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// Error: missing children
let k = <Comp a={10} b="hi" />;
let k0 =
<Comp a={10} b="hi" children="Random" >
hi hi hi!
</Comp>;
let o = {
children:"Random"
}
let k1 =
<Comp a={10} b="hi" {...o} >
hi hi hi!
</Comp>;
// Error: incorrect type
let k2 =
<Comp a={10} b="hi">
<div> My Div </div>
{(name: string) => <div> My name {name} </div>}
</Comp>;
let k3 =
<Comp a={10} b="hi">
<div> My Div </div>
{1000000}
</Comp>;
let k4 =
<Comp a={10} b="hi" >
<div> My Div </div>
hi hi hi!
</Comp>;
let k5 =
<Comp a={10} b="hi" >
<div> My Div </div>
<div> My Div </div>
</Comp>;

44
tests/cases/conformance/jsx/checkJsxChildrenProperty3.tsx Normal file
View File

@ -0,0 +1,44 @@
// @filename: file.tsx
// @jsx: preserve
// @noLib: true
// @libFiles: react.d.ts,lib.d.ts
import React = require('react');
interface IUser {
Name: string;
}
interface IFetchUserProps {
children: (user: IUser) => JSX.Element;
}
class FetchUser extends React.Component<IFetchUserProps, any> {
render() {
return this.state
? this.props.children(this.state.result)
: null;
}
}
// Ok
function UserName0() {
return (
<FetchUser>
{ user => (
<h1>{ user.Name }</h1>
) }
</FetchUser>
);
}
function UserName1() {
return (
<FetchUser>
{ user => (
<h1>{ user.Name }</h1>
) }
</FetchUser>
);
}

49
tests/cases/conformance/jsx/checkJsxChildrenProperty4.tsx Normal file
View File

@ -0,0 +1,49 @@
// @filename: file.tsx
// @jsx: preserve
// @noLib: true
// @libFiles: react.d.ts,lib.d.ts
import React = require('react');
interface IUser {
Name: string;
}
interface IFetchUserProps {
children: (user: IUser) => JSX.Element;
}
class FetchUser extends React.Component<IFetchUserProps, any> {
render() {
return this.state
? this.props.children(this.state.result)
: null;
}
}
// Error
function UserName() {
return (
<FetchUser>
{ user => (
<h1>{ user.NAme }</h1>
) }
</FetchUser>
);
}
function UserName1() {
return (
<FetchUser>
{ user => (
<h1>{ user.Name }</h1>
) }
{ user => (
<h1>{ user.Name }</h1>
) }
</FetchUser>
);
}

35
tests/cases/conformance/jsx/checkJsxChildrenProperty5.tsx Normal file
View File

@ -0,0 +1,35 @@
// @filename: file.tsx
// @jsx: preserve
// @noLib: true
// @libFiles: react.d.ts,lib.d.ts
import React = require('react');
interface Prop {
a: number,
b: string,
children: Button;
}
class Button extends React.Component<any, any> {
render() {
return (<div>My Button</div>)
}
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// Error: no children specified
let k = <Comp a={10} b="hi" />;
// Error: JSX.element is not the same as JSX.ElementClass
let k1 =
<Comp a={10} b="hi">
<Button />
</Comp>;
let k2 =
<Comp a={10} b="hi">
{Button}
</Comp>;

48
tests/cases/conformance/jsx/checkJsxChildrenProperty6.tsx Normal file
View File

@ -0,0 +1,48 @@
// @filename: file.tsx
// @jsx: preserve
// @noLib: true
// @libFiles: react.d.ts,lib.d.ts
import React = require('react');
interface Prop {
a: number,
b: string,
children: JSX.Element | JSX.Element[];
}
class Button extends React.Component<any, any> {
render() {
return (<div>My Button</div>)
}
}
function AnotherButton(p: any) {
return <h1>Just Another Button</h1>;
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// Ok
let k1 =
<Comp a={10} b="hi">
<Button />
<AnotherButton />
</Comp>;
let k2 =
<Comp a={10} b="hi">
<Button />
<AnotherButton />
</Comp>;
let k3 = <Comp a={10} b="hi"><Button />
<AnotherButton />
</Comp>;
let k4 = <Comp a={10} b="hi"><Button /></Comp>;

33
tests/cases/conformance/jsx/checkJsxChildrenProperty7.tsx Normal file
View File

@ -0,0 +1,33 @@
// @filename: file.tsx
// @jsx: preserve
// @noLib: true
// @libFiles: react.d.ts,lib.d.ts
import React = require('react');
interface Prop {
a: number,
b: string,
children: JSX.Element | JSX.Element[];
}
class Button extends React.Component<any, any> {
render() {
return (<div>My Button</div>)
}
}
function AnotherButton(p: any) {
return <h1>Just Another Button</h1>;
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// Error: whitespaces matters
let k1 = <Comp a={10} b="hi"><Button /> <AnotherButton /></Comp>;
let k2 = <Comp a={10} b="hi"><Button />
<AnotherButton /> </Comp>;
let k3 = <Comp a={10} b="hi"> <Button />
<AnotherButton /></Comp>;

34
tests/cases/conformance/jsx/checkJsxChildrenProperty8.tsx Normal file
View File

@ -0,0 +1,34 @@
// @filename: file.tsx
// @jsx: preserve
// @noLib: true
// @libFiles: react.d.ts,lib.d.ts
import React = require('react');
interface Prop {
a: number,
b: string,
children: string | JSX.Element | (string | JSX.Element)[];
}
class Button extends React.Component<any, any> {
render() {
return (<div>My Button</div>)
}
}
function AnotherButton(p: any) {
return <h1>Just Another Button</h1>;
}
function Comp(p: Prop) {
return <div>{p.b}</div>;
}
// OK
let k1 = <Comp a={10} b="hi"><Button /> <AnotherButton /></Comp>;
let k2 = <Comp a={10} b="hi"><Button />
<AnotherButton /> </Comp>;
let k3 = <Comp a={10} b="hi"> <Button />
<AnotherButton /></Comp>;
let k4 = <Comp a={10} b="hi"><Button /> </Comp>;

11
tests/cases/conformance/jsx/checkJsxChildrenProperty9.tsx Normal file
View File

@ -0,0 +1,11 @@
// @filename: file.tsx
// @jsx: preserve
// @noLib: true
// @libFiles: react.d.ts,lib.d.ts
import React = require('react');
// OK
let k1 = <div> <h2> Hello </h2> <h1> world </h1></div>;
let k2 = <div> <h2> Hello </h2> {(user: any) => <h2>{user.name}</h2>}</div>;
let k3 = <div> {1} {"That is a number"} </div>;

3
tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload1.tsx
View File

@ -7,6 +7,7 @@
import React = require('react')
declare function OneThing(k: {yxx: string}): JSX.Element;
declare function OneThing(k: {yxx1: string, children: string}): JSX.Element;
declare function OneThing(l: {yy: number, yy1: string}): JSX.Element;
declare function OneThing(l: {yy: number, yy1: string, yy2: boolean}): JSX.Element;
declare function OneThing(l1: {data: string, "data-prop": boolean}): JSX.Element;
@ -16,6 +17,8 @@ const c1 = <OneThing yxx='ok' />
const c2 = <OneThing yy={100} yy1="hello"/>
const c3 = <OneThing yxx="hello" ignore-prop />
const c4 = <OneThing data="hello" data-prop />
const c5 = <OneThing yxx1='ok'>Hello</OneThing>
declare function TestingOneThing({y1: string}): JSX.Element;
declare function TestingOneThing(j: {"extra-data": string, yy?: string}): JSX.Element;

3
tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload4.tsx
View File

@ -32,8 +32,11 @@ const d1 = <TestingOneThing extra-data />
const d2 = <TestingOneThing yy="hello" direction="left" />
declare function TestingOptional(a: {y1?: string, y2?: number}): JSX.Element;
declare function TestingOptional(a: {y1?: string, y2?: number, children: JSX.Element}): JSX.Element;
declare function TestingOptional(a: {y1: boolean, y2?: number, y3: boolean}): JSX.Element;
// Error
const e1 = <TestingOptional y1 y3="hello"/>
const e2 = <TestingOptional y1="hello" y2={1000} y3 />
const e3 = <TestingOptional y1="hello" y2={1000} children="hi" />
const e4 = <TestingOptional y1="hello" y2={1000}>Hi</TestingOptional>

2
tests/cases/conformance/jsx/tsxStatelessFunctionComponentOverload6.tsx
View File

@ -55,7 +55,7 @@ const b6 = <MainButton {...obj2} />;
const b7 = <MainButton {...{onClick: () => { console.log("hi") }}} />;
const b8 = <MainButton {...{onClick() {}}} />; // OK; method declaration get retained (See GitHub #13365)
const b9 = <MainButton to='/some/path' extra-prop>GO</MainButton>;
const b10 = <MainButton to='/some/path' children="hi" >GO</MainButton>;
const b10 = <MainButton to='/some/path' children="hi" ></MainButton>;
const b11 = <MainButton onClick={(e) => {}} className="hello" data-format>Hello world</MainButton>;
const b12 = <MainButton data-format="Hello world" />

30
tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback.ts Normal file
View File

@ -0,0 +1,30 @@
/// <reference path='fourslash.ts' />
//@module: commonjs
//@jsx: preserve
// @Filename: 1.tsx
//// declare module JSX {
//// interface Element { }
//// interface IntrinsicElements {
//// }
//// interface ElementAttributesProperty { props; }
//// }
//// interface IUser {
//// Name: string;
//// }
//// interface IFetchUserProps {
//// children: (user: IUser) => any;
//// }
//// function FetchUser(props: IFetchUserProps) { return undefined; }
//// function UserName() {
//// return (
//// <FetchUser>
//// { user => (
//// <h1>{ user./**/ }</h1>
//// )}
//// </FetchUser>
//// );
//// }
goTo.marker();
verify.completionListIsEmpty();

31
tests/cases/fourslash/tsxCompletionInFunctionExpressionOfChildrenCallback1.ts Normal file
View File

@ -0,0 +1,31 @@
/// <reference path='fourslash.ts' />
//@module: commonjs
//@jsx: preserve
// @Filename: 1.tsx
//// declare module JSX {
//// interface Element { }
//// interface IntrinsicElements {
//// }
//// interface ElementAttributesProperty { props; }
//// interface ElementChildrenAttribute { children; }
//// }
//// interface IUser {
//// Name: string;
//// }
//// interface IFetchUserProps {
//// children: (user: IUser) => any;
//// }
//// function FetchUser(props: IFetchUserProps) { return undefined; }
//// function UserName() {
//// return (
//// <FetchUser>
//// { user => (
//// <h1>{ user./**/ }</h1>
//// )}
//// </FetchUser>
//// );
//// }
goTo.marker();
verify.completionListContains('Name');

4
tests/lib/react.d.ts vendored
View File

@ -2359,7 +2359,9 @@ declare namespace JSX {
interface ElementClass extends React.Component<any, any> {
render(): JSX.Element | null;
}
interface ElementAttributesProperty { props: {}; }
interface ElementAttributesProperty { props; }
interface ElementChildrenAttribute { children; }
interface IntrinsicAttributes extends React.Attributes { }