[TypeScript] Union Types and Type Aliases in TypeScript
Sometimes we want our function arguments to be able to accept more than 1 type; e.g. a string or an array. This lesson will show us how to assign more than 1 type to a variable with Typescript union types and type aliases.
type types = string | boolean | number; var fn = (sm: types) => sm; fn("something"); //OK fn(false); //OK fn(10); //OK fn([2,2,3]) //Error
Union Type:
var fn = (sm: string | boolean | number) => sm;
But it took many places, so to make it shorter, we use Typoe aliases:
type types = string | boolean | number; var fn = (sm: types) => sm;
'typeof' and 'instanceof':
type types = string | boolean | number | string[]; var fn2 = (something: types) => { if(typeof something === "string" || typeof something === "boolean" || typeof something === "number"){ console.log(something); } if(something instanceof Array){ let str = ""; something.forEach(s => { str += s; }) } }
Using 'isntaceof', so Typescript understand 'something' is Array type, it will pop up the methods which array can use for.
If we use put unit type as "string" or "object" and try to access the object prop, will throw error:
type stuff = string |{name: string} var fn3 = (something: stuff) => { console.log(something.name) // compile error }
If we put tow object in unit type, but they don't share the same prop:
type objs = {age: number} | {name: string}; var fn4 = (something: objs) => { console.log(something.age); // compile error console.log(something.name); // compile error }
Last if the unit types are objects and share the same prop:
type sharePropObjs = {name: string, age: number} | {name: string, address: string}; var fn4 = (something: sharePropObjs) => { console.log(something.age); // compile error console.log(something.address); // compile error console.log(something.name); // OK }
To review, the Union type is defined by adding an Or pipe. The Type alias is kind of like a bar, except you're defining a type, not a variable. As of now, we have Type of and Instance of for type cards. Type cards let us differentiate between types and allow TypeScript to know what those types are.
If you Union type Objects with Not Objects, the compiler gets mad. If you Union type Objects without a common parameter, the compiler gets mad. If you Union type Objects with a common parameter, you can access that common parameter.
相关文章
- [Typescript] Use Generics in a Reduce Function
- [Typescript] Different types for Getter / Setter in a class
- [Typescript] Zod in actions
- [Typescript] Making TypeScript Stick - 5 - Extends
- [React Typescript 2022] Type a Radio Button Component in React using TypeScript
- [Typescript] Dynamic types: Use TypeScript's Mapped Types and Template Literal Types Together
- [Typescript] Create Type From Any Given Data in TypeScript
- [Vuex] Use Namespaces in Vuex Stores using TypeScript
- [TypeScript] Catch unsafe use of "this" in TypeScript functions
- [Typescript] Zod in actions
- [Typescript] Function scope in typescript
- [Typescript + React] Tip: Use generics in React to make dynamic and flexible components
- [React Typescript 2022] Type a Radio Button Component in React using TypeScript
- [React Typescript 2022] Refactor a React Component using TypeScript
- [Typescript] Prevent Type Widening of Object Literals with TypeScript's const Assertions
- [Vue + TS] Watch for Changes in Vue Using the @Watch Decorator with TypeScript
- [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript
- [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript
- [TypeScript] Union Types and Type Aliases in TypeScript
- [TypeScript] Understanding Generics with RxJS