sudo npm i -g typescript
tsc -v
tsc --watch index
tsc --init
npx create-react-app . --template typescript
Last active
May 18, 2022 11:50
-
-
Save hamzaajaved/746c4d473c4a52792a30103f76c7f7f2 to your computer and use it in GitHub Desktop.
TypeScript Crash Course
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Basic Types | |
| let id: number = 5 | |
| let company: string = 'Traversy Media' | |
| let isPublished: boolean = true | |
| let x: any = 'Hello' | |
| // Built in Objects | |
| let now:Date = new Date() | |
| let ids: number[] = [1, 2, 3, 4, 5] | |
| let arr: any[] = [1, true, 'Hello'] | |
| // Tuple | |
| let person: [number, string, boolean] = [1, 'Brad', true] | |
| // Tuple Array | |
| let employees: [number, string][] | |
| employee = [ | |
| [1, 'Brad'], | |
| [2, 'John'], | |
| [3, 'Jill'], | |
| ] | |
| // Union | |
| let pid: string | number | |
| pid = '22' | |
| // Enum | |
| enum Direction1 { | |
| Up = 1, | |
| Down, | |
| Left, | |
| Right, | |
| } | |
| enum Direction2 { | |
| Up = 'Up', | |
| Down = 'Down', | |
| Left = 'Left', | |
| Right = 'Right', | |
| } | |
| // Objects | |
| type User = { | |
| id: number | |
| name: string | |
| } | |
| const user: User = { | |
| id: 1, | |
| name: 'John', | |
| } | |
| // Type Assertion | |
| let cid: any = 1 | |
| // let customerId = <number>cid | |
| let customerId = cid as number | |
| // Functions | |
| function addNum(x: number, y: number): number { | |
| return x + y | |
| } | |
| // Void | |
| function log(message: string | number): void { | |
| console.log(message) | |
| } | |
| // Interfaces | |
| // Interfaces in TypeScript are used to define the structure of an Object | |
| interface UserInterface { | |
| readonly id: number | |
| name: string | |
| age?: number | |
| } | |
| const user1: UserInterface = { | |
| id: 1, | |
| name: 'John', | |
| } | |
| interface MathFunc { | |
| (x: number, y: number): number | |
| } | |
| const add: MathFunc = (x: number, y: number): number => x + y | |
| const sub: MathFunc = (x: number, y: number): number => x - y | |
| interface PersonInterface { | |
| id: number | |
| name: string | |
| register(): string | |
| } | |
| // Classes | |
| class Person implements PersonInterface { | |
| id: number | |
| name: string | |
| constructor(id: number, name: string) { | |
| this.id = id | |
| this.name = name | |
| } | |
| register() { | |
| return `${this.name} is now registered` | |
| } | |
| } | |
| const brad = new Person(1, 'Brad Traversy') | |
| const mike = new Person(2, 'Mike Jordan') | |
| // Subclasses | |
| class Employee extends Person { | |
| position: string | |
| constructor(id: number, name: string, position: string) { | |
| super(id, name) | |
| this.position = position | |
| } | |
| } | |
| const emp = new Employee(3, 'Shawn', 'Developer') | |
| // Generics | |
| function getArray<T>(items: T[]): T[] { | |
| return new Array().concat(items) | |
| } | |
| let numArray = getArray<number>([1, 2, 3, 4]) | |
| let strArray = getArray<string>(['brad', 'John', 'Jill']) | |
| strArray.push(1) // Throws error |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Array | |
| // last | |
| // makeArr: 2 generics, return, overwrite inference, default value | |
| // addFullName: extends | |
| // interfaces | |
| // props | |
| // useState | |
| // jsx generic | |
| const last = <T>(arr: T[]): T => { | |
| return arr[arr.length - 1]; | |
| }; | |
| const l = last([1, 2, 3]); | |
| const l2 = last<string>(["a", "b", "c"]); | |
| const makeArr = <X, Y>(x: X, y: Y): [X, Y] => { | |
| return [x, y]; | |
| }; | |
| const v = makeArr(5, 6); | |
| const v2 = makeArr("a", "b"); | |
| const v3 = makeArr<string | null, number>("a", 5); | |
| const makeFullName = <T extends { firstName: string; lastName: string }>( | |
| obj: T | |
| ) => { | |
| return { | |
| ...obj, | |
| fullName: obj.firstName + " " + obj.lastName | |
| }; | |
| }; | |
| const v4 = makeFullName({ firstName: "bob", lastName: "junior", age: 15 }); | |
| // const v5 = makeFullName({ another: "bob", lastName: "junior", age: 15 }); | |
| interface Tab<T> { | |
| id: string; | |
| position: number; | |
| data: T; | |
| } | |
| type NumberTab = Tab<number>; | |
| type StringTab = Tab<string>; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useState } from "react"; | |
| interface Props { | |
| name: string; | |
| } | |
| const HelloWorld: React.FC<Props> = ({ name }) => { | |
| const [state] = useState<{ fullname: string | null }>({ fullname: "" }); | |
| return <div>hello {name}</div>; | |
| }; | |
| interface FormProps<T> { | |
| values: T; | |
| children: (values: T) => JSX.Element; | |
| } | |
| const Form = <T extends {}>({ values, children }: FormProps<T>) => { | |
| return children(values); | |
| }; | |
| const App: React.FC = () => { | |
| return ( | |
| <div className="App"> | |
| <Form<{ lastName: string | null }> values={{ lastName: "" }}> | |
| {values => <div>{values.lastName}</div>} | |
| </Form> | |
| </div> | |
| ); | |
| }; | |
| export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment