├── .gitignore ├── 1_types.ts ├── 2_interfaces.ts ├── 3_enum.ts ├── 4_functions.ts ├── 5_classes.ts ├── 6_guards.ts ├── 7_generic.ts └── 8_operators.ts /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | -------------------------------------------------------------------------------- /1_types.ts: -------------------------------------------------------------------------------- 1 | const isFetching: boolean = true 2 | const isLoading: boolean = false 3 | 4 | const int: number = 42 5 | const float: number = 4.2 6 | const num: number = 3e10 7 | 8 | const message: string = 'Hello Typescript' 9 | 10 | const numberArray: number[] = [1, 1, 2, 3, 5, 8, 13] 11 | const numberArray2: Array = [1, 1, 2, 3, 5, 8, 13] 12 | 13 | const words: string[] = ['Hello', 'Typescript'] 14 | 15 | // Tuple 16 | const contact: [string, number] = ['Vladilen', 1234567] 17 | 18 | // Any 19 | let variable: any = 42 20 | // ... 21 | variable = 'New String' 22 | variable = [] 23 | 24 | // ==== 25 | function sayMyName(name: string): void { 26 | console.log(name) 27 | } 28 | sayMyName('Хайзенберг') 29 | 30 | // Never 31 | function throwError(message: string): never { 32 | throw new Error(message) 33 | } 34 | 35 | function infinite(): never { 36 | while (true) { 37 | 38 | } 39 | } 40 | 41 | // Type 42 | type Login = string 43 | 44 | const login: Login = 'admin' 45 | // const login2: Login = 2 46 | 47 | type ID = string | number 48 | const id1: ID = 1234 49 | const id2: ID = '1234' 50 | // const id3: ID = true 51 | 52 | type SomeType = string | null | undefined 53 | -------------------------------------------------------------------------------- /2_interfaces.ts: -------------------------------------------------------------------------------- 1 | interface Rect { 2 | readonly id: string 3 | color?: string 4 | size: { 5 | width: number 6 | height: number 7 | } 8 | } 9 | 10 | const rect1: Rect = { 11 | id: '1234', 12 | size: { 13 | width: 20, 14 | height: 30 15 | }, 16 | color: '#ccc' 17 | } 18 | 19 | const rect2: Rect = { 20 | id: '12345', 21 | size: { 22 | width: 10, 23 | height: 5 24 | } 25 | } 26 | 27 | rect2.color = 'black' 28 | // rect2.id = '3232' 29 | 30 | const rect3 = {} as Rect 31 | const rect4 = {} 32 | 33 | // ===================== 34 | 35 | interface RectWithArea extends Rect { 36 | getArea: () => number 37 | } 38 | 39 | const rect5: RectWithArea = { 40 | id: '123', 41 | size: { 42 | width: 20, 43 | height: 20 44 | }, 45 | getArea(): number { 46 | return this.size.width * this.size.height 47 | } 48 | } 49 | 50 | // ================== 51 | 52 | interface IClock { 53 | time: Date 54 | setTime(date: Date): void 55 | } 56 | 57 | class Clock implements IClock { 58 | time: Date = new Date() 59 | 60 | setTime(date: Date): void { 61 | this.time = date 62 | } 63 | } 64 | 65 | // ================= 66 | 67 | interface Styles { 68 | [key: string]: string 69 | } 70 | 71 | const css: Styles = { 72 | border: '1px solid black', 73 | marginTop: '2px', 74 | borderRadius: '5px' 75 | } 76 | 77 | 78 | -------------------------------------------------------------------------------- /3_enum.ts: -------------------------------------------------------------------------------- 1 | enum Membership { 2 | Simple, 3 | Standard, 4 | Premium 5 | } 6 | 7 | const membership = Membership.Standard 8 | const membershipReverse = Membership[2] 9 | 10 | console.log(membership) 11 | console.log(membershipReverse) 12 | 13 | enum SocialMedia { 14 | VK = 'VK', 15 | FACEBOOK = 'FACEBOOK', 16 | INSTAGRAM = 'INSTAGRAM' 17 | } 18 | 19 | const social = SocialMedia.INSTAGRAM 20 | console.log(social) 21 | -------------------------------------------------------------------------------- /4_functions.ts: -------------------------------------------------------------------------------- 1 | function add(a: number, b: number): number { 2 | return a + b 3 | } 4 | 5 | function toUpperCase(str: string): string { 6 | return str.trim().toUpperCase() 7 | } 8 | 9 | interface MyPosition { 10 | x: number | undefined 11 | y: number | undefined 12 | } 13 | 14 | interface MyPositionWithDefault extends MyPosition { 15 | default: string 16 | } 17 | 18 | function position(): MyPosition 19 | function position(a: number): MyPositionWithDefault 20 | function position(a: number, b: number): MyPosition 21 | 22 | function position(a?: number, b?: number) { 23 | if (!a && !b) { 24 | return {x: undefined, y: undefined} 25 | } 26 | 27 | if (a && !b) { 28 | return {x: a, y: undefined, default: a.toString()} 29 | } 30 | 31 | return {x: a, y: b} 32 | } 33 | 34 | console.log('Empty: ', position()) 35 | console.log('One param: ', position(42)) 36 | console.log('Two params: ', position(10, 15)) 37 | -------------------------------------------------------------------------------- /5_classes.ts: -------------------------------------------------------------------------------- 1 | class Typescript { 2 | version: string 3 | 4 | constructor(version: string) { 5 | this.version = version 6 | } 7 | 8 | info(name: string) { 9 | return `[${name}]: Typescript version is ${this.version}` 10 | } 11 | } 12 | 13 | // class Car { 14 | // readonly model: string 15 | // readonly numberOfWheels: number = 4 16 | // 17 | // constructor(theModel: string) { 18 | // this.model = theModel 19 | // } 20 | // } 21 | 22 | class Car { 23 | readonly numberOfWheels: number = 4 24 | constructor(readonly model: string) {} 25 | } 26 | // ============== 27 | 28 | 29 | class Animal { 30 | protected voice: string = '' 31 | public color: string = 'black' 32 | 33 | constructor() { 34 | this.go() 35 | } 36 | 37 | private go() { 38 | console.log('Go') 39 | } 40 | } 41 | 42 | class Cat extends Animal { 43 | public setVoice(voice: string): void { 44 | this.voice = voice 45 | } 46 | } 47 | 48 | const cat = new Cat() 49 | cat.setVoice('test') 50 | console.log(cat.color) 51 | // cat.voice 52 | 53 | // ===================== 54 | 55 | abstract class Component { 56 | abstract render(): void 57 | abstract info(): string 58 | } 59 | 60 | class AppComponent extends Component { 61 | render(): void { 62 | console.log('Component on render') 63 | } 64 | 65 | info(): string { 66 | return 'This is info'; 67 | } 68 | } 69 | 70 | -------------------------------------------------------------------------------- /6_guards.ts: -------------------------------------------------------------------------------- 1 | function strip(x: string | number) { 2 | if (typeof x === 'number') { 3 | return x.toFixed(2) 4 | } 5 | return x.trim() 6 | } 7 | 8 | class MyResponse { 9 | header = 'response header' 10 | result = 'response result' 11 | } 12 | 13 | class MyError { 14 | header = 'error header' 15 | message = 'error message' 16 | } 17 | 18 | function handle(res: MyResponse | MyError) { 19 | if (res instanceof MyResponse) { 20 | return { 21 | info: res.header + res.result 22 | } 23 | } else { 24 | return { 25 | info: res.header + res.message 26 | } 27 | } 28 | } 29 | 30 | // =================== 31 | 32 | type AlertType = 'success' | 'danger' | 'warning' 33 | 34 | function setAlertType(type: AlertType) { 35 | // .... 36 | } 37 | 38 | setAlertType('success') 39 | setAlertType('warning') 40 | 41 | // setAlertType('default') 42 | -------------------------------------------------------------------------------- /7_generic.ts: -------------------------------------------------------------------------------- 1 | const arrayOfNumbers: Array = [1, 1, 2, 3, 5] 2 | const arrayOfStrings: Array = ['Hello', 'Vladilen'] 3 | 4 | 5 | function reverse(array: T[]): T[] { 6 | return array.reverse() 7 | } 8 | 9 | reverse(arrayOfNumbers) 10 | reverse(arrayOfStrings) 11 | 12 | -------------------------------------------------------------------------------- /8_operators.ts: -------------------------------------------------------------------------------- 1 | interface Person { 2 | name: string 3 | age: number 4 | } 5 | 6 | type PersonKeys = keyof Person // 'name' | 'age' 7 | 8 | let key: PersonKeys = 'name' 9 | key = 'age' 10 | 11 | type User = { 12 | _id: number 13 | name: string 14 | email: string 15 | createdAt: Date 16 | } 17 | 18 | type UserKeysNoMeta1 = Exclude // 'name' | 'email' 19 | type UserKeysNoMeta2 = Pick // 'name' | 'email' 20 | 21 | 22 | let u1: UserKeysNoMeta1 = 'name' 23 | // u1 = '_id' 24 | --------------------------------------------------------------------------------