Typescript. Основы

Agenda

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

Что такое typescript

Путь 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

07. Typescript

By vitalic gorodkov

07. Typescript

  • 144

More from vitalic gorodkov