[{"data":1,"prerenderedAt":1174},["ShallowReactive",2],{"blog-article-/blog/typescript-and-children":3,"blog-surround-/blog/typescript-and-children":1165},{"id":4,"title":5,"body":6,"canonical":1151,"date":1152,"description":12,"extension":1153,"featured":1154,"image":1155,"meta":1156,"navigation":130,"ogImage":1151,"path":1157,"provider":1158,"published":1154,"seo":1159,"stem":1160,"tags":1161,"url":1151,"__hash__":1164},"blog/blog/typescript-and-children.md","TypeScript and Children",{"type":7,"value":8,"toc":1140},"minimark",[9,13,16,19,24,27,204,209,212,352,358,361,561,565,568,665,670,673,797,803,806,959,963,966,1090,1095,1098,1102,1136],[10,11,12],"p",{},"What happens when we pass in children in React? Children is a special prop that allows us to pass in any type of element. It could be a number, a string, a boolean, an array of elements or even another component. So how can we check the types?",[10,14,15],{},"Of course we could define it as any which is basically the same as just not having type checking which defeats the whole purpose of using Typescript.",[10,17,18],{},"There are a couple of types we could choose from:",[20,21,23],"h3",{"id":22},"jsxelement","JSX.Element",[10,25,26],{},"Children must be a single JSX element. Doesn't allow multiple children, or strings etc.",[28,29,34],"pre",{"className":30,"code":31,"language":32,"meta":33,"style":33},"language-js shiki shiki-themes github-light github-dark","interface ButtonProps {\n  children: JSX.Element\n}\nconst Button = ({ children }: ButtonProps) => \u003Cbutton>{children}\u003C/button>\n\nexport function Card() {\n  return (\n    \u003CButton>\n      \u003Cspan>Click me\u003C/span>\n    \u003C/Button>\n  )\n}\n","js","",[35,36,37,54,73,79,125,132,147,156,168,183,193,199],"code",{"__ignoreMap":33},[38,39,42,46,50],"span",{"class":40,"line":41},"line",1,[38,43,45],{"class":44},"szBVR","interface",[38,47,49],{"class":48},"sScJk"," ButtonProps",[38,51,53],{"class":52},"sVt8B"," {\n",[38,55,57,61,64,67,70],{"class":40,"line":56},2,[38,58,60],{"class":59},"s4XuR","  children",[38,62,63],{"class":44},":",[38,65,66],{"class":48}," JSX",[38,68,69],{"class":52},".",[38,71,72],{"class":48},"Element\n",[38,74,76],{"class":40,"line":75},3,[38,77,78],{"class":52},"}\n",[38,80,82,85,88,91,94,97,100,102,104,107,110,113,117,120,122],{"class":40,"line":81},4,[38,83,84],{"class":44},"const",[38,86,87],{"class":48}," Button",[38,89,90],{"class":44}," =",[38,92,93],{"class":52}," ({ ",[38,95,96],{"class":59},"children",[38,98,99],{"class":52}," }",[38,101,63],{"class":44},[38,103,49],{"class":48},[38,105,106],{"class":52},") ",[38,108,109],{"class":44},"=>",[38,111,112],{"class":52}," \u003C",[38,114,116],{"class":115},"s9eBZ","button",[38,118,119],{"class":52},">{children}\u003C/",[38,121,116],{"class":115},[38,123,124],{"class":52},">\n",[38,126,128],{"class":40,"line":127},5,[38,129,131],{"emptyLinePlaceholder":130},true,"\n",[38,133,135,138,141,144],{"class":40,"line":134},6,[38,136,137],{"class":44},"export",[38,139,140],{"class":44}," function",[38,142,143],{"class":48}," Card",[38,145,146],{"class":52},"() {\n",[38,148,150,153],{"class":40,"line":149},7,[38,151,152],{"class":44},"  return",[38,154,155],{"class":52}," (\n",[38,157,159,162,166],{"class":40,"line":158},8,[38,160,161],{"class":52},"    \u003C",[38,163,165],{"class":164},"sj4cs","Button",[38,167,124],{"class":52},[38,169,171,174,176,179,181],{"class":40,"line":170},9,[38,172,173],{"class":52},"      \u003C",[38,175,38],{"class":115},[38,177,178],{"class":52},">Click me\u003C/",[38,180,38],{"class":115},[38,182,124],{"class":52},[38,184,186,189,191],{"class":40,"line":185},10,[38,187,188],{"class":52},"    \u003C/",[38,190,165],{"class":164},[38,192,124],{"class":52},[38,194,196],{"class":40,"line":195},11,[38,197,198],{"class":52},"  )\n",[38,200,202],{"class":40,"line":201},12,[38,203,78],{"class":52},[20,205,23,207],{"id":206},"jsxelement-1",[38,208],{},[10,210,211],{},"Allows multiple JSX elements but no strings, numbers etc",[28,213,215],{"className":30,"code":214,"language":32,"meta":33,"style":33},"interface ButtonProps {\n  children: JSX.Element[]\n}\nconst Button = ({ children }: ButtonProps) => \u003Cbutton>{children}\u003C/button>\n\nexport default function Card() {\n  return (\n    \u003CButton>\n      \u003Cspan>click me\u003C/span>\n      \u003Ci>svg icon\u003C/i>\n    \u003C/Button>\n  )\n}\n",[35,216,217,225,241,245,277,281,294,300,308,321,335,343,347],{"__ignoreMap":33},[38,218,219,221,223],{"class":40,"line":41},[38,220,45],{"class":44},[38,222,49],{"class":48},[38,224,53],{"class":52},[38,226,227,229,231,233,235,238],{"class":40,"line":56},[38,228,60],{"class":59},[38,230,63],{"class":44},[38,232,66],{"class":48},[38,234,69],{"class":52},[38,236,237],{"class":48},"Element",[38,239,240],{"class":52},"[]\n",[38,242,243],{"class":40,"line":75},[38,244,78],{"class":52},[38,246,247,249,251,253,255,257,259,261,263,265,267,269,271,273,275],{"class":40,"line":81},[38,248,84],{"class":44},[38,250,87],{"class":48},[38,252,90],{"class":44},[38,254,93],{"class":52},[38,256,96],{"class":59},[38,258,99],{"class":52},[38,260,63],{"class":44},[38,262,49],{"class":48},[38,264,106],{"class":52},[38,266,109],{"class":44},[38,268,112],{"class":52},[38,270,116],{"class":115},[38,272,119],{"class":52},[38,274,116],{"class":115},[38,276,124],{"class":52},[38,278,279],{"class":40,"line":127},[38,280,131],{"emptyLinePlaceholder":130},[38,282,283,285,288,290,292],{"class":40,"line":134},[38,284,137],{"class":44},[38,286,287],{"class":44}," default",[38,289,140],{"class":44},[38,291,143],{"class":48},[38,293,146],{"class":52},[38,295,296,298],{"class":40,"line":149},[38,297,152],{"class":44},[38,299,155],{"class":52},[38,301,302,304,306],{"class":40,"line":158},[38,303,161],{"class":52},[38,305,165],{"class":164},[38,307,124],{"class":52},[38,309,310,312,314,317,319],{"class":40,"line":170},[38,311,173],{"class":52},[38,313,38],{"class":115},[38,315,316],{"class":52},">click me\u003C/",[38,318,38],{"class":115},[38,320,124],{"class":52},[38,322,323,325,328,331,333],{"class":40,"line":185},[38,324,173],{"class":52},[38,326,327],{"class":115},"i",[38,329,330],{"class":52},">svg icon\u003C/",[38,332,327],{"class":115},[38,334,124],{"class":52},[38,336,337,339,341],{"class":40,"line":195},[38,338,188],{"class":52},[38,340,165],{"class":164},[38,342,124],{"class":52},[38,344,345],{"class":40,"line":201},[38,346,198],{"class":52},[38,348,350],{"class":40,"line":349},13,[38,351,78],{"class":52},[20,353,355,356],{"id":354},"jsxelement-jsxelement","JSX.Element | JSX.Element",[38,357],{},[10,359,360],{},"Allows single or multiple JSX elements but no strings, numbers etc",[28,362,364],{"className":30,"code":363,"language":32,"meta":33,"style":33},"interface ButtonProps {\n  children: JSX.Element | JSX.Element[]\n}\nconst Button = ({ children }: ButtonProps) => \u003Cbutton>{children}\u003C/button>\n\nexport function Card() {\n  return (\n    \u003CButton>\n      \u003Cspan>click me\u003C/span>\n    \u003C/Button>\n  )\n}\nexport function Card2() {\n  return (\n    \u003CButton>\n      \u003Cspan>click me\u003C/span>\n      \u003Ci>svg icon\u003C/i>\n    \u003C/Button>\n  )\n}\n",[35,365,366,374,397,401,433,437,447,453,461,473,481,485,489,500,507,516,529,542,551,556],{"__ignoreMap":33},[38,367,368,370,372],{"class":40,"line":41},[38,369,45],{"class":44},[38,371,49],{"class":48},[38,373,53],{"class":52},[38,375,376,378,380,382,384,386,389,391,393,395],{"class":40,"line":56},[38,377,60],{"class":59},[38,379,63],{"class":44},[38,381,66],{"class":48},[38,383,69],{"class":52},[38,385,237],{"class":48},[38,387,388],{"class":44}," |",[38,390,66],{"class":48},[38,392,69],{"class":52},[38,394,237],{"class":48},[38,396,240],{"class":52},[38,398,399],{"class":40,"line":75},[38,400,78],{"class":52},[38,402,403,405,407,409,411,413,415,417,419,421,423,425,427,429,431],{"class":40,"line":81},[38,404,84],{"class":44},[38,406,87],{"class":48},[38,408,90],{"class":44},[38,410,93],{"class":52},[38,412,96],{"class":59},[38,414,99],{"class":52},[38,416,63],{"class":44},[38,418,49],{"class":48},[38,420,106],{"class":52},[38,422,109],{"class":44},[38,424,112],{"class":52},[38,426,116],{"class":115},[38,428,119],{"class":52},[38,430,116],{"class":115},[38,432,124],{"class":52},[38,434,435],{"class":40,"line":127},[38,436,131],{"emptyLinePlaceholder":130},[38,438,439,441,443,445],{"class":40,"line":134},[38,440,137],{"class":44},[38,442,140],{"class":44},[38,444,143],{"class":48},[38,446,146],{"class":52},[38,448,449,451],{"class":40,"line":149},[38,450,152],{"class":44},[38,452,155],{"class":52},[38,454,455,457,459],{"class":40,"line":158},[38,456,161],{"class":52},[38,458,165],{"class":164},[38,460,124],{"class":52},[38,462,463,465,467,469,471],{"class":40,"line":170},[38,464,173],{"class":52},[38,466,38],{"class":115},[38,468,316],{"class":52},[38,470,38],{"class":115},[38,472,124],{"class":52},[38,474,475,477,479],{"class":40,"line":185},[38,476,188],{"class":52},[38,478,165],{"class":164},[38,480,124],{"class":52},[38,482,483],{"class":40,"line":195},[38,484,198],{"class":52},[38,486,487],{"class":40,"line":201},[38,488,78],{"class":52},[38,490,491,493,495,498],{"class":40,"line":349},[38,492,137],{"class":44},[38,494,140],{"class":44},[38,496,497],{"class":48}," Card2",[38,499,146],{"class":52},[38,501,503,505],{"class":40,"line":502},14,[38,504,152],{"class":44},[38,506,155],{"class":52},[38,508,510,512,514],{"class":40,"line":509},15,[38,511,161],{"class":52},[38,513,165],{"class":164},[38,515,124],{"class":52},[38,517,519,521,523,525,527],{"class":40,"line":518},16,[38,520,173],{"class":52},[38,522,38],{"class":115},[38,524,316],{"class":52},[38,526,38],{"class":115},[38,528,124],{"class":52},[38,530,532,534,536,538,540],{"class":40,"line":531},17,[38,533,173],{"class":52},[38,535,327],{"class":115},[38,537,330],{"class":52},[38,539,327],{"class":115},[38,541,124],{"class":52},[38,543,545,547,549],{"class":40,"line":544},18,[38,546,188],{"class":52},[38,548,165],{"class":164},[38,550,124],{"class":52},[38,552,554],{"class":40,"line":553},19,[38,555,198],{"class":52},[38,557,559],{"class":40,"line":558},20,[38,560,78],{"class":52},[20,562,564],{"id":563},"reactreactchild","React.ReactChild",[10,566,567],{},"Allows one React element, string or number",[28,569,571],{"className":30,"code":570,"language":32,"meta":33,"style":33},"interface ButtonProps {\n  children: React.ReactChild\n}\nconst Button = ({ children }: ButtonProps) => \u003Cbutton>{children}\u003C/button>\n\nexport default function Card() {\n  return \u003CButton>click me\u003C/Button>\n}\n",[35,572,573,581,595,599,631,635,647,661],{"__ignoreMap":33},[38,574,575,577,579],{"class":40,"line":41},[38,576,45],{"class":44},[38,578,49],{"class":48},[38,580,53],{"class":52},[38,582,583,585,587,590,592],{"class":40,"line":56},[38,584,60],{"class":59},[38,586,63],{"class":44},[38,588,589],{"class":48}," React",[38,591,69],{"class":52},[38,593,594],{"class":48},"ReactChild\n",[38,596,597],{"class":40,"line":75},[38,598,78],{"class":52},[38,600,601,603,605,607,609,611,613,615,617,619,621,623,625,627,629],{"class":40,"line":81},[38,602,84],{"class":44},[38,604,87],{"class":48},[38,606,90],{"class":44},[38,608,93],{"class":52},[38,610,96],{"class":59},[38,612,99],{"class":52},[38,614,63],{"class":44},[38,616,49],{"class":48},[38,618,106],{"class":52},[38,620,109],{"class":44},[38,622,112],{"class":52},[38,624,116],{"class":115},[38,626,119],{"class":52},[38,628,116],{"class":115},[38,630,124],{"class":52},[38,632,633],{"class":40,"line":127},[38,634,131],{"emptyLinePlaceholder":130},[38,636,637,639,641,643,645],{"class":40,"line":134},[38,638,137],{"class":44},[38,640,287],{"class":44},[38,642,140],{"class":44},[38,644,143],{"class":48},[38,646,146],{"class":52},[38,648,649,651,653,655,657,659],{"class":40,"line":149},[38,650,152],{"class":44},[38,652,112],{"class":52},[38,654,165],{"class":164},[38,656,316],{"class":52},[38,658,165],{"class":164},[38,660,124],{"class":52},[38,662,663],{"class":40,"line":158},[38,664,78],{"class":52},[20,666,564,668],{"id":667},"reactreactchild-1",[38,669],{},[10,671,672],{},"Allows multiple React elements, strings or numbers",[28,674,676],{"className":30,"code":675,"language":32,"meta":33,"style":33},"interface ButtonProps {\n  children: React.ReactChild\n}\nconst Button = ({ children }: ButtonProps) => \u003Cbutton>{children}\u003C/button>\n\nexport default function Card() {\n  return (\n    \u003CButton>\n      click me\n      \u003Ci>svg icon\u003C/i>\n    \u003C/Button>\n  )\n}\n",[35,677,678,686,698,702,734,738,750,756,764,769,781,789,793],{"__ignoreMap":33},[38,679,680,682,684],{"class":40,"line":41},[38,681,45],{"class":44},[38,683,49],{"class":48},[38,685,53],{"class":52},[38,687,688,690,692,694,696],{"class":40,"line":56},[38,689,60],{"class":59},[38,691,63],{"class":44},[38,693,589],{"class":48},[38,695,69],{"class":52},[38,697,594],{"class":48},[38,699,700],{"class":40,"line":75},[38,701,78],{"class":52},[38,703,704,706,708,710,712,714,716,718,720,722,724,726,728,730,732],{"class":40,"line":81},[38,705,84],{"class":44},[38,707,87],{"class":48},[38,709,90],{"class":44},[38,711,93],{"class":52},[38,713,96],{"class":59},[38,715,99],{"class":52},[38,717,63],{"class":44},[38,719,49],{"class":48},[38,721,106],{"class":52},[38,723,109],{"class":44},[38,725,112],{"class":52},[38,727,116],{"class":115},[38,729,119],{"class":52},[38,731,116],{"class":115},[38,733,124],{"class":52},[38,735,736],{"class":40,"line":127},[38,737,131],{"emptyLinePlaceholder":130},[38,739,740,742,744,746,748],{"class":40,"line":134},[38,741,137],{"class":44},[38,743,287],{"class":44},[38,745,140],{"class":44},[38,747,143],{"class":48},[38,749,146],{"class":52},[38,751,752,754],{"class":40,"line":149},[38,753,152],{"class":44},[38,755,155],{"class":52},[38,757,758,760,762],{"class":40,"line":158},[38,759,161],{"class":52},[38,761,165],{"class":164},[38,763,124],{"class":52},[38,765,766],{"class":40,"line":170},[38,767,768],{"class":52},"      click me\n",[38,770,771,773,775,777,779],{"class":40,"line":185},[38,772,173],{"class":52},[38,774,327],{"class":115},[38,776,330],{"class":52},[38,778,327],{"class":115},[38,780,124],{"class":52},[38,782,783,785,787],{"class":40,"line":195},[38,784,188],{"class":52},[38,786,165],{"class":164},[38,788,124],{"class":52},[38,790,791],{"class":40,"line":201},[38,792,198],{"class":52},[38,794,795],{"class":40,"line":349},[38,796,78],{"class":52},[20,798,800,801],{"id":799},"reactreactchild-reactreactchild","React.ReactChild | React.ReactChild",[38,802],{},[10,804,805],{},"Allows single or multiple React elements, strings or numbers",[28,807,809],{"className":30,"code":808,"language":32,"meta":33,"style":33},"interface ButtonProps {\n  children: React.ReactChild\n}\nconst Button = ({ children }: ButtonProps) => \u003Cbutton>{children}\u003C/button>\n\nexport function Card() {\n  return \u003CButton>click me\u003C/Button>\n}\n\nexport function Card2() {\n  return (\n    \u003CButton>\n      click me\n      \u003Ci>svg icon\u003C/i>\n    \u003C/Button>\n  )\n}\n",[35,810,811,819,831,835,867,871,881,895,899,903,913,919,927,931,943,951,955],{"__ignoreMap":33},[38,812,813,815,817],{"class":40,"line":41},[38,814,45],{"class":44},[38,816,49],{"class":48},[38,818,53],{"class":52},[38,820,821,823,825,827,829],{"class":40,"line":56},[38,822,60],{"class":59},[38,824,63],{"class":44},[38,826,589],{"class":48},[38,828,69],{"class":52},[38,830,594],{"class":48},[38,832,833],{"class":40,"line":75},[38,834,78],{"class":52},[38,836,837,839,841,843,845,847,849,851,853,855,857,859,861,863,865],{"class":40,"line":81},[38,838,84],{"class":44},[38,840,87],{"class":48},[38,842,90],{"class":44},[38,844,93],{"class":52},[38,846,96],{"class":59},[38,848,99],{"class":52},[38,850,63],{"class":44},[38,852,49],{"class":48},[38,854,106],{"class":52},[38,856,109],{"class":44},[38,858,112],{"class":52},[38,860,116],{"class":115},[38,862,119],{"class":52},[38,864,116],{"class":115},[38,866,124],{"class":52},[38,868,869],{"class":40,"line":127},[38,870,131],{"emptyLinePlaceholder":130},[38,872,873,875,877,879],{"class":40,"line":134},[38,874,137],{"class":44},[38,876,140],{"class":44},[38,878,143],{"class":48},[38,880,146],{"class":52},[38,882,883,885,887,889,891,893],{"class":40,"line":149},[38,884,152],{"class":44},[38,886,112],{"class":52},[38,888,165],{"class":164},[38,890,316],{"class":52},[38,892,165],{"class":164},[38,894,124],{"class":52},[38,896,897],{"class":40,"line":158},[38,898,78],{"class":52},[38,900,901],{"class":40,"line":170},[38,902,131],{"emptyLinePlaceholder":130},[38,904,905,907,909,911],{"class":40,"line":185},[38,906,137],{"class":44},[38,908,140],{"class":44},[38,910,497],{"class":48},[38,912,146],{"class":52},[38,914,915,917],{"class":40,"line":195},[38,916,152],{"class":44},[38,918,155],{"class":52},[38,920,921,923,925],{"class":40,"line":201},[38,922,161],{"class":52},[38,924,165],{"class":164},[38,926,124],{"class":52},[38,928,929],{"class":40,"line":349},[38,930,768],{"class":52},[38,932,933,935,937,939,941],{"class":40,"line":502},[38,934,173],{"class":52},[38,936,327],{"class":115},[38,938,330],{"class":52},[38,940,327],{"class":115},[38,942,124],{"class":52},[38,944,945,947,949],{"class":40,"line":509},[38,946,188],{"class":52},[38,948,165],{"class":164},[38,950,124],{"class":52},[38,952,953],{"class":40,"line":518},[38,954,198],{"class":52},[38,956,957],{"class":40,"line":531},[38,958,78],{"class":52},[20,960,962],{"id":961},"reactreactnode","React.ReactNode",[10,964,965],{},"Allows multiple children, strings, numbers, fragments, portals... We could use the above example but it is a little verbose and ReactNode covers a little more.",[28,967,969],{"className":30,"code":968,"language":32,"meta":33,"style":33},"interface ButtonProps {\n  children: React.ReactNode\n}\nconst Button = ({ children }: ButtonProps) => \u003Cbutton>{children}\u003C/button>\n\nexport default function Card() {\n  return (\n    \u003CButton>\n      click me\n      \u003Ci>svg icon\u003C/i>\n    \u003C/Button>\n  )\n}\n",[35,970,971,979,992,996,1028,1032,1044,1050,1058,1062,1074,1082,1086],{"__ignoreMap":33},[38,972,973,975,977],{"class":40,"line":41},[38,974,45],{"class":44},[38,976,49],{"class":48},[38,978,53],{"class":52},[38,980,981,983,985,987,989],{"class":40,"line":56},[38,982,60],{"class":59},[38,984,63],{"class":44},[38,986,589],{"class":48},[38,988,69],{"class":52},[38,990,991],{"class":48},"ReactNode\n",[38,993,994],{"class":40,"line":75},[38,995,78],{"class":52},[38,997,998,1000,1002,1004,1006,1008,1010,1012,1014,1016,1018,1020,1022,1024,1026],{"class":40,"line":81},[38,999,84],{"class":44},[38,1001,87],{"class":48},[38,1003,90],{"class":44},[38,1005,93],{"class":52},[38,1007,96],{"class":59},[38,1009,99],{"class":52},[38,1011,63],{"class":44},[38,1013,49],{"class":48},[38,1015,106],{"class":52},[38,1017,109],{"class":44},[38,1019,112],{"class":52},[38,1021,116],{"class":115},[38,1023,119],{"class":52},[38,1025,116],{"class":115},[38,1027,124],{"class":52},[38,1029,1030],{"class":40,"line":127},[38,1031,131],{"emptyLinePlaceholder":130},[38,1033,1034,1036,1038,1040,1042],{"class":40,"line":134},[38,1035,137],{"class":44},[38,1037,287],{"class":44},[38,1039,140],{"class":44},[38,1041,143],{"class":48},[38,1043,146],{"class":52},[38,1045,1046,1048],{"class":40,"line":149},[38,1047,152],{"class":44},[38,1049,155],{"class":52},[38,1051,1052,1054,1056],{"class":40,"line":158},[38,1053,161],{"class":52},[38,1055,165],{"class":164},[38,1057,124],{"class":52},[38,1059,1060],{"class":40,"line":170},[38,1061,768],{"class":52},[38,1063,1064,1066,1068,1070,1072],{"class":40,"line":185},[38,1065,173],{"class":52},[38,1067,327],{"class":115},[38,1069,330],{"class":52},[38,1071,327],{"class":115},[38,1073,124],{"class":52},[38,1075,1076,1078,1080],{"class":40,"line":195},[38,1077,188],{"class":52},[38,1079,165],{"class":164},[38,1081,124],{"class":52},[38,1083,1084],{"class":40,"line":201},[38,1085,198],{"class":52},[38,1087,1088],{"class":40,"line":349},[38,1089,78],{"class":52},[1091,1092,1094],"h2",{"id":1093},"conclusion","Conclusion",[10,1096,1097],{},"And that's it, you now have no excuses for adding type checking for your children.",[1091,1099,1101],{"id":1100},"useful-links","Useful Links",[1103,1104,1105,1115,1122,1129],"ul",{},[1106,1107,1108],"li",{},[1109,1110,1114],"a",{"href":1111,"rel":1112},"https://frontendmasters.com/courses/react-typescript/",[1113],"nofollow","React and TypeScript Course by Steve Kinney",[1106,1116,1117],{},[1109,1118,1121],{"href":1119,"rel":1120},"https://frontendmasters.com/courses/typescript-v3/",[1113],"TypeScript Fundamentals, v3 course by Mike North",[1106,1123,1124],{},[1109,1125,1128],{"href":1126,"rel":1127},"https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html",[1113],"Typescript docs",[1106,1130,1131],{},[1109,1132,1135],{"href":1133,"rel":1134},"https://www.smashingmagazine.com/printed-books/typescript-in-50-lessons/",[1113],"TypeScript in 50 lessons",[1137,1138,1139],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":33,"searchDepth":56,"depth":56,"links":1141},[1142,1143,1144,1145,1146,1147,1148,1149,1150],{"id":22,"depth":75,"text":23},{"id":206,"depth":75,"text":23},{"id":354,"depth":75,"text":355},{"id":563,"depth":75,"text":564},{"id":667,"depth":75,"text":564},{"id":799,"depth":75,"text":800},{"id":961,"depth":75,"text":962},{"id":1093,"depth":56,"text":1094},{"id":1100,"depth":56,"text":1101},null,"2022-01-11","md",false,"photo-1504438190342-5951e134ffee?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80",{},"/blog/typescript-and-children","imgix",{"title":5,"description":12},"blog/typescript-and-children",[1162,1163],"typescript","react","byAcZb7p0esSh3rlmwQEvrEYcHHvTFUzVQD_2x43JGk",[1166,1170],{"title":1167,"path":1168,"stem":1169,"children":-1},"Building and Testing a Counter Component","/blog/building-and-testing-counter-component","blog/building-and-testing-counter-component",{"title":1171,"path":1172,"stem":1173,"children":-1},"Building and Testing a Select Component","/blog/building-and-testing-select-input","blog/building-and-testing-select-input",1790839747601]