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 является строго типизированным языком, и каждая переменная и константа в нем имеет определенный тип. При этом в отличие от javascript мы не можем динамически изменить ранее указанный тип переменной.
В TypeScript имеются следующие базовые типы:
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
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;
}
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
При работе с 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>
}
Источник статьи: https://habr.com/ru/post/557938/
Разработчиком языка 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>
}
Источник статьи: https://habr.com/ru/post/557938/