TypeScript

TypeScript — язык программирования, представленный Microsoft в 2012 году и позиционируемый как средство разработки веб-приложений, расширяющее возможности JavaScript.

Разработчиком языка TypeScript является Андерс Хейлсберг (англ. Anders Hejlsberg), создавший ранее Turbo Pascal, Delphi и C#.

TypeScript является обратно совместимым с JavaScript и компилируется в последний. Фактически, после компиляции программу на TypeScript можно выполнять в любом современном браузере или использовать совместно с серверной платформой Node.js. Код экспериментального компилятора, транслирующего TypeScript в JavaScript, распространяется под лицензией Apache. Его разработка ведётся в публичном репозитории через сервис GitHub.

TypeScript отличается от JavaScript возможностью явного статического назначения типов, поддержкой использования полноценных классов (как в традиционных объектно-ориентированных языках).

tsconfig. json представляет собой стандартный файл в формате json, который содержит ряд секций. Например:

"target": "es3", // Тип кода создаваемого итогового файла.
"lib": ["es5", "es6", "es2015.promise", "es2016.array.include"], // Набор библиотечных файлов полифилов, которые будут включены в итоговый выходной файл.
"forceConsistentCasingInFileNames": false, // Запретить несогласованные ссылки на один и тот же файл?
"noFallthroughCasesInSwitch": false, // Сообщить об ошибке в случае обнаружения проваливания в конструкции switch-case?
"moduleResolution": "classic", // Определить способ поиска модулей в папках: как в Node.js или классический, как в TypeScript 1.5 и ниже.
"noEmit": false, // Не создавать итоговый файл.
"noUnusedLocals": true, // Показывать ошибку, если где-то найдены неиспользуемые локальные значения.
"noUnusedParameters": true, // Показывать ошибку, если где-то найдены неиспользуемые параметры.
"pretty": true, // Окрашивать в терминале сообщения об ошибках.
"strict": false, // Включить ли все строги проверки типов сразу: noImplicitAny, noImplicitThis, alwaysStrict, strictNullChecks, strictFunctionTypes, strictPropertyInitialization?
"strictNullChecks": false, // Значения "null" и "undefined" могут быть присвоены только значениям данного типа и значениям только с типом "any"?

И другие — здесь

Таблица типов в Typescript

TypeScript является строго типизированным языком, и каждая переменная и константа в нем имеет определенный тип. При этом в отличие от javascript мы не можем динамически изменить ранее указанный тип переменной.

В TypeScript имеются следующие базовые типы:

• Boolean: логическое значение true или false
• Number: числовое значение
• String: строки
• Array: массивы
• Tuple: кортежи
• Enum: перечисления
• Any: произвольный тип
• Null и undefined: соответствуют значениям null и undefined в javascript
• Void: отсутствие конкретного значения, используется в основном в качестве возвращаемого типа функций
• Never: также представляет отсутствие значения и используется в качестве возвращаемого типа функций, которые генерируют или возвращают ошибку

Type assertion

Type assertion представляет модель преобразования значения переменной к определенному типу. Обычно в некоторых ситуациях одна переменная может представлять какой-то широкий тип, например, any, который по факту допускает значения различных типов. Однако при этом нам надо использовать переменную как значение строго определенного типа. И в этом случае мы можем привести к этому типу.

Есть две формы приведения. Первая форма заключается в использовании угловых скобок:

let someAnyValue: any = "hello world!";
let strLength: number = (<string>someAnyValue).length;
console.log(strLength); // 12
 
let someUnionValue: string | number = "hello work";
strLength = (<string>someUnionValue).length;
console.log(strLength); // 10

Вторая форма заключается в применении оператора as:

let someAnyValue: any = "hello world!";
let strLength: number = (someAnyValue as string).length;
console.log(strLength); // 12
 
let someUnionValue: string | number = "hello work";
strLength = (someUnionValue as string).length;
console.log(strLength); // 10

Jenerics

TypeScript является строго типизированным языком, однако иногда надо построить функционал так, чтобы он мог использовать данные любых типов. В некоторых случаях мы могли бы использовать тип any:

function getId(id: any): any {
     
    return id;
}
let result = getId(5);
console.log(result);

Однако в этом случае мы не можем использовать результат функции как объект того типа, который передан в функцию. Для нас это тип any. Если бы вместо числа 5 в функцию передавался бы объект какого-нибудь класса, и нам потом надо было бы использовать этот объект, например, вызывать у него функции, то это было бы проблематично. И чтобы конкретизировать возвращаемый тип, мы можем использовать обобщения:

function getId<T>(id: T): T {
     
    return id;
}

Utility Types

Typescript поставляет объекты при помощи которых можно легко проводить трансформацию типов, например:

Requared — создаёт тип, в котором все поля обязательные

interface Props {
 a?: number;
 b?: string;
}


const obj: Props = { a: 5 };


const obj2: Required<Props> = { a: 5 };
Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

Readonly — все поля не могут быть изменены

interface Todo {
 title: string;
}


const todo: Readonly<Todo> = {
 title: "Delete inactive users",
};


todo.title = "Hello";
Cannot assign to 'title' because it is a read-only property.

ReturnType — Создает тип, состоящий из типа, возвращаемого функцией Type.

declare function f1(): { a: number; b: string };


type T0 = ReturnType<() => string>;
//    ^ = type T0 = string

type T1 = ReturnType<(s: string) => void>;
//    ^ = type T1 = void

type T2 = ReturnType<<T>() => T>;
//    ^ = type T2 = unknown

type T3 = ReturnType<<T extends U, U extends number[]>() => T>;
//    ^ = type T3 = number[]

type T4 = ReturnType<typeof f1>;
//    ^ = type T4 = {
//        a: number;
//        b: string;
//    }

type T5 = ReturnType<any>;
//    ^ = type T5 = any

type T6 = ReturnType<never>;
//    ^ = type T6 = never

type T7 = ReturnType<string>;
Type 'string' does not satisfy the constraint '(...args: any) => any'.
Type 'string' does not satisfy the constraint '(...args: any) => any'.
//    ^ = type T7 = any

type T8 = ReturnType<Function>;
Type 'Function' does not satisfy the constraint '(...args: any) => any'.
  Type 'Function' provides no match for the signature '(...args: any): any'.
Type 'Function' does not satisfy the constraint '(...args: any) => any'.
  Type 'Function' provides no match for the signature '(...args: any): any'.
//    ^ = type T8 = any

TypeScript в React

При работе с React нужно типизировать:

1) компоненты

export const App: React.FC = () => { 

2) Хуки

const [userId, setUserId] = useState<number>();
const [post, setPost] = useState<PostType>()
const inputRef = useRef<HTMLInputElement>(null)

3) Эвенты

const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
 setUserId(Number(e.target.value))
}

4) Полный листинг программы:

import React, {ChangeEvent, useEffect, useRef, useState} from "react";
import {getPostByID} from "./api/api";

export type PostType  = {
 userId : number;
 id: number;
 title: string;
 body: string
}

export const App: React.FC = () => {
 const [userId, setUserId] = useState<number>();
 const [post, setPost] = useState<PostType>()
 const inputRef = useRef<HTMLInputElement>(null)

 useEffect(() => {
   (async () => {
     const post = await getPostByID(userId)
   post && setPost(post)})()
 }, [userId])

 useEffect(() => console.log(post), [post])

 const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
   setUserId(Number(e.target.value))
 }

 return <div>
   <input ref={inputRef} value={userId} onChange={onChangeHandler} type="number" ></input>
 </div>
}