Những Concepts Cốt Lõi Để Trở Thành Bậc Thầy Của Mọi FrontEnd Frameworks

TypeScript And “Any” Type

TypeScript is a strongly typed programming language that builds on JavaScript, giving you a better ability to detect errors and describe your code. But sometimes you don't know the exact type of value that you're using because it comes from user input or a third-party API. In this case, you want to skip the type checking and allow the value to pass through the compile check. The TypeScript any type is the perfect solution for you because if you use it, the TypeScript compiler will not complain about the type issue. This blog will help you understand the any type in TypeScript, but before doing that, let's begin with some basic concepts! What is TypeScript? TypeScript checks a program for errors before execution and does so based on the kinds of values; it’s a static type checker. Superset of JavaScript TypeScript is a language that is a superset of JavaScript: JS syntax is, therefore, legal TS. However, TypeScript is a typed superset that adds rules about how different kinds of values can be used. Runtime Behavior TypeScript is also a programming language that preserves JavaScript's runtime behavior. This means that if you move code from JavaScript to TypeScript, it is guaranteed to run the same way, even if TypeScript thinks the code has type errors. Erased Types Roughly speaking, once TypeScript’s compiler is done with checking your code, it erases the types to produce the resulting compiled code. This means that once your code is compiled, the resulting plain JS code has no type information. An easy way of understanding TypeScript A languageA superset of JavaScriptPreserver the runtime behavior of JavaScriptType checker layer JavaScript + Types = TypeScript Basic typing Type annotations TypeScript uses type annotations to explicitly specify types for identifiers such as variables, functions, objects, etc. // Syntax : type Once an identifier is annotated with a type, it can be used as that type only. If the identifier is used as a different type, the TypeScript compiler will issue an error. let counter: number; counter = 1; counter = 'Hello'; // Error: Type '"Hello"' is not assignable to type 'number'. The following shows other examples of type annotations: let name: string = 'John'; let age: number = 25; let active: boolean = true; // Array let names: string[] = ['John', 'Jane', 'Peter', 'David', 'Mary']; // Object let person: { name: string; age: number }; person = { name: 'John', age: 25 }; // Valid // Function let sayHello : (name: string) => string; sayHello = (name: string) => { return `Hello ${name}`; }; Type inference Type inference describes where and how TypeScript infers types when you don’t explicitly annotate them. For example: // Annotations let counter: number; // Inference: TypeScript will infer the type the `counter` to be `number` let counter = 1; Likewise, when you assign a function parameter a value, TypeScript infers the type of the parameter to the type of the default value. For example: // TypeScript infers type of the `max` parameter to be `number` const setCounter = (max = 100) => { // ... } Similarly, TypeScript infers the return type to the type of the return value: const increment = (counter: number) => { return counter++; } // It is the same as: const increment = (counter: number) : number => { return counter++; } The following shows other examples of type inference: const items = [0, 1, null, 'Hi']; // (number | string)[] const mixArr = [new Date(), new RegExp('\d+')]; // (RegExp | Date)[] const increase = (counter: number, max = 100) => { return counter++; }; // (counter: number, max?: number) => number Contextual typing TypeScript uses the locations of variables to infer their types. This mechanism is known as contextual typing. For example: document.addEventListener('click', (event) => { console.log(event.button); // Valid }); In this example, TypeScript knows that the event the parameter is an instance of MouseEvent because of the click event. However, when you change the click event to the scroll the event, TypeScript will issue an error: document.addEventListener('scroll', (event) => { console.log(event.button); // Compile error }); // Property 'button' does not exist on type 'Event'. TypeScript knows that the event in this case, is an instance of UIEvent, not a MouseEvent. And UIEvent does not have the button property, therefore, TypeScript throws an error. Other examples of contextual typing // Array members const names = ['John', 'Jane', 'Peter', 'David', 'Mary']; // string[] names.map(name => name.toUpperCase()); // (name: string) => string // Type assertions const myCanvas = document.getElementById('main-canvas') as HTMLCanvasElement; Type inference vs Type annotations Type inferenceType annotationsTypeScript guesses the typeYou explicitly tell TypeScript the type What exactly is TypeScript any? When you don’t explicitly annotate and TypeScript can't infer exactly the type, that means you declare a variable without specifying a type, TypeScript assumes that you use the any type. This practice is called implicit typing. For example: let result; // Variable 'result' implicitly has an 'any' type. So, what exactly is any? TypeScript any is a particular type that you can use whenever you don't want a particular value to cause type-checking errors. That means the TypeScript compiler doesn't complain or issue any errors. When a value is of type any, you can access any properties of it, call it like a function, assign it to (or from) a value of any type, or pretty much anything else that’s syntactically legal: let obj: any = { x: 0 }; // None of the following lines of code will throw compiler errors. // Using `any` disables all further type checking, and it is assumed // you know the environment better than TypeScript. obj.foo(); obj(); obj.bar = 100; obj = 'hello'; const n: number = obj; Looking back at an easier-to-understand any: A special type.Skip/Disable type-checking.TypeScript doesn't complain or issue any errors.Default implicit typing is any. Note that to disable implicit typing to the any type, you change the noImplicitAny option in the tsconfig.json file to true. Why does TypeScript provide any type? As described above, while TypeScript is a type checker, any type tells TypeScript to skip/disable type-checking. Whether TypeScript has made a mistake here and why it provides any type? In fact, sometimes the developer can't determine the type of value or can't determine the return value from the 3rd party. In most cases they use any type or implicit typing as any. So they seem to think that TypeScript provides any to do those things. So, is that the root reason that TypeScript provides any? Actually, I think there is a more compelling reason for TypeScript providing any that the any type provides you with a way to work with the existing JavaScript codebase. It allows you to gradually opt-in and opt out of type checking during compilation. Therefore, you can use the any type for migrating a JavaScript project over to TypeScript. Conclusion TypeScript is a Type checker layer. The TypeScript any type allows you to store a value of any type. It instructs the compiler to skip type-checking. Use the any type to store a value when you migrate a JavaScript project over to a TypeScript project. In the next blog, I will show you more about the harmful effects of any and how to avoid them. Hope you like it! See you in the next blog! Reference TypeScript handbookTypeScript tutorial Author: Anh Nguyen

A Better Way To Use Services In React Application

Sometimes you have/want to create and use a service in your application for the DRY principle. But do you know exactly what is a service? And what is the best way to use services in React applications? Hi everyone! It's nice to meet you again in React related series. In the previous article, we discussed about effective state management in React, we learned about Context: what is it? when to use it? One of the use cases is using a context to share a collection of services through the components tree, but what kind of things can be called a service? And how is it integrated into React application? Let's discover the following sections: What is a Service? Service is just a group of helper functions that handle something particularly and can be reused across application, for example: Authentication Service that includes authentication status checking, signing in, signing out, getting user info …Http Service that handles request header, request method, request body … How to use? There are different kinds of implementation and usage, I just provide my favorite one that follows Angular module/services provider concepts. Create a service A service is a JavaScript regular class, nothing related to React. export default class ApiService { constructor() {} _setInterceptors() {} _handleResponse_() {} _handleError_() {} get() {} post() {} put() {} delete() {} } export default class AuthService { constructor() {} isAuthenticated() {} getUserInfo() {} signIn() {} signOut() {} } Create a Context Create a context with provider and pass services as props. import { createContext, useState } from 'react'; import { ApiService, AuthService } from '@services'; const services = { apiService: new ApiService(), authService: new AuthService() }; const AppContext = createContext(); const { Provider } = AppContext; const AppProvider = ({ children }) => { return <Provider value={{ services }}>{children}</Provider>; }; export { AppContext, AppProvider } Use a context Place a context provider at an appropriate scope, all consumers should be wrapped in it. import { AppProvider } from './context/AppContext'; import ComponentA from './components/ComponentA' const App = () => { return ( <AppProvider> <div className="app"> <ComponentA /> </div> </AppProvider> ); }; export default App; Inside a child component, use React hooks useContext to access services as a context value. import { useContext, useEffect } from 'react'; import { AppContext } from '../context/AppContext'; const ChildComponent = () => { const { services: { apiService, authService } } = useContext(AppContext); useEffect(() => { if (authService.isAuthenticated()) { apiService.get(); } }, []); return <></>; } export default ComponentA; Above are simple steps to integrate services with context. But it would be complicated in the actual work. Consider organizing context with approriate level/scope. My recommendation is to have two kinds of service contexts in your application: App Services Context to put all singleton services. Bootstrap it once at root, so only one instance for each is created while having them shared over the component tree.For others, create separate contexts and use them anywhere you want and whenever you need. Alternatives Service is not the only one way to deal with reusable code, it depends on what you intend to do, highly recommend to: Use a custom hook, if you want to do reusable logic and hook into a state.Use a Higher-order component, if you want to do the same logic and then render UI differently. Reference Does React Context replace React Redux?React RetiX - another approach to state management Author: Vi Nguyen

Does React Context Replace React Redux?

Table of contents What is Context?How and when to use a Context?When to use Redux?Does Context replace Redux? context-or-redux-1024x768 As you all know, nowadays, React has become one of the most famous JavaScript libraries in the world. It's easy to learn and use. It comes with a good supply of documentation, tutorials, and training resources. Any developer who comes from a JavaScript background can easily understand and start creating web apps using React in a few days with the main concepts: JSXRendering ElementsComponents and PropsState and LifecycleHandling Events But to become an expert in React, it would take more time. You have to deep dive into advanced things: Higher-Order componentsContextCode-SplittingAvoiding unexpected rerenderEspecially, Effective state management When it comes to state management in React applications, we instantly think about React Redux. This is a favorite and widespread tool across developer's communities and applications. Recently, a lot of questions have come to us about using React Context as an alternative for React Redux. To answer those questions, have a brief of React Context first. What is the context? The context was originally introduced for passing props through the component tree, but since newer versions, React provided the powerful feature that allows updating context from a nested component. Meanwhile, Context can now be a state management tool. Let's see how easy it works? Context with Hooks There are many ways to integrate Context, in this article, I just demo the simplest one Create a context import { createContext } from 'react'; export const ThemeContext = createContext(defaultTheme); So simple, createContext is the built-in function that allows you to create a context with default value. Create a provider A provider allow consuming components to subscribe to context changes const { Provider } = ThemeContext; const ThemeProvider = ( { children } ) => { const theme = { ... }; return <Provider value={{ theme }}>{children}</Provider>; }; Create a consumer The simplest way to subscribe to the context value is to use the useContext hook. export const ThemeInfo = () => { const { theme } = useContext(ThemeContext); return ( <div>backgroundColor: {theme?.background}</div> ); } A consumer must be wrapped inside a Provider if not it would not be noticed and then re-render when context data changes. <App> <ThemeProvider> <ThemeInfo></ThemeInfo> </ThemeProvider> </App> Update the context from a consumer It is sometimes necessary to update the context from consumers, context itself doesn't provide any method to do that, but together with hooks, it can be easy: Use useState to manage context valuesetTime is passed as a callback const { Provider } = ThemeContext; const ThemeProvider = ( { children } ) => { const [theme, setTheme] = useState(defaultTheme); return <Provider value={{ theme, setTheme }}>{children}</Provider>; }; From a consuming component, we can update the context value by executing the callback provided by context export const ButtonChangeTheme = () => { const { setTheme } = useContext(ThemeContext); return ( <button onClick={() => setTheme(newTheme)}>Change</button> ); } Again, don't forget to wrap ButtonChangeTheme consumer inside ThemeProvider <App> <ThemeProvider> <ButtonChangeTheme></ButtonChangeTheme> </ThemeProvider> </App> When to use context? As official guideline Context is designed to share data that can be considered global for a tree of React components. Below are common examples of data that Context can cover: Application configurationsUser settingsAuthenticated userA collection of services How to use context in a better way? As mentioned before, when the context value changes, all consumers that use the context will be immediately re-rendered. So putting it all into one context is not a good decision. Instead, create multi-contexts for different kinds of data. EX: one context for Application configurations, one for Authenticated user and others.Besides separating unrelated contexts, using each in its proper place in the component tree is equally significant.Integrate context adds complexity to our app by creating, providing, and consuming the context, so drilling props through 2-3 levels in a tree component is not a problem(Recommended to use instead of context)Restrictively apply context for high-frequency data updated, because context is not designed for that.​ What about React Redux? Unlike Context, React Redux is mainly designed for state management purposes, and covers it well. However, take a look at some highlights from Redux team: Not all apps need Redux. It's important to understand the kind of application you're building, the kinds of problems that you need to solve, and what tools can best solve the problems you're facing. You'll know when you need Flux. If you aren't sure if you need it, you don't need it. Don't use Redux until you have problems with vanilla React. Those recommendations clearly answer the question: When to use Redux? Conclusion So, Does React Context replace React Redux? The short answer is no, it doesn’t. React Redux and React Context can be used together instead of as alternatives. But how to use them together? It depends. If you understand the main concepts for each: React Context is designed for props drilling, it also has ways to update context data, but is recommended to deal with the simple follow of data changes.Redux is built for state management, especially for the frequently updated states used at many places in the application. Based on that you can easily decide what should be implemented in your application. In the end, try to use Context first, if something is not covered by Context, it's time to use Redux. Enjoy coding! Reference Context official docsRedux FAQ: generalIf you are not interested in using Redux, you can check out React RetiX for a different approach to state management.I can not remember all the sources I have read, but it helps a lot in having comparison between Context and Redux. Thank you and sorry for not listing them all in this article!​ Author: Vi Nguyen

Philippines Business Trip Report: Seminars and School Visits for BA Recruitment

This time, SupremeTech embarked on our very first BA business trip to the Philippines! We visited two cities: Baguio, known for its high altitude, cool climate, and popularity as a study-abroad destination, and Cebu, a well-known tourist spot. Our itinerary consisted of four days in Baguio and three days in Cebu, totaling one week. The primary purposes of this BA business trip were: Visiting language schools for our recruitment of Japanese Business Analysts (BA).Hosting a career seminar for Japanese students interested in working abroad. Through direct conversations with language school staff and students, we gained valuable insights into their genuine concerns and aspirations. It was a truly eye-opening and enriching experience for us. Currently, many students return to Japan for domestic employment after studying abroad, often unable to fully leverage their global mindset. Additionally, when people consider working abroad, they usually look to English-speaking countries, such as Australia or Canada, while opportunities in ASEAN countries—especially emerging economies like Vietnam—remain relatively underexplored. During this BA business trip, our goal was to introduce “working in ASEAN” as a viable career option to language school students and staff, and to encourage them to view their time abroad not just as a study period, but as a stepping stone to a global career. We hope this BA business trip served as a meaningful first step toward expanding their future possibilities. Introducing SupremeTech and the Role of Business Analysts (BA) SupremeTech is a technology company based in Da Nang, Vietnam, specializing in web service development and AI applications. Our core business revolves around offshore development, connecting Japanese clients with talented Vietnamese engineering teams. Among our team, the role of a Japanese BA is especially crucial. BA does more than just translate language; they carefully listen to clients’ needs, organize those requirements into clear specifications, and communicate them effectively to the development team. In essence, they act as a vital bridge between clients and engineers. This role requires not only language skills but also strong logical thinking, cross-cultural understanding, and flexible communication abilities. Many of the Japanese BA thriving at SupremeTech have studied English at language schools in the Philippines. They leverage the skills they gained during their language studies to tackle challenges and build careers in Vietnam. However, it’s also common for language students to return to Japan after their studies and choose domestic employment instead. The international mindset and valuable experience gained through studying abroad in the Philippines can be put to even better use, and our company offers a field where those strengths truly shine. Bringing “Working Abroad” Closer to Everyone The key message we wanted to convey in our seminar was that working overseas in IT companies is not just for a special few—it’s something anyone can pursue. We heard many concerns from both school staff and students, such as: “I’m worried whether my English skills are good enough.”“Can I take on this challenge even without prior industry experience?” What we truly value is not how much skill or experience you have right now, but whether we can grow together moving forward. Nobody is perfect.At the same time, emerging countries like Vietnam offer an environment that allows you to take on new challenges flexibly.We strongly believe that those who are willing to try have the most excellent chances. During the seminar, we shared genuine stories from Japanese people currently working on-site, detailed explanations of the work itself, and the skills required. We hope this helped make the idea of working abroad feel a little more realistic and achievable. Studying abroad is not the goal—it’s just the beginning.We look forward to continuing to explore the career possibilities beyond language study, together. Insights from Our Conversations with Students Through our interactions with language school staff and students who attended our seminar, we came to realize the following: Many people are interested in working abroad, but find it challenging to take the first realistic step.There is a lack of information and opportunities to trigger action.Many of them are seriously focused on their future, and we felt great potential in each one of them. For those who are thinking, “I want to change something” or “I want to take a step forward,”We sincerely hope that this seminar and these conversations have helped give them a little push in the right direction. There is nothing more rewarding than that for us. Why Vietnam? – From the Frontlines of Offshore Development You might be wondering, “Why Vietnam?” or “What’s it like to do offshore development there?” Here are the three main reasons why we have chosen Vietnam as our base: A Practical Solution for Global IT Talent ShortagesWith Japan facing a serious shortage of IT professionals, offshore development with Asian countries has been expanding rapidly. Among them, Vietnam stands out due to its strong compatibility with Japanese business culture, offering a great balance of technical skills, cost efficiency, and talent availability.A Market Full of Opportunities for Young Professionals Vietnam has a relatively young population, with approximately 60% of its population under the age of 35. Its rapidly growing IT market provides many opportunities for young talent to gain hands-on experience early in their careers.Comfort and Cultural Familiarity Vietnam is just two hours ahead of Japan, making communication and coordination easier. The cost of living is relatively affordable, and the culture is friendly and welcoming to Japanese people. Our base city, Da Nang, is renowned for its tranquil environment, surrounded by mountains and the sea, offering a perfect balance between work and personal life. Conclusion This BA business trip and seminar were a significant challenge for us as well. By visiting language schools on-site and directly engaging with students, we gained valuable insights, new learnings, and important connections. We plan to leverage this valuable experience in our future recruitment efforts and continue to nurture strong relationships with language schools. Our key messages remain:“Working overseas isn’t just for special people — anyone can give it a try.” “Opportunities to take on new challenges are often closer than you think.” We will continue to share these messages and deepen our collaboration with schools. We also look forward to future visits and new challenges. We hope to visit the Philippines and interact directly with language school staff and students once again. Above all, we sincerely wish that the connections made during this BA business trip will become a new stepping stone for someone’s career journey. Through these activities, we hope more people will engage with our company and, in the future, become our colleagues. If you are interested in the role of BA or an overseas career, please check out [our recruitment information here].If you'd like to learn more or discuss whether this path is right for you, we also offer casual online meetings. We’re cheering you on as you take on new challenges. Gallery Bagauio API BECI (EOP campus) Our first visit was to API BECI, located on a lush, green hillside. We were impressed by the campus’s clean and well-maintained facilities, which beautifully blend the open, relaxing atmosphere of a resort with a focused, structured learning environment. We discussed the possibility of future collaboration with the student manager. JIC (Premium campus） We had the opportunity to visit JIC’s Premium Campus, nestled in a peaceful, green environment. The campus is spacious and well-equipped with convenient facilities such as a café, gym, and convenience store. The cafeteria, in particular, offered a spacious and open atmosphere with an excellent view. We also enjoyed a buffet-style meal there, which exceeded our expectations in both taste and quantity. Amidst this resort-like comfort, students were highly focused on their studies. JIC offers a variety of unique programs tailored to different levels, goals, and budgets at each of its campuses, and is known for its original curriculum and materials. During our visit, we also had positive discussions with the local team about the possibility of future collaboration on an English × IT learning program, and we’re excited about the potential opportunities that lie ahead. PINES (main campus) Our final stop in Baguio was PINES, one of the well-known language schools. Founded in 2001, the school relocated to a new campus in 2018, providing an even more comfortable and study-friendly environment. The campus is about a 10-minute drive from SM City Baguio, the city’s largest shopping mall, and is surrounded by nature, with lush parks just a short walk away. The school offers a fully integrated environment where classrooms and dormitories are housed in the same building, eliminating the need for commuting. It also features well-equipped shared spaces such as a gym and student lounge, ensuring a comfortable living experience. What stood out to us during the visit was the calm, focused atmosphere throughout the campus. It’s designed for serious learning. Many students are working professionals or individuals preparing for a career change, and we were particularly impressed by their strong sense of purpose and career motivation. CEBU B CEBU Our final visit was to B’Cebu, a language school newly established in 2023 on Mactan Island, Cebu. This promising new campus was founded as a sister school to API BECI, a well-established school with over 20 years of experience in Baguio. Upon arrival, we were immediately struck by the open and refreshing resort-like atmosphere of the campus! The clean and modern school buildings and dormitories are complemented by a full range of lifestyle facilities, including a gym, café, and convenience store, creating an uplifting environment just by being there. In contrast to the calm and focused study atmosphere in Baguio, B’Cebu offers a unique style of study abroad that perfectly blends the relaxed resort vibe, engaging activities, and language learning. A fascinating discovery was the chance to speak directly with the Korean owner. We learned that B’Cebu is part of a group that also operates B’Hoian in Hoi An, Vietnam. Given its geographical proximity to Danang, where our company is based, this connection opens up promising opportunities for future collaboration. Remarkably, the campus even features a dedicated diving pool! Students can obtain diving certification if they want, providing a unique combination of English language learning and resort experience. Meals are served buffet-style, offering a rich variety of options catering to the diverse international students. We had the chance to try the dish ourselves and found it delicious, so much so that it was hard not to eat too much! Curious World Academy (CWA） Our last stop was Curious World Academy. Although the visit was planned on short notice, we had a productive meeting with the manager and toured the school. We got a clear idea of the school’s atmosphere. The school is still relatively new, but it has already gained popularity due to its modern facilities and practical programs. The campus feels calm and focused — a great place for students who want to study seriously but also have time to relax. There’s a swimming pool and other nice facilities, which help students stay comfortable and learn well. Many students are young and seem very serious about their future. This visit gave us great hope and some excellent ideas for the future. Seminar - PINES