• 0

A PHP Error was encountered

Severity: Notice

Message: Undefined index: userid

Filename: views/post.php

Line Number: 190


File: /home2/naijacod/public_html/application/views/post.php
Line: 190
Function: _error_handler

File: /home2/naijacod/public_html/application/controllers/Posts.php
Line: 420
Function: view

File: /home2/naijacod/public_html/index.php
Line: 315
Function: require_once

name Punditsdkoslkdosdkoskdo

Combination of SFC and TypeScript

TypeScript is a typed superset of JavaScript.

It is a wise way to choose the suitable alternative JavaScript developed by Microsoft to bring peace to the world.

The above‐mentioned code using Arrow Function is clear. However, it does not benefit from type definitions of the big project.

So, add an interface definition to SFC:

import * as React from “react”interface WelcomeProps {
 name: string,
const Welcome: React.SFC = (props) => {

Hello, {props.name}

; }

The component defined an interface is more explicit than vanilla functional components. Users of WelcomeComponent can realize that name parameter is a required prop to use it.


If you want to set some default values to props, please use the static method.

import * as React from “react”interface WelcomeProps {
 name?: string, // Change the required prop to an optional prop.
}const Welcome: React.SFC = (props) => {

Hello, {props.name}

; }Welcome.defaultProps = { name: “Guest User”, // This value is adopted when name prop is omitted. }

SFC interface is defined in @types/react/index/d.ts:

type SFC

= StatelessComponent

; interface StatelessComponent

{ (props: P & { children?: ReactNode }, context?: any): ReactElement; propTypes?: ValidationMap

; contextTypes?: ValidationMap; defaultProps?: Partial

; displayName?: string; }

React with TypeScript is a robust solution for web application developers almost without exception.

By using SFC, You can build stateless components clearly without writing Class. Additionally, if you indicate types, JSX will become a friendly script for humans.