1.js

const string =  'Hi Roy';
console.log(string);//logs a string
console.log(string.slice(4));//logs result of the slice method of string

10.ts

/**
 * Interface descrinbing a WordPress post
 */
interface Post {
	title: {
		//This property is always present
		rendered: string;
		//This property is only present in some contexts
		raw?: string;
	},
	id: number;
}

11.js

/**
 * Interface for post title, content and excerpt
 */
interface ContentObject {
	//This property is always present
	rendered: string;
	//This property is only present in some contexts
	raw?: string;
}

/**
 * Interface for describing post title
 */
interface PostTitle extends ContentObject {}
/**
 * Interface for describing post content
 */
interface PostContent extends ContentObject {}
/**
 * Interface for describing post content
 */
interface PostExcerpt extends ContentObject {}

/**
 * Interface descrinbing a WordPress post
 */
interface Post {
	title: PostTitle;
	content: PostContent;
	excerpt: PostExcerpt;
	date: string;
	id: number;
}

12.tsx

const PostTitle = (props: { postTitle: PostTitle}) => (
	<h2>{props.postTitle.rendered}</h2>
);

13.tsx

/**
 * Display A Blog Post
 *
 * @param props
 */
const BlogPost = (props: { post: Post; showContent: boolean }) => {
	const { post, showContent } = props;

	function createMarkup(markup: string) {
		return { __html: markup };
	}
	return (
		<article id={`post-${post.id}`}>
			<h1>{post.title.rendered}</h1>
			<p>Published {moment(post.date).fromNow()}</p>
			<div>
				{showContent ? (
					<div dangerouslySetInnerHTML={createMarkup(post.content.rendered)} />
				) : (
					<div dangerouslySetInnerHTML={createMarkup(post.excerpt.rendered)} />
				)}
			</div>
		</article>
	);
};

15.tsx

/**
 * Display a list of posts
 *
 * @param props
 */
const ListOfPosts = (props: {
	posts: Array<Post>;
	showContent: boolean;
	toggleShowContent: (enable: boolean) => void;
}) => {
	const { posts, showContent, toggleShowContent } = props;
	return (
		<div>
			{/** **/}
		</div>
	);
};

16.tsx

/**
 * Display a list of posts
 *
 * @param props
 */
const ListOfPosts = (props: {
	posts: Array<Post>;
	showContent: boolean;
	toggleShowContent: (enable: boolean) => void;
}) => {
	const { posts, showContent, toggleShowContent } = props;
	return (
		<div>
			<button />
			<Fragment>
				{posts.map((post: Post) => (
					<BlogPost key={post.id} post={post} showContent={showContent} />
				))}
			</Fragment>
		</div>
	);
};

17.tsx

const ListOfPosts = (props: {
	posts: Array<Post>;
	showContent: boolean;
	toggleShowContent: (enable: boolean) => void;
}) => {
	const { posts, showContent, toggleShowContent } = props;
	return (
		<div>
			<button
					onClick={(e:React.FormEvent<HTMLInputElement>) => {
						e.preventDefault();
						toggleShowContent(!showContent);
					}}
				>
				Show Full Content
			</button>
			<Fragment>
				{posts.map((post: Post) => (
					<BlogPost key={post.id} post={post} showContent={showContent} />
				))}
			</Fragment>
		</div>
	);
};

18.tsx

/**
 * Control for remote API URL
 * @param props
 */
const ApiUrl = (props: {
	url: string;
	changeHandler: (newValue: string) => void;
}) => {
	const { url, changeHandler } = props;
	return (
		<div>
			<label htmlFor={'remote-api'}>Remote API URL</label>
			<input
				id={'remote-api'}
				type={'url'}
				value={url}
				onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
					e.preventDefault();
					changeHandler(e.target.value);
				}}
			/>
		</div>
	);
};

2.php

class Post {

	/**
	 * Post ID
	 * 
	 * @var int
	 */
	protected $ID;

	/**
	 * Get post ID
	 *
	 * @return int
	 */
	public function getID() : string
	{
		return $this->ID;
	}

	/**
	 * 
	 * @param int $ID
	 *
	 * @return Post
	 */
	public function setID(int $ID): Post
	{
		$this->ID = $ID;
		return $this;
	}

}

3.php

<?php
interface PostContract {
	/**
	 * Get post ID
	 *
	 * @return int
	 */
	public function getID() : string;

	/**
	 *
	 * @param int $ID
	 *
	 * @return Post
	 */
	public function setID(int $ID): PostContract;
}

4.php

<?php
class Post implements PostContract{

	/**
	 * Post ID
	 *
	 * @var int
	 */
	protected $ID;

	/**
	 * Get post ID
	 *
	 * @return int
	 */
	public function getID() : string
	{
		return $this->ID;
	}

	/**
	 *
	 * @param int $ID
	 *
	 * @return Post
	 */
	public function setID(int $ID): PostContract
	{
		$this->ID = $ID;
		return $this;
	}

}

5.php

<?php
function addFloatToIntegerCastToString(float $a,int $b) : string 
{
	return (string) $a * $b;
}

6.ts

function addFloatToIntegerCastToString(a: number, b: number): string {
	return (a + b).toString();
}

7.sh

npx create-react-app learn-type-script --typescript