DEV Community

Cover image for Creating a Simple Memory Game using TypeScript & React

Creating a Simple Memory Game using TypeScript & React

karthick3018 profile image KaRthick ・2 min read

TypeScript a quick definition

TypeScript is a typed superset of JavaScript compiled in JavaScript since the browser/compiler knows to compile only JavaScript. You would've heard this often ! what's this actually, TypeScript is JavaScript along with some additional features.

How it can help developers of different domain ?

The major two division in the web development is JavaScript developers and C#,Java,Visual Basic .NET , ... (from my point of view)

If JavaScript developers checks the code in any of the C#,Java,Visual Basic .NET project or if .C#,Java,Visual Basic .NET checks the code of any JavaScrip project then this will happen ..

Alt text of image

If TypeScript is used it would bring some common things not full but some. A minimal thing ! C#,Java,Visual Basic .NET will not see TypeScript as a new things but for JavaScript developers this a huge thing! Probably a new world we're getting into ....

In-to TypeScript

Alt Text

interface: where we declare the types of the values/parameters

now the interface Person consist of two objects firstName & lastName of type string and Person is assigned to the parameter in the function

function greeter(person: Person)

so now the parameter for the function greeter is type checked. Parameters should be of type string.

let user = { firstName: 123, lastName: "User" };

TS plays here! this this throw an error.

All the data type supported in JavaScript can be assigned in the interface to any of the variable.This is the first thing to be learnt!

Check this out to explore more data types and how to use them link one of my colleague explained this well

So what's in this memory game ?

This game is created using Typescript along with the useReducer

Alt Text

this shows some of the TypeScript usage in Reactjs . You can check the repo here

Spent some time to play the game here

Has all TypeScript points over?

Undoubtedly a big no there's way big things to explore in TypeScript check this docs and make great projects !

If you haven't checked things about react-query
check this out . It's really cool and save your time a lot,increases your productivity.

Thanks for your time !!
See you all then
Happy Coding stay safe!


Editor guide