Typescript. Основы

Agenda

базовые типы
составные типы
интерфейсы

Что такое typescript

Путь typescript

Typescript

Какие проблемы решает

Проверка со стороны редактора
Автодополнение
Масштабирование
любой JS код = TS код
компиляция в старый формат

Как начать

npm install typescript --save-dev # install

npx tsc # compile

Базовые типы

По аналогии с JSDoc - типы называются с маленькой буквы

Пример

let a: number = 3

a = 'this is a string' // error!

function divide(a: number, b: number){
  return a/b
}

divide(1, {}) // Error

Какие есть базовые типы

number
boolean
string
undefined
null
object
bigint
symbol
void

void - кто такой?

function printName(user: { name: string } ): void {
  console.log(`My name: ${user.name}`)
}

printName({name: 'Nikita'})

void = undefined

Составные типы

Объектный литерал
Интерфейсы
Функции
Утилитарные типы

Объектный литерал

function getName(user: { name: string } ){
  return user.name;
}

type User = { name: string }

function getName_new(user: User){
  return user.name;
}

Опциональные св-ва

type User = {
  name: string
  age?: number
  passExam: boolean | undefined
}

const bogdan: User = {name: 'Bogdan', passExam: true}

const viktor: User = {name: 'Viktor'}

const kate: User = {name: 'Kate', age: 32, passExam: false}

Интерфейсы

interface User {
  name: string
  age?: number
  passExam: boolean | undefined
}

const bogdan: User = {name: 'Bogdan', passExam: true}

const viktor: User = {name: 'Viktor'}

const kate: User = {name: 'Kate', age: 32, passExam: false}

Интерфейсы для чего?

для библиотек
для наследования

Интерфейсы для библиотек?

// library.ts
interface MyInterface {
  prop: number
}

// code.ts
interface MyInterface {
  anotherProp: string
}


let interface: MyInterface = {
  prop: 12,
  anotherProp: 'value',
}

Интерфейсы для наследования?

interface MyInterface {
  prop: number
  myMethod(): number
}

class MyClass implements MyInterface {
  prop = 14

  myMethod(){
    return 4
  }
}

Функции

function callbackExample(cb: (num: number) => void){
  cb(3)
}

callbackExample((val) => { // val: number
  console.log(val) // 3
})

type MyCbFn = (num: number) => void

function callbackExampleNew(cb: MyCbFn){
  cb(3)
}

Утилитарные типы

Parameters
ReturnType
Record
Partial
Required
Omit
Pick

Record

type User = {name: string}

const user: User = {name: 'anonimous' }

user['customField'] // Error!

type User2 = Record<string, string>

type User3 = {
  [key: string]: string
}

const user2: User2 = {name: 'anonimous' }

user2['customField'] // OK

References

Typescript