In this article, tech industry experts Matt Lawrence and Mike Karan will cover TypeScript, including what it is, the basics you should learn, and additional learning resources.
Topics covered in this article include:
- What TypeScript is
- Who should learn TypeScript
- TypeScript Basics
Why TypeScript was made
In VBA, you need to declare a variable type like this:
Limitations such as these prompted the development of TypeScript by Microsoft in 2012, which aimed to address these concerns and enhance the overall developer experience.
Who should learn TypeScript?
So, should you learn TypeScript? Mike explains if you are already earning an income from projects you are creating for clients, it is not necessary for you to learn and incorporate TypeScript in them.
However, If you are learning web development with the intention of being hired, then YES! Not only will you gain a competitive advantage by learning it, but you will also become eligible for a broader range of job opportunities (just check your local job listings to see 📰)!
Mike also advises that students with a background in higher coding languages are also good candidates for learning TypeScript.
How to create a TypeScript project
You can get some practice with TypeScript by creating a React project using Vite and selecting TypeScript when being asked to select a variant. For a beginner-friendly guide, you can follow and code along with my article: How to Create a Local React Environment with Vite
So that you can gain the additional benefits of TypeScript while learning and incorporating the basics, you can disable strict mode. To disable strict mode, set the strict option to false in the tsconfig.json file.
To disable strict mode in TypeScript, modify your tsconfig.json file like this:
😱 Before you hit the panic button because you think you need to become a TypeScript pro in order to qualify for a job, Mike reassures us that we can begin by learning the TypeScript basics and then gradually incorporating more advanced features.
The TypeScript basics include:
- Static Typing
- Interfaces and Classes
- Type Inference
For example, if you have a variable for an employee with a number as the variable's type with a value of (12), and then later, it is necessary also to include the employee's area (RED), you can reassign the variable's type to a string so the new value (RED12) would work.
TypeScript uses static typing, which has the ability to set a variable's type when you declare it. Doing so prevents you from changing the variable's type throughout your program.
TypeScript intersection is a way to combine multiple types into one, allowing a variable or object to have the properties and functionalities of all the combined types. It is denoted by an ampersand (&) between the types.
TypeScript type any
Not to be used in production code, TypeScript has a type "any" that you can use when you are unsure what the type should be. When you are learning TypeScript, Mike tells us this is an acceptable solution.
📝 Note: To allow the usage of the any type in TypeScript set the strict option to false in the tsconfig.json file0
Interfaces and Classes
Mike explains that both Interfaces and Classes originate from object-oriented principles. So, what are these principles? Object-oriented principles are a set of ideas used in programming to organize code around objects that represent real-world things or concepts.
Interfaces define the structure and types of properties that an object should have. Here's an example with a first and last name variable:
You can create another interface, such as one for the sport Quidditch, and have it inherit the information from the Wizard interface.
Classes can also be used in a similar way to interfaces but with the added functionality of creating constructors and methods.
Generics are reusable components in TypeScript that can work with different data types while maintaining type safety. They allow you to create flexible and reusable functions or classes without specifying a fixed data type, ensuring code is adaptable and type-safe.
In this code, we have a generic function starTrek that accepts a parameter entry of type Array<T> and returns an array of the same type Array<T>. The <T> denotes the generic type, allowing the function to work with different data types within an array while maintaining type safety.
We then call the function with an array containing a number, a string, and a boolean, demonstrating its flexibility and reusability.
Generics are useful when you do not know the variable types that will be returned, as they allow your code to be adaptable, reusable, and type-safe, ensuring a more robust and maintainable codebase.
To set up and run the TypeScript Compiler (tsc), follow these steps:
- Install TypeScript globally using npm: npm install -g typescript
- Create a TypeScript file, for example, example.ts
- To set up the TypeScript compiler to run continuously while you're developing, use the --watch flag: tsc example.ts --watch
This command will start the TypeScript compiler in watch mode, which means it will continuously monitor the example.ts file for changes and recompile the file whenever it detects any changes, checking for code and type errors in the process.
You can further customize the tsconfig.json file with additional options depending on your project's requirements.
Start learning TypeScript
To start learning TypeScript, follow these actionable steps:
- Visit the TypeScript official documentation: https://www.typescriptlang.org/docs/
- Take the free Scrimba course by Dylan Israel: https://www.youtube.com/watch?v=Z7O5pQwCmqI&t=21s
- Join TypeScript-related forums or communities for support and networking.
By following these steps and utilizing the provided resources, you'll be well on your way to mastering TypeScript and enhancing your web development skills!
Be sure to listen to the episode!
Episode 249 Do You Need To Learn TypeScript in 2023?
Be sure to check out HTML All The Things on socials!
- Learn to code using Scrimba with their interactive follow-along code editor
- Join their exclusive discord communities and network to find your first job!
- Use this URL to get 10% off on all their paid plans: tinyurl.com/ScrimbaHATT
This article contains affiliate links, which means we may receive a commission on any purchases made through these links at no additional cost to you. This helps support our work and allows us to continue providing valuable content. Thank you for your support!
My other HTML All The Things articles
- How to Transition from JR Dev to an In-Demand Developer: Your Path to Getting Hired
- How to Get Started Learning Web Development from Scratch
Learning TypeScript enhances your web development skills by providing static typing, improved tooling, and robust code maintainability. It will also open doors to more job opportunities and give you a competitive advantage!
Begin by learning the basics and gradually incorporate more advanced features to enhance your skills and web development career. TypeScript basics include static typing, interfaces and classes, generics, and type inference.
Remember that TypeScript needs to be compiled because the browser cannot directly read it! To compile TypeScript, use the TypeScript Compiler (tsc) and configure it with a tsconfig.json file.
To get started with learning TypeScript, you can take this FREE Scrimba course taught by tech celebrity Dylan Israel! Intro to Typescript Tutorial with Dylan Israel
You can read all of my articles on selftaughttxg.com