[{"data":1,"prerenderedAt":465},["ShallowReactive",2],{"post:basic-typescript":3},{"id":4,"title":5,"body":6,"date":453,"description":12,"draft":454,"extension":455,"meta":456,"navigation":457,"path":458,"seo":459,"stem":460,"tags":461,"__hash__":464},"posts\u002Fposts\u002Fbasic-typescript.md","Basic Typescript",{"type":7,"value":8,"toc":446},"minimark",[9,13,18,21,29,88,91,149,152,192,195,213,223,227,233,255,258,299,303,306,360,367,371,377,429,435,439,442],[10,11,12],"p",{},"I recently began taking a simple Typescript course, and I thought I'd share my notes here in blog form. Typescript, if you've been living under a rock, is a Javascript superset which implements strict typing and transpiles to normal Javascript. Utilizing strict typing gives developers much better tooling for catching typing errors sooner in the development cycle.",[14,15,17],"h2",{"id":16},"typescript-syntax","Typescript Syntax",[10,19,20],{},"First off, all Javascript programs are valid Typescript! This is by design, so typescript can be gently introduced into a system without requiring a full rewrite.",[10,22,23,24,28],{},"To begin declaring variable types, we use the ",[25,26,27],"code",{},": type"," syntax:",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-ts shiki shiki-themes github-light","let name: string = \"Michael\";\nlet IQ: number = 215;\n","ts","",[25,37,38,68],{"__ignoreMap":35},[39,40,43,47,51,54,58,61,65],"span",{"class":41,"line":42},"line",1,[39,44,46],{"class":45},"sD7c4","let",[39,48,50],{"class":49},"sgsFI"," name",[39,52,53],{"class":45},":",[39,55,57],{"class":56},"sYu0t"," string",[39,59,60],{"class":45}," =",[39,62,64],{"class":63},"sYBdl"," \"Michael\"",[39,66,67],{"class":49},";\n",[39,69,71,73,76,78,81,83,86],{"class":41,"line":70},2,[39,72,46],{"class":45},[39,74,75],{"class":56}," IQ",[39,77,53],{"class":45},[39,79,80],{"class":56}," number",[39,82,60],{"class":45},[39,84,85],{"class":56}," 215",[39,87,67],{"class":49},[10,89,90],{},"This also works with function argument and return types:",[30,92,94],{"className":32,"code":93,"language":34,"meta":35,"style":35},"function processThing(thingId: string ): string{\n    \u002F\u002F do something\n    return \"output\";\n}\n",[25,95,96,126,132,143],{"__ignoreMap":35},[39,97,98,101,105,108,112,114,116,119,121,123],{"class":41,"line":42},[39,99,100],{"class":45},"function",[39,102,104],{"class":103},"s7eDp"," processThing",[39,106,107],{"class":49},"(",[39,109,111],{"class":110},"sqxcx","thingId",[39,113,53],{"class":45},[39,115,57],{"class":56},[39,117,118],{"class":49}," )",[39,120,53],{"class":45},[39,122,57],{"class":56},[39,124,125],{"class":49},"{\n",[39,127,128],{"class":41,"line":70},[39,129,131],{"class":130},"sAwPA","    \u002F\u002F do something\n",[39,133,135,138,141],{"class":41,"line":134},3,[39,136,137],{"class":45},"    return",[39,139,140],{"class":63}," \"output\"",[39,142,67],{"class":49},[39,144,146],{"class":41,"line":145},4,[39,147,148],{"class":49},"}\n",[10,150,151],{},"There are 7 primitive types available:",[153,154,155,161,166,171,176,181,186],"ol",{},[156,157,158],"li",{},[25,159,160],{},"string",[156,162,163],{},[25,164,165],{},"number",[156,167,168],{},[25,169,170],{},"boolean",[156,172,173],{},[25,174,175],{},"bigint",[156,177,178],{},[25,179,180],{},"undefined",[156,182,183],{},[25,184,185],{},"null",[156,187,188,191],{},[25,189,190],{},"symbol"," (ES6+)",[10,193,194],{},"As well as other, more special types:",[153,196,197,202],{},[156,198,199],{},[25,200,201],{},"object",[156,203,204,207,208],{},[25,205,206],{},"any"," see ",[209,210,212],"a",{"href":211},"#gradual-typing","gradual typing",[10,214,215,216,222],{},"There are many more special types available, but I'll let you ",[209,217,221],{"href":218,"rel":219},"https:\u002F\u002Fwww.typescriptlang.org\u002Fdocs\u002Fhandbook\u002F2\u002Feveryday-types.html",[220],"nofollow","read those for yourself",".",[14,224,226],{"id":225},"object-typing","Object Typing",[10,228,229,230,232],{},"We can use the ",[25,231,201],{}," type for more complex values:",[30,234,236],{"className":32,"code":235,"language":34,"meta":35,"style":35},"let myFoo: object = {};\n",[25,237,238],{"__ignoreMap":35},[39,239,240,242,245,247,250,252],{"class":41,"line":42},[39,241,46],{"class":45},[39,243,244],{"class":49}," myFoo",[39,246,53],{"class":45},[39,248,249],{"class":56}," object",[39,251,60],{"class":45},[39,253,254],{"class":49}," {};\n",[10,256,257],{},"And we can specify the object with fields itself:",[30,259,261],{"className":32,"code":260,"language":34,"meta":35,"style":35},"let myFoo: object = {\n    name: string;\n    rank: number;\n    createDate: Date;\n};\n",[25,262,263,278,283,288,293],{"__ignoreMap":35},[39,264,265,267,269,271,273,275],{"class":41,"line":42},[39,266,46],{"class":45},[39,268,244],{"class":49},[39,270,53],{"class":45},[39,272,249],{"class":56},[39,274,60],{"class":45},[39,276,277],{"class":49}," {\n",[39,279,280],{"class":41,"line":70},[39,281,282],{"class":49},"    name: string;\n",[39,284,285],{"class":41,"line":134},[39,286,287],{"class":49},"    rank: number;\n",[39,289,290],{"class":41,"line":145},[39,291,292],{"class":49},"    createDate: Date;\n",[39,294,296],{"class":41,"line":295},5,[39,297,298],{"class":49},"};\n",[14,300,302],{"id":301},"type-inference","Type Inference",[10,304,305],{},"Not all types must be manually declared. If we are assigning values from type locations such as variables or function returns, Typescript can \"infer\" the type automatically:",[30,307,309],{"className":32,"code":308,"language":34,"meta":35,"style":35},"function getItem(): string {\n    return \"hi!\";\n}\n\u002F\u002F type is automatically inferred to be a String\nlet myItem = getItem();\n",[25,310,311,327,336,340,345],{"__ignoreMap":35},[39,312,313,315,318,321,323,325],{"class":41,"line":42},[39,314,100],{"class":45},[39,316,317],{"class":103}," getItem",[39,319,320],{"class":49},"()",[39,322,53],{"class":45},[39,324,57],{"class":56},[39,326,277],{"class":49},[39,328,329,331,334],{"class":41,"line":70},[39,330,137],{"class":45},[39,332,333],{"class":63}," \"hi!\"",[39,335,67],{"class":49},[39,337,338],{"class":41,"line":134},[39,339,148],{"class":49},[39,341,342],{"class":41,"line":145},[39,343,344],{"class":130},"\u002F\u002F type is automatically inferred to be a String\n",[39,346,347,349,352,355,357],{"class":41,"line":295},[39,348,46],{"class":45},[39,350,351],{"class":49}," myItem ",[39,353,354],{"class":45},"=",[39,356,317],{"class":103},[39,358,359],{"class":49},"();\n",[10,361,362,363,366],{},"This gives us the benefit of static typing on the ",[25,364,365],{},"myItem"," variable without any additional effort.",[14,368,370],{"id":369},"gradual-typing","Gradual Typing",[10,372,373,374,376],{},"Gradual typing allows you to choose how and when types are applied by using the ",[25,375,206],{}," type:",[30,378,380],{"className":32,"code":379,"language":34,"meta":35,"style":35},"\u002F\u002F basically, fall back to dynamic javascript typing\nlet cost: any = 425;\n\u002F\u002F alternate syntax\nlet cost = 425 as any;\n",[25,381,382,387,406,411],{"__ignoreMap":35},[39,383,384],{"class":41,"line":42},[39,385,386],{"class":130},"\u002F\u002F basically, fall back to dynamic javascript typing\n",[39,388,389,391,394,396,399,401,404],{"class":41,"line":70},[39,390,46],{"class":45},[39,392,393],{"class":49}," cost",[39,395,53],{"class":45},[39,397,398],{"class":56}," any",[39,400,60],{"class":45},[39,402,403],{"class":56}," 425",[39,405,67],{"class":49},[39,407,408],{"class":41,"line":134},[39,409,410],{"class":130},"\u002F\u002F alternate syntax\n",[39,412,413,415,418,420,422,425,427],{"class":41,"line":145},[39,414,46],{"class":45},[39,416,417],{"class":49}," cost ",[39,419,354],{"class":45},[39,421,403],{"class":56},[39,423,424],{"class":45}," as",[39,426,398],{"class":56},[39,428,67],{"class":49},[10,430,431,432,434],{},"Using the ",[25,433,206],{}," type is essentially \"opting out\" of typescript static typing features. Not recommended, but can be useful in some cases.",[14,436,438],{"id":437},"conclusion","Conclusion",[10,440,441],{},"Typescript is easy to learn, can be introduced into an existing codebase without requiring major refactoring, and catches a TON of bugs that would be easy to miss otherwise. I'm a fan!",[443,444,445],"style",{},"html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}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 pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sqxcx, html code.shiki .sqxcx{--shiki-default:#E36209}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":35,"searchDepth":70,"depth":70,"links":447},[448,449,450,451,452],{"id":16,"depth":70,"text":17},{"id":225,"depth":70,"text":226},{"id":301,"depth":70,"text":302},{"id":369,"depth":70,"text":370},{"id":437,"depth":70,"text":438},"2026-09-02T16:13:57-04:00",false,"md",{},true,"\u002Fposts\u002Fbasic-typescript",{"title":5,"description":12},"posts\u002Fbasic-typescript",[462,463],"javascript","typescript","3JrhlJVk-F4Q0vUM9HpAndPhdrZpK8IWKE0HesZUnR4",1790225111686]