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> }