Advantage and few Guidelines to use Typescript – React

Well, the world is moving more towards client side scripting. If you are server side developer (Java, C#) then it could be challenging for you to adopt client side scripting (JavaScript) because you raised up in an environment where everything is strongly typed, object oriented, with access-modifiers, abstract and interface things. This is where Typescript came to rescue our server side developing skills and if you want to impress with your server side developing skills in client side scripting then I would greatly suggest Typescript.

JavaScript is loosely typed and dynamic programming language where there are no types involved. When you look at plain JavaScript especially big JavaScript application you will get lost in the middle of somewhere if you are not following the script keenly. Typescript came to rescue from this situation.

You can find an article on Basics of Typescript – Introduction to Typescript. I really find it so useful when we code enterprise level application using client side scripting. Below you can find some key points to keep in mind when creating class which extends React.Component.

· Access Modifiers in React: Access Modifier gives control over members inside a class. It is good practice to mention render method as public and other methods which are accessed only inside the class as private. By default, everything inside a class is public.

· props and states defined as Interface: since we use Typescript, we need everything to be strongly typed. Define your props and states in an interface and have all the variables and methods as per your need. before it’s used in your class which extends React.Component.

· static variables and methods: Just like C# you can define static variables and methods inside a class and you can access it by className.methodName

 interface IAppProps {
    name: string;
  }
  
  interface IAppState {
    result: string;
  }
  
  class App extends React.Component<IAppProps, IAppState> {
    private static nameStatic: string = "This is static";
  
    constructor(props: IAppProps) {
      super(props);
      this.state = {
        result: "Fazil"
      };
    }
    public static staticMethod(): void {
      console.log("Inside Static Method", this.nameStatic);
    }
    private sampleFunction(): string {
      return this.state.result;
    }
    componentDidMount() {
      console.log("Did Mount");
   }
    public render(): JSX.Element {
      return (
        <div>
          <div>{this.sampleFunction()}</div>
        </div>
      );
    }
  }
  App.staticMethod();
  export default App;
  
  // For Stateless component, user React.SFC
  interface IAppFooterProps {
    readonly footerValue: string;
  }
  
  export const AppFooter: React.SFC<IAppFooterProps> = (props): JSX.Element => {
    return (
      <footer>
        <p>{props.footerValue}</p>
      </footer>
    );
  };
  

Happy Coding

Ahamed