[{"data":1,"prerenderedAt":506},["ShallowReactive",2],{"post:typescript-basics":3},{"id":4,"title":5,"body":6,"date":494,"description":12,"draft":495,"extension":496,"meta":497,"navigation":498,"path":499,"seo":500,"stem":501,"tags":502,"__hash__":505},"posts\u002Fposts\u002Ftypescript-basics.md","TIL: Typescript Basics",{"type":7,"value":8,"toc":487},"minimark",[9,13,29,34,37,97,100,158,161,200,203,221,225,228,250,253,294,298,301,355,359,365,417,423,427,430,483],[10,11,12],"p",{},"Typescript:",[14,15,16,20,23,26],"ul",{},[17,18,19],"li",{},"is a superset of Javascript",[17,21,22],{},"transpiles to javascript",[17,24,25],{},"offers strict typing features",[17,27,28],{},"which help catch typing errors sooner",[30,31,33],"h2",{"id":32},"typescript-syntax","Typescript Syntax",[10,35,36],{},"We can (must) set variable types:",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-ts shiki shiki-themes github-light github-dark","let name: string = \"Michael\";\nlet IQ: number = 215;\n","ts","",[45,46,47,77],"code",{"__ignoreMap":43},[48,49,52,56,60,63,67,70,74],"span",{"class":50,"line":51},"line",1,[48,53,55],{"class":54},"szBVR","let",[48,57,59],{"class":58},"sVt8B"," name",[48,61,62],{"class":54},":",[48,64,66],{"class":65},"sj4cs"," string",[48,68,69],{"class":54}," =",[48,71,73],{"class":72},"sZZnC"," \"Michael\"",[48,75,76],{"class":58},";\n",[48,78,80,82,85,87,90,92,95],{"class":50,"line":79},2,[48,81,55],{"class":54},[48,83,84],{"class":65}," IQ",[48,86,62],{"class":54},[48,88,89],{"class":65}," number",[48,91,69],{"class":54},[48,93,94],{"class":65}," 215",[48,96,76],{"class":58},[10,98,99],{},"or function argument and return types:",[38,101,103],{"className":40,"code":102,"language":42,"meta":43,"style":43},"function processThing(thingId: string ): string{\n    \u002F\u002F do something\n    return \"output\";\n}\n",[45,104,105,135,141,152],{"__ignoreMap":43},[48,106,107,110,114,117,121,123,125,128,130,132],{"class":50,"line":51},[48,108,109],{"class":54},"function",[48,111,113],{"class":112},"sScJk"," processThing",[48,115,116],{"class":58},"(",[48,118,120],{"class":119},"s4XuR","thingId",[48,122,62],{"class":54},[48,124,66],{"class":65},[48,126,127],{"class":58}," )",[48,129,62],{"class":54},[48,131,66],{"class":65},[48,133,134],{"class":58},"{\n",[48,136,137],{"class":50,"line":79},[48,138,140],{"class":139},"sJ8bj","    \u002F\u002F do something\n",[48,142,144,147,150],{"class":50,"line":143},3,[48,145,146],{"class":54},"    return",[48,148,149],{"class":72}," \"output\"",[48,151,76],{"class":58},[48,153,155],{"class":50,"line":154},4,[48,156,157],{"class":58},"}\n",[10,159,160],{},"We have 7ish primitive types available:",[162,163,164,169,174,179,184,189,194],"ol",{},[17,165,166],{},[45,167,168],{},"string",[17,170,171],{},[45,172,173],{},"number",[17,175,176],{},[45,177,178],{},"boolean",[17,180,181],{},[45,182,183],{},"bigint",[17,185,186],{},[45,187,188],{},"undefined",[17,190,191],{},[45,192,193],{},"null",[17,195,196,199],{},[45,197,198],{},"symbol"," (ES6+)",[10,201,202],{},"We also have some other, more special types:",[162,204,205,210],{},[17,206,207],{},[45,208,209],{},"object",[17,211,212,215,216],{},[45,213,214],{},"any"," see ",[217,218,220],"a",{"href":219},"#gradual-typing","gradual typing",[30,222,224],{"id":223},"object-typing","Object Typing",[10,226,227],{},"It can be as simple as this:",[38,229,231],{"className":40,"code":230,"language":42,"meta":43,"style":43},"let myFoo: object = {};\n",[45,232,233],{"__ignoreMap":43},[48,234,235,237,240,242,245,247],{"class":50,"line":51},[48,236,55],{"class":54},[48,238,239],{"class":58}," myFoo",[48,241,62],{"class":54},[48,243,244],{"class":65}," object",[48,246,69],{"class":54},[48,248,249],{"class":58}," {};\n",[10,251,252],{},"or we can also specify the object with fields itself:",[38,254,256],{"className":40,"code":255,"language":42,"meta":43,"style":43},"let myFoo: object = {\n    name: string;\n    rank: number;\n    createDate: Date;\n};\n",[45,257,258,273,278,283,288],{"__ignoreMap":43},[48,259,260,262,264,266,268,270],{"class":50,"line":51},[48,261,55],{"class":54},[48,263,239],{"class":58},[48,265,62],{"class":54},[48,267,244],{"class":65},[48,269,69],{"class":54},[48,271,272],{"class":58}," {\n",[48,274,275],{"class":50,"line":79},[48,276,277],{"class":58},"    name: string;\n",[48,279,280],{"class":50,"line":143},[48,281,282],{"class":58},"    rank: number;\n",[48,284,285],{"class":50,"line":154},[48,286,287],{"class":58},"    createDate: Date;\n",[48,289,291],{"class":50,"line":290},5,[48,292,293],{"class":58},"};\n",[30,295,297],{"id":296},"type-inference","Type Inference",[10,299,300],{},"Typescript can \"infer\" types from method return values, for example:",[38,302,304],{"className":40,"code":303,"language":42,"meta":43,"style":43},"function getItem(): string {\n    return \"hi!\";\n}\n\u002F\u002F type is automatically inferred to be a String\nlet myItem = getItem();\n",[45,305,306,322,331,335,340],{"__ignoreMap":43},[48,307,308,310,313,316,318,320],{"class":50,"line":51},[48,309,109],{"class":54},[48,311,312],{"class":112}," getItem",[48,314,315],{"class":58},"()",[48,317,62],{"class":54},[48,319,66],{"class":65},[48,321,272],{"class":58},[48,323,324,326,329],{"class":50,"line":79},[48,325,146],{"class":54},[48,327,328],{"class":72}," \"hi!\"",[48,330,76],{"class":58},[48,332,333],{"class":50,"line":143},[48,334,157],{"class":58},[48,336,337],{"class":50,"line":154},[48,338,339],{"class":139},"\u002F\u002F type is automatically inferred to be a String\n",[48,341,342,344,347,350,352],{"class":50,"line":290},[48,343,55],{"class":54},[48,345,346],{"class":58}," myItem ",[48,348,349],{"class":54},"=",[48,351,312],{"class":112},[48,353,354],{"class":58},"();\n",[30,356,358],{"id":357},"gradual-typing","Gradual Typing",[10,360,361,362,364],{},"Allows you to choose how and when types are applied by using the ",[45,363,214],{}," type:",[38,366,368],{"className":40,"code":367,"language":42,"meta":43,"style":43},"\u002F\u002F basically, fall back to dynamic javascript typing\nlet cost: any = 425;\n\u002F\u002F alternate syntax\nlet cost = 425 as any;\n",[45,369,370,375,394,399],{"__ignoreMap":43},[48,371,372],{"class":50,"line":51},[48,373,374],{"class":139},"\u002F\u002F basically, fall back to dynamic javascript typing\n",[48,376,377,379,382,384,387,389,392],{"class":50,"line":79},[48,378,55],{"class":54},[48,380,381],{"class":58}," cost",[48,383,62],{"class":54},[48,385,386],{"class":65}," any",[48,388,69],{"class":54},[48,390,391],{"class":65}," 425",[48,393,76],{"class":58},[48,395,396],{"class":50,"line":143},[48,397,398],{"class":139},"\u002F\u002F alternate syntax\n",[48,400,401,403,406,408,410,413,415],{"class":50,"line":154},[48,402,55],{"class":54},[48,404,405],{"class":58}," cost ",[48,407,349],{"class":54},[48,409,391],{"class":65},[48,411,412],{"class":54}," as",[48,414,386],{"class":65},[48,416,76],{"class":58},[10,418,419,420,422],{},"Using the ",[45,421,214],{}," type is essentially \"opting out\" of typescript static typing features.",[30,424,426],{"id":425},"interfaces","Interfaces",[10,428,429],{},"A minimal interface might look like this:",[38,431,433],{"className":40,"code":432,"language":42,"meta":43,"style":43},"interface book {\n    name: string;\n    rank: number;\n    publishDate: Date;\n};\n",[45,434,435,445,456,467,479],{"__ignoreMap":43},[48,436,437,440,443],{"class":50,"line":51},[48,438,439],{"class":54},"interface",[48,441,442],{"class":112}," book",[48,444,272],{"class":58},[48,446,447,450,452,454],{"class":50,"line":79},[48,448,449],{"class":119},"    name",[48,451,62],{"class":54},[48,453,66],{"class":65},[48,455,76],{"class":58},[48,457,458,461,463,465],{"class":50,"line":143},[48,459,460],{"class":119},"    rank",[48,462,62],{"class":54},[48,464,89],{"class":65},[48,466,76],{"class":58},[48,468,469,472,474,477],{"class":50,"line":154},[48,470,471],{"class":119},"    publishDate",[48,473,62],{"class":54},[48,475,476],{"class":112}," Date",[48,478,76],{"class":58},[48,480,481],{"class":50,"line":290},[48,482,293],{"class":58},[484,485,486],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":43,"searchDepth":79,"depth":79,"links":488},[489,490,491,492,493],{"id":32,"depth":79,"text":33},{"id":223,"depth":79,"text":224},{"id":296,"depth":79,"text":297},{"id":357,"depth":79,"text":358},{"id":425,"depth":79,"text":426},"2026-09-01T22:12:40-04:00",false,"md",{},true,"\u002Fposts\u002Ftypescript-basics",{"title":5,"description":12},"posts\u002Ftypescript-basics",[503,504],"javascript","til","Ggq24ialfsbCxcmDGaPXMZ-HVmWteRX0BMl6niA6tik",1790471527453]