![Arrays
To specify the type of an array like [1, 2, 3], you can use the syntax
number[];
this syntax works for any type (e.g. string[] is an array of strings, and so on).
You may also see this written as Array<number>, which means the same thing.](https://image.slidesharecdn.com/typescript21-240830110605-fee5cf0d/85/TypeScript-ppt-LPU-Notes-Lecture-PPT-for-2024-4-320.jpg)
TypeScript.ppt LPU Notes Lecture PPT for 2024
- 2. The Primitives • The most basic and common types you might encounter when writing JavaScript or TypeScript code. These will later form the core building blocks of more complex types.
- 3. The primitives: string, number, and boolean • JavaScript has three very commonly used primitives: • string, • number, • and boolean. • Each has a corresponding type in TypeScript. • string represents string values like "Hello, world" • number is for numbers like 42. JavaScript does not have a special runtime value for integers, so there’s no equivalent to int or float - everything is simply number • boolean is for the two values true and false
- 4. Arrays To specify the type of an array like [1, 2, 3], you can use the syntax number[]; this syntax works for any type (e.g. string[] is an array of strings, and so on). You may also see this written as Array<number>, which means the same thing.
- 5. any • TypeScript also has a special type, any, that you can use whenever you don’t want a particular value to cause typechecking errors. • When a value is of type any, you can access any properties of it (which will in turn be of type any), call it like a function, assign it to (or from) a value of any type, or pretty much anything else that’s syntactically legal:
- 6. noImplicitAny •When you don’t specify a type, and TypeScript can’t infer it from context, the compiler will typically default to any. •You usually want to avoid this, though, because any isn’t type-checked. Use the compiler flag noImplicitAny to flag any implicit any as an error.
- 7. Type Annotations on Variables • When you declare a variable using const, var, or let, you can optionally add a type annotation to explicitly specify the type of the variable: • In most cases, though, this isn’t needed. Wherever possible, TypeScript tries to automatically infer the types in your code. For example, the type of a variable is inferred based on the type of its initializer:
- 8. Functions • Functions are the primary means of passing data around in JavaScript. TypeScript allows you to specify the types of both the input and output values of functions.
- 9. Parameter Type Annotations • When you declare a function, you can add type annotations after each parameter to declare what types of parameters the function accepts. Parameter type annotations go after the parameter name:
- 10. • When a parameter has a type annotation, arguments to that function will be checked:
- 11. Return Type Annotations • You can also add return type annotations. Return type annotations appear after the parameter list: • Much like variable type annotations, you usually don’t need a return type annotation because TypeScript will infer the function’s return type based on its return statements. The type annotation in the above example doesn’t change anything. Some codebases will explicitly specify a return type for documentation purposes, to prevent accidental changes, or just for personal preference. ill infer the function’s return type based on its return statements. The type annotation in the above example doesn’t change anything. Some codebases will explicitly specify
- 12. Anonymous Functions • Anonymous functions are a little bit different from function declarations. When a function appears in a place where TypeScript can determine how it’s going to be called, the parameters of that function are automatically given types. Here’s an example:
- 13. • Even though the parameter s didn’t have a type annotation, TypeScript used the types of the forEach function, along with the inferred type of the array, to determine the type s will have. • This process is called contextual typing because the context that the function occurred within informs what type it should have. • Similar to the inference rules, you don’t need to explicitly learn how this happens, but understanding that it does happen can help you notice when type annotations aren’t needed.
- 14. Object Types • Apart from primitives, the most common sort of type you’ll encounter is an object type. This refers to any JavaScript value with properties, which is almost all of them! To define an object type, we simply list its properties and their types. For example, here’s a function that takes a point-like object: • The type part of each property is also optional. If you don’t specify a type, it will be assumed to be any. The type part of each property is also optional. If you don’t specify a type, it will be assumed to be any.
- 15. Optional Properties • Object types can also specify that some or all of their properties are optional. To do this, add a ? after the property name:
- 16. • In JavaScript, if you access a property that doesn’t exist, you’ll get the value undefined rather than a runtime error. Because of this, when you read from an optional property, you’ll have to check for undefined before using it.
- 17. Interfaces • An interface declaration is another way to name an object type: Just like when we used a type alias above, the example works just as if we had used an anonymous object type. TypeScript is only concerned with the structure of the value we passed to printCoord - it only cares that it has the expected properties. Being concerned only with the structure and capabilities of types is why we call TypeScript a structurally typed type system.
- 18. Differences Between Type Aliases and Interfaces • Type aliases and interfaces are very similar, and in many cases you can choose between them freely. • Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.
- 20. Type Assertions • Sometimes you will have information about the type of a value that TypeScript can’t know about. For example, if you’re using document.getElementById, TypeScript only knows that this will return some kind of HTMLElement, but you might know that your page will always have an HTMLCanvasElement with a given ID. In this situation, you can use a type assertion to specify a more specific type:
- 21. • TypeScript only allows type assertions which convert to a more specific or less specific version of a type. This rule prevents “impossible” coercions like: • Sometimes this rule can be too conservative and will disallow more complex coercions that might be valid. If this happens, you can use two assertions, first to any (or unknown, which we’ll introduce later), then to the desired type: too conservative and will disallow more complex coercions that might be valid. If this happens, you can use two assertions, first to any (or unknown, which we’ll introduce late
- 22. Source TypeScript: Documentation - Everyday Types (typescriptlang.org) https://www.typescriptlang.org/docs/handbook/2/everyday-types.htm l#anonymous-functions