DEV Community

Cover image for Getting Started With TypeScript

Getting Started With TypeScript

Chinmay Mhatre on August 09, 2022

I'll proceed with the blog assuming you have previously worked with JavaScript. Knowing JavaScript would have you catch on to TypeScript concepts ...
Read full post
Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

What that means is all the JavaScript you know is completely valid in TypeScript

TypeScript is not a superset of JavaScript. This perfectly valid JS throws an error in TS:

var foo = {};
foo.bar = 42;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tylim88 profile image
Acid Coder • • Edited

it error because it does not pass the type check (that is the purpose of typescript: type check)

doesn't mean typescript is not super set of javascript

a valid JS code that does not pass typescript type check only throw error on compilation but not run time

var foo = {};
// @ts-expect-error
foo.bar = 42;
console.log(foo)
Enter fullscreen mode Exit fullscreen mode

simply expect the error and you can run the code
playground

Collapse
 
rkallan profile image
RRKallan •

Instead using

// @ts-expect-error
Enter fullscreen mode Exit fullscreen mode

Add a dynamic type and defined possible types for value

type TypeFoo = {
    [key: number | string]: string | number | string[] | number[] | undefined 
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
tylim88 profile image
Acid Coder • • Edited

the reason i use // @ts-expect-error is because I want to show that untyped code is a valid code in TS

also [key: number | string] in unnecessary because it is equivalent to [key: strting]

dev.to/tylim88/typescript-caveat-1...

Thread Thread
 
rkallan profile image
RRKallan •

also [key: number | string] in unnecessary because it is equivalent to [key: strting]

True Sorry my mistake. Object keys is always a string.

the reason i use // @ts-expect-error is because I want to show that untyped code is a valid code in TS

ts-expect-error will report if there is no error.
Unused '@ts-expect-error' directive
Which can be solved with
// @ts-ignore

It’s a choice of course.

Thread Thread
 
tylim88 profile image
Acid Coder • • Edited

ts-expect-error will report if there is no error.
Unused '@ts-expect-error' directive
Which can be solved with
// @ts-ignore
It’s a choice of course

which is why you should only use it on line that has error

normally // @ts-ignore is not desirable because it is not granular, it will just ignore everything and will ignore thing that you don't want to ignore (but is ok in this case)

and because of granularity // @ts-expect-error is very useful in type testing

True Sorry my mistake. Object keys is always a string.

object key can be numeric, it will be converted to string on runtime

type wise key type of both {[x:string]:unknown} and {[x:string | number ]:unknown} are string | number

which is why I said it is unnecessary, not incorrect

Collapse
 
rkallan profile image
RRKallan •

I wouldn’t recommended to install TS global, I would recommend to install it as dependacy. So you will be sure all teammembers will use the same TS version

npm install typescript --save-dev
Enter fullscreen mode Exit fullscreen mode

You can use is as follow with npx

npx tsc
Enter fullscreen mode Exit fullscreen mode