[TypeScript] TypeScript
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
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>
}
===========
Источник:
habr.com
===========
Похожие новости:
- [Разработка веб-сайтов, JavaScript, TypeScript] Практическое руководство по TypeScript для разработчиков (перевод)
- [Разработка веб-сайтов, JavaScript, TypeScript] TypeScript: Раскладываем tsconfig по полочкам. Часть 2
- [Разработка веб-сайтов, JavaScript, ReactJS, TypeScript] Кэш или стэйт, пробуем React-query
- [Программирование, Анализ и проектирование систем, Проектирование и рефакторинг, Управление разработкой, TypeScript] Чем меня не устраивает гексагональная архитектура. Моя имплементация DDD – многоуровневая блочная архитектура
- [JavaScript, Промышленное программирование, TypeScript] Продвинутые дженерики в TypeScript. Доклад Яндекса
- [JavaScript, Программирование, Go, TypeScript] Обзор Prisma ORM
- [JavaScript, Node.JS, TypeScript] Yarn 2 — Устанавливаем и разбираемся
- [JavaScript, ReactJS, TypeScript] Как готовить микрофронтенды в Webpack 5
- [Angular] Добавляем PWA в Angular приложение
- [Angular, TypeScript] Обмен данными между компонентами Angular
Теги для поиска: #_typescript, #_typescript, #_typescript
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 23-Ноя 04:52
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
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 имеются следующие базовые типы:
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> } =========== Источник: habr.com =========== Похожие новости:
|
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 23-Ноя 04:52
Часовой пояс: UTC + 5