Jumping From Javascript To Typscript Concept Should be Known

really u want to learn ?
seriously !
let's begin,

Here’s a list of concepts to be aware of:

1.Types and Type Annotations

• Basic Types: Understand the difference between string, number, boolean, any, void, undefined, null, etc.

• Type Annotations: Learn how to declare types explicitly (e.g., let age: number = 30;).

• Type Inference: TypeScript can infer types from context, but understanding when to use explicit types and when to rely on inference is important.

• Union Types: Types can be a combination of multiple types (e.g., let value: string | number).

• Literal Types: Types that can be specific values (e.g., let direction: 'left' | 'right';).

2. Interfaces and Type Aliases

• Interfaces: Used to define object shapes (e.g., interface User { name: string; age: number }).
• Type Aliases: Allows you to create custom types (e.g., type ID = string | number;).
• Differences between Interfaces and Types: Interfaces are extendable, while type aliases are more flexible (can define primitives, unions, intersections, etc.).

3. Generics

• Generic Functions: Functions that can work with multiple types (e.g., function identity(arg: T): T { return arg; }).
• Generic Interfaces/Classes: Apply generics to interfaces and classes (e.g., interface Box { value: T; }).

4. Type Assertion and Casting

• Type Assertions: Tells TypeScript that you know more about the type than it does (e.g., let value = someValue as string).
• Non-Null Assertion: Use ! to tell TypeScript that a value is not null or undefined (e.g., someVar!.doSomething()).

5. Structural Typing (Duck Typing)
In TypeScript, types are structural, meaning that types are compared based on their properties, not their names. If two types have the same structure, they are considered the same type.

6. Enums

• Numeric and String Enums: Allows you to define a set of named constants (e.g., enum Direction { Up, Down, Left, Right }).
• Const Enums: A more efficient form of enums when no reverse mapping is needed (e.g., const enum Color { Red, Green, Blue }).

7. Type Narrowing

• Type Guards: Use typeof, instanceof, or custom type predicates to narrow down the type of a variable.
• Discriminated Unions: Combining union types with a common property (discriminator) to narrow down types (e.g., type Circle = { kind: "circle"; radius: number };).

8. Advanced Types

• Intersection Types: Combine multiple types into one (e.g., type AdminUser = User & Admin;).
• Mapped Types: Allows you to transform properties in a type (e.g., type ReadOnly = { readonly [P in keyof T]: T[P]; }). Utility Types: Built-in types that simplify common type transformations, such as Partial, Pick, Omit, Record, etc.

9. Modules and Namespaces

• ES Modules: TypeScript supports ES6 module syntax (e.g., import/export). Understanding module resolution and the difference between default and named exports is essential.
• Namespaces: TypeScript also has its own namespace system, but it's generally discouraged in favor of ES modules for modern codebases.

10. Handling JavaScript Libraries

• DefinitelyTyped: Learn how to install and use type definitions for JavaScript libraries that don't provide their own types (e.g., via @types/lodash).
• Declaring Types for 3rd-Party Libraries: Know how to write custom type declarations (*.d.ts files) for libraries or global objects when no types are available.

11. Classes and Inheritance

• TypeScript Classes: Similar to JavaScript classes but with additional type-checking.
• Access Modifiers: public, private, protectedkeywords control the visibility of class members.
• Readonly: Marks properties as read-only (e.g., readonly id: number).
• Abstract Classes and Methods: Abstract classes cannot be instantiated directly and are meant to be subclassed.

12. Async/Await and Promises
TypeScript has full support for async/await and Promises, but adding type annotations can help avoid issues with types like Promise or async function.

13. Decorators
Experimental Feature: Decorators are a special syntax for annotating or modifying classes and class members. Useful in frameworks like Angular, but still experimental in TypeScript.

14. Strict Type-Checking Options

• Strict Mode: Enables stricter type-checking options (e.g., strictNullChecks, noImplicitAny).
• tsconfig.json: Learn how to configure TypeScript using this file to enable or disable compiler options.

15. TypeScript and JavaScript Interoperability

• Working with JavaScript Code: TypeScript is fully compatible with JavaScript. You can gradually introduce TypeScript into an existing JavaScript project and still call JavaScript from TypeScript and vice versa.
• JSDoc Comments: You can use JSDoc-style comments in JavaScript to provide type information to TypeScript, which is useful in mixed JS/TS codebases.

16. Error Handling
TypeScript helps catch common errors at compile time, such as accessing properties on null or undefined. Understanding how to use try/catch in TypeScript, along with proper type annotations, is important.

17. TypeScript Configuration (tsconfig.json)

• Compiler Options: Learn how to configure compiler settings, including module resolution, strictness settings, and target environments.
• Source Maps: Set up source maps to make debugging TypeScript in the browser or Node.js easier.

18. Utility Functions and Types

• keyof, typeof, instanceof: Understand these utility operators and how to use them to extract and manipulate types.
• Index Signatures: Allow you to define the types of keys and values for objects dynamically (e.g., [key: string]: any).

19. Conditional Types
TypeScript allows defining types based on conditions (e.g., type IsString = T extends string ? true : false;).

20. TypeScript Versioning and Compatibility

• New Features: Stay updated with new TypeScript versions, as it’s a rapidly evolving language. New features like template literal types, type predicates, and stricter type checking can improve your code.

By mastering these TypeScript-specific concepts, you'll be able to leverage the full power of TypeScript, including its static type system, for improved code quality, maintainability, and scalability compared to plain JavaScript.

want to know more about me, just write sallbro on search engine...

The above is the detailed content of Jumping From Javascript To Typscript Concept Should be Known. For more information, please follow other related articles on the PHP Chinese website!