NODE.js Hackathon: Building a Tik-Tac-Toe Game
NODE.js Hackathon: Building a Tik-Tac-Toe Game
Introduction to TypeScript:
Hello friends, woof! I am TRex, a German Shepherd, and today I'm going to narrate a tail-wagging story about my day, intertwined with learning about TypeScript. Hold on to your leashes as we embark on this pawsome journey together.
Early Morning Walks and TypeScript Introduction:
Every day starts with a brisk walk as the sun rises.
Just as my day has a structured beginning, TypeScript is a structured superset of JavaScript.
It adds static types to the language, allowing you to write safer and more robust code by catching errors during development rather than runtime.
Enabling us to do Design-based, Component-driven Programming.
Breakfast Time and Variables:
After our walk, it's breakfast time! I have two bowls: one for kibble and one for water.
In TypeScript, think of these bowls as variables, containers that hold data. You might have a kibble variable and a water variable, and you can specify what type of data (or treat) each variable holds, like string, number, or boolean.
typescriptCopy codelet kibble: number = 100;let water: string = "fresh";
Since tyepscript is object oriented typed, why can't I say int i = 1 in TypeScript. Should it not allow int ?
In TypeScript, the syntax is a bit different from other statically typed languages like Java or C#. TypeScript is a superset of JavaScript, and it maintains a lot of JavaScript's syntax while adding static typing. In TypeScript, you use the number type for all numeric values, whether integer or floating-point.
So, instead of writing:
javaCopy codeint i = 1; // This is Java or C#, not TypeScript
You would write:
typescriptCopy codelet i: number = 1; // This is TypeScript
In TypeScript, the : number syntax is used to annotate a variable as holding a numeric value. TypeScript does not have specific integer and floating-point types like some other languages do (e.g., int and float in C# or Java).
The number type in TypeScript is used for all numeric values. This design decision was made to keep the language simpler and more aligned with JavaScript, which also does not distinguish between different kinds of numbers.
Calling Functions : Playing Fetch and Functions:
Next, we play fetch!
When you throw the ball (call a function in TypeScript), you expect to get the ball back (return a value).
Just like how you know the ball will come back to you, in TypeScript, you can specify what type of value a function should return.
function fetchBall(times: number): string { return `Fetched the ball ${times} times!`;}
Nap Time and Interfaces:
After a good game of fetch, I settle down for a nap.
I have different spots to choose from: my bed, the couch, or the rug.
I choose based on comfort and warmth.
Similarly, in TypeScript, you can use interfaces to define a type and ensure objects have the right shape, like choosing the perfect napping spot.
typescriptCopy codeinterface NapSpot { location: string; comfortLevel: number;}
Evening Patrol and Classes:
In the evening, it’s patrol time! I guard my yard from squirrels and birds.
My guarding duties can be thought of as a class in TypeScript, with different methods (actions) and properties (attributes).
typescriptCopy codeclass GuardDog { name: string = "TRex"; enemy: string = "squirrels"; bark(): void { console.log("Woof! Stay away from my yard!"); }}
Bedtime and Compiling:
At the end of my adventurous day, I curl up in my bed. Just as I recap my day's events before closing my eyes, TypeScript has a compilation step, transforming your TypeScript code into JavaScript, ensuring it’s free from errors and ready to run in any environment.
bashCopy codetsc myCode.ts
A Tail End Note:
So friends, as I drift into my doggy dreams, remember that TypeScript is here to make your coding journey more structured and error-free, just like the organized parts of my day.
It adds types, interfaces, and classes to JavaScript: thereby enabling design-driven programmer or component-based programming.
TS provides a more robust coding experience.
Happy coding and tail wags to you all!
Love, woof, and licks,
TRex 🐾
Study this material in conjunction with : 6 Forms of Functions in JavaScript
Below is an example of a TypeScript program to demonstrate string handling by randomly generating five 5-letter words from the alphabet string. This program uses classes and objects for structure.
class RandomWordGenerator { alphabet: string = "abcdefghijklmnopqrstuvwxyz";
// Method to generate a random 5-letter word generateWord(): string { let word = ""; for (let i = 0; i < 5; i++) { const randomIndex = Math.floor(Math.random() * this.alphabet.length); word += this.alphabet[randomIndex]; } return word; }}
class WordList { words: string[] = [];
// Method to add a word to the words array addWord(word: string): void { this.words.push(word); }
// Method to display the words displayWords(): void { console.log("Generated Words: ", this.words.join(", ")); }}
// Create objects of the classesconst randomWordGenerator = new RandomWordGenerator();const wordList = new WordList();
// Generate five 5-letter words and add them to the words arrayfor (let i = 0; i < 5; i++) { const word = randomWordGenerator.generateWord(); wordList.addWord(word);}
// Display the generated wordswordList.displayWords();
Explanation:
To run this program, ensure you have TypeScript installed, then compile the TypeScript code to JavaScript using the tsc command and execute the JavaScript code using the node command.
bashCopy codetsc filename.tsnode filename.js
A detailed example of a TypeScript program that showcases the use of interfaces, multiple classes, and complex method interactions.
The program involves arithmetic operations on numbers, with various classes and interfaces to handle these operations.
// Interface for Basic Arithmetic Operationsinterface BasicArithmetic { add(a: number, b: number): number; subtract(a: number, b: number): number;}
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.