-
-
Save nyhxiaoning/e30393e8292fa342a9065675adbc2824 to your computer and use it in GitHub Desktop.
Very basic typescript (ts) - https://www.youtube.com/watch?v=ahCwqrYpIuM
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
| # After installing Node (https://nodejs.org/en) | |
| npm i -g typescript | |
| # Check tsc is installed | |
| tsc --version | |
| # Create an index.ts file | |
| echo "console.log('hello world')" > index.ts | |
| # Can't run ts files directly by themselves - have to compile as .js | |
| tsc index.ts | |
| # Or open another bash window and keep index.ts autocompiling (-w / watch) | |
| tsc -w index.ts | |
| # Can then run the .js file in the console | |
| node index.js | |
| # Try installing a module / 3rd party library | |
| npm i lodash | |
| npm i -D @types/lodash |
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 * as lodash from 'lodash'; | |
| // Print to console | |
| console.log("hello world") | |
| console.log("") | |
| // Another way to print to the console, via a function | |
| async function hello() { | |
| return 'wooorld!' | |
| } | |
| // Print the return from hello() to the console | |
| console.log(hello()) | |
| // Create URL class object | |
| const myurl: any = new URL("https://www.google.com") | |
| // Print the content of the myurl object to console | |
| console.log(myurl) | |
| console.log("") | |
| // Print the returns from some lodash functions to the console | |
| console.log(lodash.padStart("Hello TypeScript - this is lodash!", 20, " ")) | |
| console.log(lodash.divide(5, 2)) | |
| // Create variable, infer number variable type | |
| let lucky = 23; | |
| // Assign a new value to lucky (must be number type) | |
| lucky = 24 | |
| // Create variable, allow any variable type | |
| let unlucky: any = 7; | |
| // Assign a new value to unlucky (can be any type) | |
| unlucky = "8" | |
| // Create number variable (strongtyped as number) | |
| let favourite: number = 12; | |
| // Create your own type called Style, which takes 'bold' or 'italic' only | |
| type Style = 'bold' | 'italic'; | |
| let font: Style = 'bold'; | |
| console.log(lucky, unlucky, favourite) | |
| // Create an interface to constrain object shape | |
| // First and last name required, other properties permitted | |
| interface Person { | |
| first: string; | |
| last: string; | |
| [key: string]: any | |
| } | |
| const person1: Person = { | |
| first: 'Jeff', | |
| last: 'Delaney' | |
| } | |
| const person2: Person = { | |
| first: 'Usain', | |
| last: 'Bolt', | |
| fast: true | |
| } | |
| console.log(person1, person2) | |
| // Create strongtyped function | |
| function pow(x:number, y:number): String { | |
| return Math.pow(x, y).toString(); | |
| } | |
| console.log(pow(5, 2)) | |
| // Create empty array that accepts any types | |
| const array1 = [] | |
| // Push some values into the array | |
| array1.push(1) | |
| array1.push('23') | |
| array1.push(false) | |
| // Create an empty array that accepts numbers | |
| const array2: number[] = [] | |
| array2.push(17) | |
| console.log(array1, array2) | |
| // Tuple type with types, one of which is optional | |
| type MyList = [number, string, boolean?] | |
| const array3: MyList = [1, "cat", true] | |
| console.log(array3) | |
| // Typescript generics | |
| class Observable<T> { | |
| constructor(public value: T) {} | |
| } | |
| // Explicitly create Observable of type number | |
| let x: Observable<number>; | |
| // Explicitly create Observable of type Person | |
| let y: Observable<Person>; | |
| // Implicitly create Observable of type number | |
| let z = new Observable(23) | |
| console.log(x, y, z) |
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
Show hidden characters
| { | |
| "compilerOptions": { | |
| "target": "ES6", | |
| "lib": ["DOM", "ES2023"] | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment