Link Search Menu Expand Document
21 Апреля 2024 г.

Typescript. Базовые знания

Содержание

Проблемы javascript

  • Динамические типы (не строгая типизация)
  • Autocomplete
  • Невозможность рефакторинга
  • Невозможность понять структуру данных

Typescript надмножество javascript

Конфигурация

Конфигурация по дефолту tsconfig.json

Простые типы

number,string,boolean

let num:number = 1;
let num2:number = -1;
let num3:number = 54654.67;
let num4:number = NaN;
let num5:number = Infinity;
let str:string = "Строка";
let str2:string = "Строка";
let str3:string = `Строка`;
let bool:boolean = true;
let bool2:boolean = false;
const a:number = 1 + 123;

Функции

Типы лучше всегда указывать явно

function one(a:string, b:boolean): string {
  return 'str';
}
// Стрелочная функция
one = (a:string, b:boolean): string => {
    return 'str';
}

Пример

 enum Status {
    'published' = 'published',
    'draft' = 'draft',
    'deleted' = 'deleted',
}
async function getFaqs(req:{
    topicId:number,
    status: Status}): Promise<
    {
        "question":string,
        "a":string,
        "tags": string[],
        "likes": number
        "status": Status
    }[]> {
    const res = await fetch('/faqs', {
        method: 'POST',
        body: JSON.stringify(req)
    });
    return await res.json();
}

Объект

// Типы на месте
let o: {name:string, age:number} = { name: 'str', age: 20};
let o2: {name: {car: {colors:[string,string]}}} = { name: {car: {colors: ['blue','red']}}}
let o3:{officeId:number, isOpened:boolean,contacts: {phone:string, email: string,address:{city:string}}} = {
    "officeId": 45,
    "isOpened": false,
    "contacts": {
        "phone": "+79100000000",
        "email": "my@email.ru",
        "address": {
            "city": "Москва"
        }
    }
}

Массивы

const a:number[] = [1,2,3,4,5];
let a1: string[] = ['234', 'dgfdfg'];
let a2: number[] = [1,2,3];
let a3: Array<number> = [1,2,3]; // Альтернативная запись
let a31: ReadonlyArray<number> = [1,2,3]; // Альтернативная запись
// Любой тип
const a4:any[] = [1,2,3,4,'str',false];
const a5:[number,string] = [1,'str']; // tuples - точная струкутра массива
const a6:[[string,number,string],string,number] = [['str',1,'str'],'str',1];
// При итерации по массиву typescript будет понимать что это строка
const a7: [number, ...string[]] = [1, 'str', 'str', 'str'] // Неограниченное число строк
const a8: [number, ...string[]] = [1] // Тоже валидный код
const a9: readonly [number, ...string[]] = [1] // Только для чтения

Enum

Ограниченный набор значений. Удобно использовать для ролей пользователей, каких-то ограниченных величин

enum StatusCode {
    SUCCESS = 1,
    INFO = 2,
    FAILED = 3,
    TIMEOUT = () => {return 5},
}

const res = {
    message: 'Hello World!',
    status: StatusCode.SUCCESS,
}

В js это будет функция, что не очень быстро работает.

Если не нужен динамический расчет, то enum может быть константным

const enum StatusCode {
    SUCCESS = 1,
    INFO = 2,
    FAILED = 3
}

const res = {
    message: 'Hello World!',
    status: StatusCode.SUCCESS,
}

На выходе js получаем, что не нужно рассчитывать и это офигенно.

"use strict";
const res = {
    message: 'Hello World!',
    status: 1 /* StatusCode.SUCCESS */,
};

Union

Несколько типов

let ab:boolean|string = 'str';
let bc:number|boolean|string = true;
function log(id: string|number|boolean) { // Любой из указанных типов
    // Cужение типов, конкретный тип в конкретных условиях
    if (typeof id === 'string') {
       console.log(id.charAt());
   } 
}

function logO( obj: {a: number} | {b: number}) {
    if ('a' in obj) {

    }
}

Literal

const t:'post'|'get' = 'get'; // Любое из двух значений
const a:1 = 1; // тип 1
const t1:1|2|7 = 7;
function test(): 1 | "test" { // Функция возвращает либо 1 либо test
    return "test";
}

Алиасы для типов

Дополнительное отображение типов

type httpMethod =  'get' | 'post' | 'put' | 'patch' | 'delete';
const method : httpMethod = 'get';

// Типизция обьекта, удобно переиспользование обьекта
type User = {
    name: number,
    email: number,
    skills: number[]

}
let user:User = {
    name: 1,
    email: 2,
    skills: [1,2,3,4,5,6,7,8,9,10]
}

// Типы можно свмещать друг с другом
type One = {
    id: string,
    name: string,
}

type Two = {
    test: number
}

type Three = One & Two;

let u: Three = {
    name: 's',
    id: 'w',
    test: 1
}

// Но так мы выбираем только один обьект
// Их можно комбиннировать на любом уровне вложенности
type One = {
    id: string,
    name: string,
}

type Two = {
    test: number
}

type Three = One | Two;

let u: Three = {
    test: 1
}

Interfaces

// Базовый пример
interface One {
    id: string,
    name: string,
}

let u:One = {
    name: '1',
    id: '2'
}

// Наследование интерфейсов
interface One {
    id: string,
    name: string,
}

// Можно наследовать так же несколько интерфейсов сразу
interface Two extends One {
    role: number,
    createdDate: Date
}

let u1:Two = {
    name: '1',
    id: '2',
    role: 5,
    createdDate: new Date(),
}

// Описываем методы
interface App {
    log: (id: number) => number
}

let u2:App = {
    log(id:number){
        return id;
    },
}

В интерфейсах можно доопределить свойства

В интерфейсах нужно всегда писать однозначное определение его свойств

Types and Interfaces

Классы

class Point {
    private readonly x: number;
    y: number;

    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }

    private func():number {
        this.y = 6;
        return this.y + 1;
    }

    protected a() {

    }
}

class d3P extends Point {
    private z:number;
    constructor(x: number, y: number, z: number) {
       super(x, y);
       this.z = z;
       this.a();
   }

    protected a(name?: string) {
        
    }
}

class StaticTest{
  static c = 'sdfd';
  static test() {}
}

// Нельзя сделать инстанс
abstract class Test4 {
    met(){}
}

class Test5 extends Test4 {
    
}

interface C {
    test:() => void
}

class D implements C {
    test(): void {
    }

}

const point = new Point(5,6);
point.y = 5;

const d3 = new d3P(1,2,3);

const s = StaticTest.c;

Возник вопрос или предложение пиши на почту alexsey_89@bk.ru или в Телеграмм канал

Дата публикации: 21 Апреля 2024 г.

Содержание


Наверх

Последнее изменение страницы: 09 Мая 2024 г.