TypeScript 2 in action

0 likes333 views

TypeScript 2 provides several new features that improve type safety when using TypeScript with libraries like React and Redux. These include non-nullable types to prevent null/undefined errors, literal types for exact string/number values, discriminated union types for handling different action types in Redux, and mapped/partial types for better React prop and state typing. Overall, TypeScript 2 enhances type checking and brings tighter integration with popular JavaScript frameworks and patterns.

Software

TypeScript 2 in action
Александр Русаков / Techops
a_s_rusakov@mail.ru
github.com/arusakov

Немного истории
TypeScript 1.8 22 февраля 2016 г.
TypeScript 2.0 22 сентября 2016 г.
TypeScript 2.1 7 декабря 2016 г.
TypeScript 2.2 RC 2 февраля 2017 г.
blogs.msdn.microsoft.com/typescript/ 2

О чем пойдет речь
● Защита от Undefined / Null
● Literal Types и что это такое
● Размеченные объединения и Redux
● Типизация для React Component API
3

Undefined / Null
TypeError: Cannot read property 'x' of undefined
TypeError: Cannot read property 'y' of null
5

Undefined / Null
type User = {
name: string
tags?: string[]
}
function getTags(user: User) {
return user.tags.join(', ')
}
6

type User = {
name: string
tags?: string[]
}
function getTags(user: User) {
return user.tags.join(', ')
}
Undefined / Null
7

type User = {
name: string
tags?: string[]
}
function getTags(user: User) {
return user.tags.join(', ')
}
Undefined / Null
8

Non-Nullable Types
https://github.com/Microsoft/TypeScript/pull/7140
// tsc --strictNullChecks
function getTags(user: User) {
return user.tags.join(', ')
}
// ERROR: Object is possibly 'undefined'
9

Non-Nullable Types
// tsc --strictNullChecks
function getTagStrict(user: User) {
return user.tags && user.tags.join(', ')
}
10

Non-Null Assertion !
// tsc --strictNullChecks
function getTagForce(user: User) {
return user.tags!.join(', ')
}
11

font-weight
13
Какие допустимые значения этого CSS свойства?

font-weight
14
Какие допустимые значения этого CSS свойства?
initial, inherit, unset,
normal, bold, bolder, lighter
100, 200, 300, 400, 500, 600, 700, 800, 900
https://www.w3.org/TR/css-fonts-3/#font-weight-prop

font-weight
15
type fontWeight = number | string
<div style={{ fontWeight: 1000 }} />
<div style={{ fontWeight: 'ligther' }} />

font-weight
16
type fontWeight = number | string
<div style={{ fontWeight: 1000 }} />
<div style={{ fontWeight: 'ligther' }} />

font-weight
17
type fontWeight = number | string
<div style={{ fontWeight: 1000 }} />
<div style={{ fontWeight: 'ligther' }} />

Literal Types
18
type fontWeight =
'initial' | 'inherit' | 'unset' |
'normal' | 'bold' | 'bolder' | 'lighter' |
100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900
https://github.com/Microsoft/TypeScript/pull/9407

Literal Types
19
<div style={{ fontWeight: 1000 }} />
<div style={{ fontWeight: 'ligther' }} />
// ERROR: Types of property 'fontWeight' are incompatible.

$TypeScript 1 + Redux import { Action } from 'redux' // Interface const ACTION_TYPE_1 = 'type1' interface Action1 extends Action { data: number } 20$

$TypeScript 1 + Redux function reduce(state, action: Action) { switch (action.type) { case ACTION_TYPE_1: action.data } } 21$

$TypeScript 1 + Redux function reduce(state, action: Action) { switch (action.type) { case ACTION_TYPE_1: action.data } } // ERROR: Property 'data' does not exist on type 'Action' 22$

$TypeScript 1 + Redux 23 function reduce(state, action: Action) { switch (action.type) { case ACTION_TYPE_1: (action as Action1).data // number } }$

Discriminated Union Types
type Action =
{ type: 'type1', id: number } |
{ type: 'type2', name: string }
26https://github.com/Microsoft/TypeScript/pull/9163

Discriminated Union Types
const ACTION_TYPE1 = 'type1'
const ACTION_TYPE2 = 'type2'
27

$Discriminated Union Types const ACTION_TYPE1 = 'type1' const ACTION_TYPE2 = 'type2' type Action = { type: typeof ACTION_TYPE1, id: number } | { type: typeof ACTION_TYPE2, name: string } 28$

$TypeScript 2 ♥ Redux https://spin.atomicobject.com/2016/09/27/typed-redux-reducers-typescript-2-0/ switch (action.type) { case ACTION_TYPE1: action.id // number case ACTION_TYPE2: action.name // string } 29$

TypeScript 1 + React
type State = { x: number, y: string }
this.state.x = 1
this.setState({ y: e.target.value })
31

TypeScript 1 + React
type State = { x: number, y: string }
this.state.x = 1
this.setState({ y: e.target.value })
// ERROR: Property 'x' is missing
32

TypeScript 1 + React
type State = { x: number, y: string }
this.state.x = 1
this.setState({ y: e.target.value } as State)
33

Index+Mapped Types
// react.d.ts
class Component<P, S> {
setState<K extends keyof S>(s: Pick<S, K>): void;
props: Readonly<P>;
state: Readonly<S>;
}
35
https://github.com/Microsoft/TypeScript/pull/11929
https://github.com/Microsoft/TypeScript/pull/12114

TypeScript 2 ♥ React
type State = { x: number, y: string }
this.state.x = 1
// ERROR: Cannot assign because it is a read-only property
this.setState({ y: e.target.value })
36

Predefined Mapped Types
// lib.es6.d.ts
Pick<T, K extends keyof T>
Readonly<T>
Partial<T>
Record<K extends string, T>
37

В заключение
38
github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript
github.com/Microsoft/TypeScript/wiki/Roadmap

Спасибо за внимание
Вопросы?
Презентация и материалы: bit.ly/2kzGfOP
Александр Русаков / Techops
a_s_rusakov@mail.ru
github.com/arusakov

This document introduces JavaScript objects and functions. It discusses the different types of objects in JavaScript like primitive values, wrapper objects, built-in objects, and host objects. It also covers function scope, the this keyword, constructors, prototypes, and inheritance. Functions are introduced as statements, expressions, and constructors. The this keyword is explained in the context of global, function, object methods, constructors, call, apply, and bind.

Lecture 5: Client Side Programming 1Artificial Intelligence Institute at UofSC

This document provides an overview of JavaScript, including: - JavaScript is a prototype-based, dynamic, loosely typed, multi-paradigm scripting language used primarily for client-side web applications. - JavaScript can also be used for server-side applications with Node.js, databases like MongoDB, and other applications. - The basics of JavaScript include variables, functions, objects, and operators. Functions have their own scope and arguments are passed by value for primitives and by reference for objects. - The Document Object Model (DOM) represents HTML documents and allows JavaScript to programmatically access and modify elements and attributes. - Popular JavaScript libraries like jQuery simplify DOM manipulation and other tasks, using CSS selectors

Typescript pptakhilsreyas

Typescript is a typed superset of JavaScript that adds additional features like classes, interfaces, and modules to provide type safety and help manage large applications. It allows for type annotations, classes, interfaces, generics and other features to support object-oriented and modular programming. Typescript code compiles to plain JavaScript and is an open source project maintained by Microsoft.

Getting started with typescriptC...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE

The document outlines Microsoft TypeScript, a statically typed language that compiles to JavaScript, detailing its installation, features, and best practices. It emphasizes the language's ease of use for large-scale applications, compatibility with existing JavaScript code, and type checking benefits. Additionally, it provides examples of TypeScript syntax, do's and don'ts, and migration steps from JavaScript.

TypeScript - das bessere JavaScript!?Christian Kaltepoth

This document introduces TypeScript as a superset of JavaScript that provides static typing, classes, and interfaces to JavaScript. It provides examples of how TypeScript adds types to variables, functions, and classes to catch errors early. Key features highlighted include basic and advanced types, enums, tuples, type inference, modules, and ES2016 features supported by TypeScript like constants, template strings, and arrow functions. The document argues that TypeScript helps catch errors early and provides a more robust development experience compared to plain JavaScript.

Launch Yourself into The AngularJS 2 And TypeScript SpaceColdFusionConference

TypeScriptUdaiappa Ramachandran

Udaiappa Ramachandran is a CTO at Akumina, Inc., specializing in cloud computing, IoT, and SharePoint Online, and is involved in various technology communities. The document outlines the features, benefits, and usage of TypeScript, emphasizing its static typing, object-oriented design, and compatibility with JavaScript. Key topics discussed include basic types, functions, classes, interfaces, and modules within TypeScript.

최호영, TYPESCRIPT - Javascript의 안정성을 높이기 위한 시도, NDC2013devCAT Studio, NEXON

TypeScript - An IntroductionNexThoughts Technologies

This document introduces TypeScript, a typed superset of JavaScript that compiles to plain JavaScript. It discusses TypeScript's installation, why it is used, main features like type annotations and classes, comparisons to alternatives like CoffeeScript and Dart, companies that use TypeScript, and concludes that TypeScript allows for safer, more modular code while following the ECMAScript specification. Key benefits are highlighted as high value with low cost over JavaScript, while potential cons are the need to still understand some JavaScript quirks and current compiler speed.

TypeScript IntroductionDmitry Sheiko

The document contains TypeScript code including variable declarations, class definitions, interface declarations, and function implementations. It features concepts such as inheritance with a 'mamal' and 'cat' class, handling coordinates with a 'point' interface, and utilizing jQuery for scroll events. Additionally, it references a build system configuration for compiling TypeScript files using Apache Ant.

TypeScript, Dart, CoffeeScript and JavaScript ComparisonHaim Michael

The document compares JavaScript, TypeScript, Dart, and CoffeeScript, detailing their characteristics, uses, and advantages. It explains JavaScript's ecosystem, introduces TypeScript as a superset enabling type definitions, describes Dart's capabilities for web and server applications, and outlines CoffeeScript's syntax inspired by Python and Ruby. A detailed comparison of their features and capabilities, along with a Q&A section about upcoming courses, is also included.

Александр Русаков - TypeScript 2 in actionMoscowJS

The document provides an overview of TypeScript's evolution from versions 1.8 to 2.0 and covers essential features such as null safety, literal types, and usage with Redux and React. Key points include the introduction of non-nullable types, discriminated unions, and mapped types. The content is aimed at developers looking to enhance their understanding of TypeScript for better application development.

개발자라면, 블로그HyunSeob Lee

[123] electron 김성훈NAVER D2

Getting started with typescript and angular 2Knoldus Inc.

The document provides a comprehensive introduction to TypeScript, covering its definition as a superset of JavaScript, its benefits, and how it differs from JavaScript. It details the features of TypeScript, including type annotations, constructors, and function overloading, along with instructions for installation and compilation of TypeScript files. Additionally, the document includes working examples and references for further learning.

Introduction to JavaScriptBryan Basham

This document is an introduction to JavaScript by Bryan Basham, covering web standards, the separation of concerns in programming, and various aspects of the JavaScript language, including its syntax, data types, and object-oriented programming concepts. It emphasizes the importance of unobtrusive JavaScript, has explanations about JSON, and provides examples and definitions related to objects, functions, and methods. The presentation also highlights the evolution of JavaScript and its implementation across different browsers.

Java script pptThe Health and Social Care Information Centre

The document summarizes lessons from talks on modern JavaScript, emphasizing the importance of writing quality code and understanding JavaScript's nuances, such as strict equality and hoisting. It touches on various topics like mobile development, function scope, and design patterns, while encouraging further learning and testing practices. Useful resources and recommended next steps for improving JavaScript skills are also provided.

Js pptRakhi Thota

This document provides an overview of JavaScript, including: - JavaScript is a client-side scripting language designed for web pages that enhances HTML with dynamic and interactive features. - It was initially developed by Netscape as LiveScript but was renamed JavaScript and standardized along with Java. - JavaScript can react to events, validate data, detect the browser, create cookies, and read/write HTML elements. - Key JavaScript concepts covered include objects, properties, methods, functions, values, variables, and the HTML DOM for finding and manipulating elements.

TypeScript: coding JavaScript without the painSander Mak (@Sander_Mak)

This document discusses TypeScript, a superset of JavaScript that adds optional static typing and class-based object-oriented programming. It allows developers to gradually introduce typing into JavaScript code for improved productivity and catch errors early. The document covers TypeScript features like interfaces, classes, modules, type definitions, and comparisons to alternatives like CoffeeScript and Dart. It concludes that TypeScript allows gradual adoption of typing while following the future ECMAScript standard.

Alphorm.com Formation TypeScriptAlphorm

Cette formation sur TypeScript, animée par Frédéric Gaurat, couvre les éléments du langage, l'organisation du code et ses particularités, destinée aux développeurs et chefs de projets. Elle aborde des sujets tels que les types, les classes, les interfaces, les modules, et les décorateurs, tout en fournissant des démonstrations pratiques. Le projet principal est une application de liste de tâches illustrant l'utilisation de TypeScript et les outils associés.

Practical TypeScriptldaws

This document discusses the benefits of using TypeScript, a superset of JavaScript that adds static type checking and compiler-checked syntax. It provides several examples of how TypeScript catches errors through type checking, such as passing arguments of the wrong type or missing required properties. It also notes that the TypeScript community has provided type declarations for thousands of JavaScript libraries to enable safer usage. While TypeScript adds types, code written in it is still valid JavaScript that can be migrated to over time without rewriting existing code.

Type script is awesomeKeithMurgic

TypeScript is a superset of JavaScript that compiles to clean JavaScript output. It adds static typing and interfaces to help catch errors. The document discusses TypeScript features like type inference, static vs dynamic typing, interfaces, type aliases, and how to add types for React components. TypeScript is growing in popularity and can help programmers write cleaner code, though it does require more upfront effort to learn and use.

Introduction to TypeScriptKeithMurgic

This document discusses TypeScript and its advantages over JavaScript. TypeScript is a superset of JavaScript that adds type safety and catches errors earlier. It allows for static and strong typing through features like type inference, interfaces, and unions. While TypeScript adds complexity, it encourages cleaner code and helps catch bugs earlier by validating types. The document provides examples of basic types, interfaces, type aliases, and how to add typing to React components. Overall, the document presents a positive case for learning TypeScript despite initial costs in order to write better code.

"Enhancing Your React with Advanced TypeScript", Titian Cernicova-DragomirFwdays

The document discusses the use of advanced types in TypeScript, highlighting the benefits and potential complexities of using discriminated unions, generics, and mapped types. It emphasizes the importance of documentation and understanding when deciding to implement complicated types, and suggests that these advanced techniques can enhance developer experience if used thoughtfully. Additionally, the document encourages familiarity with advanced TypeScript features to improve code maintainability and collaboration within teams.

Flow or Type - how to React to that?Krešimir Antolić

The document discusses type systems in JavaScript, specifically Flow and TypeScript, comparing their features and usage. It highlights how these systems enhance code clarity, avoid common errors, and aid in refactoring while also outlining when to migrate to them. Challenges and misconceptions related to type systems are also addressed, emphasizing their role in improving code robustness despite introducing additional complexity.

Introduction to typescriptMario Alexandro Santini

TypeScript (TS) adds types and tooling to JavaScript (JS) to improve code quality and catch errors earlier. It is a superset of JS that compiles to plain JS. Key features include type annotations, classes, interfaces, generics and tooling like Visual Studio Code with IntelliSense. While TS adds complexity, it improves code organization, documentation and catches errors at compile time rather than runtime. The type system has limits but TS is a useful alternative to other languages for large JS projects.

TypeScript introduction to scalable javascript applicationAndrea Paciolla

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional static types, classes, and interfaces to JavaScript to help catch errors. The main benefits of TypeScript are compile time type checking, type definitions from definition files, and features like classes, interfaces, and modules. It is commonly used in large projects and with Angular. While it has good support for enterprises, its compiler can be slow and not all JavaScript libraries yet have definition files.

TypeScript 101rachelterman

TypeScript.ppt LPU Notes Lecture PPT for 2024manveersingh2k05

The document outlines fundamental types in TypeScript, including primitives like string, number, and boolean, as well as arrays and the 'any' type. It discusses type annotations for variables and functions, contextual typing for anonymous functions, and the definition of object types, including optional properties and interfaces. Additionally, it highlights the differences between type aliases and interfaces, as well as the use of type assertions for more specific type definitions.

More Related Content

Viewers also liked (13)

최호영, TYPESCRIPT - Javascript의 안정성을 높이기 위한 시도, NDC2013devCAT Studio, NEXON

TypeScript - An IntroductionNexThoughts Technologies

TypeScript IntroductionDmitry Sheiko

TypeScript, Dart, CoffeeScript and JavaScript ComparisonHaim Michael

Александр Русаков - TypeScript 2 in actionMoscowJS

개발자라면, 블로그HyunSeob Lee

[123] electron 김성훈NAVER D2

Getting started with typescript and angular 2Knoldus Inc.

Introduction to JavaScriptBryan Basham

Java script pptThe Health and Social Care Information Centre

Js pptRakhi Thota

TypeScript: coding JavaScript without the painSander Mak (@Sander_Mak)

Alphorm.com Formation TypeScriptAlphorm

최호영, TYPESCRIPT - Javascript의 안정성을 높이기 위한 시도, NDC2013devCAT Studio, NEXON

TypeScript - An IntroductionNexThoughts Technologies

TypeScript IntroductionDmitry Sheiko

TypeScript, Dart, CoffeeScript and JavaScript ComparisonHaim Michael

Александр Русаков - TypeScript 2 in actionMoscowJS

개발자라면, 블로그HyunSeob Lee

[123] electron 김성훈NAVER D2

Getting started with typescript and angular 2Knoldus Inc.

Introduction to JavaScriptBryan Basham

Java script pptThe Health and Social Care Information Centre

Js pptRakhi Thota

TypeScript: coding JavaScript without the painSander Mak (@Sander_Mak)

Alphorm.com Formation TypeScriptAlphorm

Similar to TypeScript 2 in action (20)

Practical TypeScriptldaws

Type script is awesomeKeithMurgic

Introduction to TypeScriptKeithMurgic

"Enhancing Your React with Advanced TypeScript", Titian Cernicova-DragomirFwdays

Flow or Type - how to React to that?Krešimir Antolić

Introduction to typescriptMario Alexandro Santini

TypeScript introduction to scalable javascript applicationAndrea Paciolla

TypeScript 101rachelterman

TypeScript.ppt LPU Notes Lecture PPT for 2024manveersingh2k05

Power Leveling your TypeScriptOffirmo

The document discusses TypeScript, its advantages, and challenges for web developers transitioning from JavaScript. It covers installation, configuration, and usage of TypeScript, including type definitions, interface definitions, and integration with tools like npm and webpack. Additionally, it emphasizes the importance of understanding limitations, using linters, and not substituting testing or code reviews with TypeScript alone.

Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016Codemotion

The document provides an overview of Flowtype, highlighting its use as a type checker for JavaScript, its comparison with TypeScript, and various typing features it offers. It describes how to get started with Flowtype, its type inference capabilities, and its treatment of native and special types like mixed and any. The presentation also covers practical examples, type adoption strategies, and useful resources for learning and utilizing Flowtype.

Type Script Conceitos de ts para projetos front-end React - por ruben marcusRuben Marcus Luz Paschoarelli

Este documento explora o TypeScript e suas aplicações em projetos front-end com React, abordando a evolução do JavaScript, vantagens e desvantagens do TypeScript, e como configurá-lo em projetos. Ele discute práticas recomendadas, tipos, interfaces, e recursos de orientação a objetos do TypeScript, além de comparações de uso entre JavaScript e TypeScript em componentes React. O documento também menciona alternativas ao TypeScript e oferece dicas úteis para a integração com APIs e desenvolvimento geral.

JavaScript, TypeScipt and React NativeMitchell Tilbrook

Type Driven Development with TypeScriptGarth Gilmour

The document discusses advanced TypeScript features including structural typing, type aliases, union and intersection types, and mapped types that allow for the creation of new types based on existing ones. It provides examples of defining and using types, including handling of return types in functions and partial function application with strong typing. The author also emphasizes the utility of TypeScript in maintaining type safety during development with practical coding examples.

Typescript presentationKartik Grewal

This document provides an introduction to using TypeScript with React. It discusses how TypeScript extends JavaScript with types to make code less prone to errors and more readable and maintainable. It also covers TypeScript variable and return types, classes, enums, intersections and unions. The document demonstrates how to structure a TypeScript project with React including file organization. It also provides guidance on adding TypeScript to an existing React application project.

Typescript - interesting partsMykyta Khmel

This document discusses various TypeScript patterns for working with React components, including: - Defining and extending prop types - Removing unwanted props using Exclude and Pick - Using generics to abstract prop type manipulation - Implementing functional patterns like currying and tuples - Useful TypeScript utility types like Head, Tail, and Params - Keywords like extends, type, and infer that are important for advanced TypeScript patterns

Type scriptZunair Shoes

TypeScript is a typed superset of JavaScript that adds optional static types, classes, and interfaces to support type checking and OOP programming in JavaScript; it compiles to plain JavaScript for browser compatibility and allows developers to gradually introduce static typing into JavaScript projects for type safety. TypeScript supports features like classes, interfaces, and generics to build robust applications, and its compiler checks for errors in large codebases before runtime to catch bugs earlier in development.

TypeScript Interview Questions PDF By ScholarHatScholarhat

Typescript: Beginner to AdvancedTalentica Software

Typescript is a strict syntactical superset of JavaScript that adds type safety. It allows defining type annotations for variables, functions, objects, and function return values to catch errors. Typescript uses a static and structural type system. Its types include primitives, objects, arrays, functions, classes, generics, and utility types. Typescript code compiles to JavaScript, so it doesn't change runtime behavior but can catch errors earlier.

An Introduction to TypeScriptWrapPixel

This document introduces TypeScript, a strongly-typed programming language that builds upon JavaScript, highlighting its advantages such as better tooling, additional language features, and editor support. It explains TypeScript's significant features, including type inference and safety for scalable coding, while showcasing a simple example of converting JavaScript code to TypeScript. The article also provides instructions on installing TypeScript and writing basic TypeScript code, illustrating the transition from JavaScript to TypeScript.

Practical TypeScriptldaws

Type script is awesomeKeithMurgic

Introduction to TypeScriptKeithMurgic

"Enhancing Your React with Advanced TypeScript", Titian Cernicova-DragomirFwdays

Flow or Type - how to React to that?Krešimir Antolić

Introduction to typescriptMario Alexandro Santini

TypeScript introduction to scalable javascript applicationAndrea Paciolla

TypeScript 101rachelterman

TypeScript.ppt LPU Notes Lecture PPT for 2024manveersingh2k05

Power Leveling your TypeScriptOffirmo

Milano JS Meetup - Gabriele Petronella - Codemotion Milan 2016Codemotion

Type Script Conceitos de ts para projetos front-end React - por ruben marcusRuben Marcus Luz Paschoarelli

JavaScript, TypeScipt and React NativeMitchell Tilbrook

Type Driven Development with TypeScriptGarth Gilmour

Typescript presentationKartik Grewal

Typescript - interesting partsMykyta Khmel

Type scriptZunair Shoes

TypeScript Interview Questions PDF By ScholarHatScholarhat

Typescript: Beginner to AdvancedTalentica Software

An Introduction to TypeScriptWrapPixel

Recently uploaded (20)

Complete WordPress Programming Guidance BookShabista Imam

How Automation in Claims Handling Streamlined OperationsInsurance Tech Services

Automated Testing and Safety Analysis of Deep Neural NetworksLionel Briand

Simplify Insurance Regulations with Compliance Management SoftwareInsurance Tech Services

Canva Pro Crack Free Download 2025-FREE LATESTgrete1122g

Download Adobe Illustrator Crack free for Windows 2025?grete1122g

Y - Recursion The Hard Way GopherCon EU 2025Eleanor McHugh

In most modern programming languages, including Go, it's possible for a function to call itself recursively. It's such a mainstream technique that we've come to take it for granted. But what if functions couldn't call themselves? There's a branch of mathematics called Combinatorics which answers just these kinds of questions, and this presentation takes these ideas and phrases them in Go to teach a deeper view of computation through the medium of code.

declaration of Variables and constants.pptxmeemee7378

Why Edge Computing Matters in Mobile Application Tech.pdfIMG Global Infotech

A Guide to Telemedicine Software Development.pdfOlivero Bozzelli

CodeCleaner: Mitigating Data Contamination for LLM Benchmarkingarabelatso

arctitecture application system design os dsaza241967

Which Hiring Management Tools Offer the Best ROI?HireME

Top Time Tracking Solutions for Accountantsoliviareed320

This presentation explores the importance of time tracking for accountants and introduces modern solutions that help streamline billable hours, improve productivity, and eliminate manual tracking errors. Learn how time tracking software tailored for accounting professionals can simplify client billing, ensure compliance, and enhance profitability. From key challenges in time management to top features to look for in a solution, this presentation offers valuable insights and practical tips for solo accountants, finance teams, and accounting firms looking to optimize their time-tracking workflows.https://www.invoicera.com/blog/invoicing/best-time-tracking-software-for-accountants/

Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...WSO2

Building and operating internal platforms has become increasingly complex — sprawling toolchains, rising costs, and fragmented developer experiences are slowing teams down. It’s time for a new approach. This slide deck explores modern platform engineering with Choreo, WSO2’s AI-native Internal Developer Platform as a Service. Discover how you can streamline platform operations, empower your developers, and drive faster innovation — all while reducing complexity and cost. Learn more: https://wso2.com/choreo/platform-engineering/

Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdfmary rojas

U.S. staff augmentation companies excel at providing IT professionals with expertise in development, cybersecurity, AI, and more. Whether you need to fill a short-term gap or enhance your team’s capabilities long-term, these firms deliver pre-vetted talent tailored to your tech stack and industry. With an understanding of both global technologies and local compliance, U.S.-based IT staff augmentation bridges the gap between talent shortage and project demand efficiently.

Best MLM Compensation Plans for Network Marketing Success in 2025LETSCMS Pvt. Ltd.

ERP Systems in the UAE: Driving Business Transformation with Smart Solutionsdheeodoo

ERP solutions are driving innovative change for businesses across the UAE through improved efficiency, reduced operational costs, and provide real-time visibility of operational data. By offering native Arabic language support, VAT compliance, and some level of cloud readiness, ERP solutions also supports and are consistent with the initiative for Smart Dubai 2030. Odoo is an example of a flexible & scalable solution. If you're looking for expert support with implementation contact Banibro. www.banibro.com

Enable Your Cloud Journey With Microsoft Trusted Partner | IFI TechIFI Techsolutions

Humans vs AI Call Agents - Qcall.ai's Special ReportUdit Goenka

Humans vs Agentic AI Cost Comparison: Cut 85% Support Costs TL;DR: Agentic AI crushes human costs in L1/L2 support with 85% savings, 300% efficiency gains, and 90%+ success rates. Your CFO just asked: "Why spend $2.3M annually on L1 support when competitors automated 80% for under $200K?" The humans vs agentic AI cost debate isn't theoretical - it's happening now. Real Cost Breakdown: - India L1/L2 Agent: ₹6,64,379 ($8,000) annually (full cost) - US L1/L2 Agent: $70,000 annually (loaded cost) - Qcall.ai Agentic AI: ₹6/min ($0.07/min) = 85% savings Game-Changing Results: - 47 human agents → 8 agents + AI system - Operating costs: $2.8M → $420K (85% reduction) - Customer satisfaction: 78% → 91% - First call resolution: 72% → 94% - Languages: 2-3 → 15+ fluently Why Agentic AI Wins: - Human Limitations: 8hrs/day, 1-2 languages, 30-45% attrition, mood-dependent, 6-12 weeks training - Qcall.ai Advantages: 24/7 availability, 97% humanized voice, <60 second response, intelligent qualification, seamless handoff Industry Impact: - E-commerce: 82% cost reduction - Healthcare: 90% appointment automation - SaaS: 23% satisfaction improvement - Financial: 95% inquiry automation Implementation: - Setup: 2-5 days vs 6-12 weeks hiring - ROI: Break-even in 3 months - Scaling: Instant global expansion Competitive Gap: - Early Adopters: 85% cost advantage, superior metrics, faster expansion Late Adopters: Higher costs, limited scalability, compounding disadvantage Similar automation patterns emerge across industries. Marketing teams use autoposting.ai for social media automation - same human-AI collaboration model driving L1/L2 transformation. "We reduced support costs by 78% while improving satisfaction by 31%. ROI was immediate and keeps compounding." - COO, Global SaaS Company Getting Started: Calculate current L1/L2 costs Assess repetitive tasks Request Qcall.ai demo Plan 20% pilot Bottom Line: Companies avoiding this shift hemorrhage millions while competitors scale globally with fraction of costs. The question isn't whether agentic AI will replace routine tasks - it's whether you'll implement before competitors gain insurmountable advantage. Ready to transform operations? This reveals complete cost analysis, implementation strategy, and competitive advantages.

Complete WordPress Programming Guidance BookShabista Imam

How Automation in Claims Handling Streamlined OperationsInsurance Tech Services

Automated Testing and Safety Analysis of Deep Neural NetworksLionel Briand

Simplify Insurance Regulations with Compliance Management SoftwareInsurance Tech Services

Canva Pro Crack Free Download 2025-FREE LATESTgrete1122g

Download Adobe Illustrator Crack free for Windows 2025?grete1122g

Y - Recursion The Hard Way GopherCon EU 2025Eleanor McHugh

declaration of Variables and constants.pptxmeemee7378

Why Edge Computing Matters in Mobile Application Tech.pdfIMG Global Infotech

A Guide to Telemedicine Software Development.pdfOlivero Bozzelli

CodeCleaner: Mitigating Data Contamination for LLM Benchmarkingarabelatso

arctitecture application system design os dsaza241967

Which Hiring Management Tools Offer the Best ROI?HireME

Top Time Tracking Solutions for Accountantsoliviareed320

Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...WSO2

Why Every Growing Business Needs a Staff Augmentation Company IN USA.pdfmary rojas

Best MLM Compensation Plans for Network Marketing Success in 2025LETSCMS Pvt. Ltd.

ERP Systems in the UAE: Driving Business Transformation with Smart Solutionsdheeodoo

Enable Your Cloud Journey With Microsoft Trusted Partner | IFI TechIFI Techsolutions

Humans vs AI Call Agents - Qcall.ai's Special ReportUdit Goenka

TypeScript 2 in action

1. TypeScript 2 in action Александр Русаков / Techops [email protected] github.com/arusakov

2. Немного истории TypeScript 1.8 22 февраля 2016 г. TypeScript 2.0 22 сентября 2016 г. TypeScript 2.1 7 декабря 2016 г. TypeScript 2.2 RC 2 февраля 2017 г. blogs.msdn.microsoft.com/typescript/ 2

3. О чем пойдет речь ● Защита от Undefined / Null ● Literal Types и что это такое ● Размеченные объединения и Redux ● Типизация для React Component API 3

4. Undefined everywhere 4

5. Undefined / Null TypeError: Cannot read property 'x' of undefined TypeError: Cannot read property 'y' of null 5

6. Undefined / Null type User = { name: string tags?: string[] } function getTags(user: User) { return user.tags.join(', ') } 6

7. type User = { name: string tags?: string[] } function getTags(user: User) { return user.tags.join(', ') } Undefined / Null 7

8. type User = { name: string tags?: string[] } function getTags(user: User) { return user.tags.join(', ') } Undefined / Null 8

9. Non-Nullable Types https://github.com/Microsoft/TypeScript/pull/7140 // tsc --strictNullChecks function getTags(user: User) { return user.tags.join(', ') } // ERROR: Object is possibly 'undefined' 9

10. Non-Nullable Types // tsc --strictNullChecks function getTagStrict(user: User) { return user.tags && user.tags.join(', ') } 10

11. Non-Null Assertion ! // tsc --strictNullChecks function getTagForce(user: User) { return user.tags!.join(', ') } 11

12. Literal Types 12 ???

13. font-weight 13 Какие допустимые значения этого CSS свойства?

14. font-weight 14 Какие допустимые значения этого CSS свойства? initial, inherit, unset, normal, bold, bolder, lighter 100, 200, 300, 400, 500, 600, 700, 800, 900 https://www.w3.org/TR/css-fonts-3/#font-weight-prop

15. font-weight 15 type fontWeight = number | string <div style={{ fontWeight: 1000 }} /> <div style={{ fontWeight: 'ligther' }} />

16. font-weight 16 type fontWeight = number | string <div style={{ fontWeight: 1000 }} /> <div style={{ fontWeight: 'ligther' }} />

17. font-weight 17 type fontWeight = number | string <div style={{ fontWeight: 1000 }} /> <div style={{ fontWeight: 'ligther' }} />

18. Literal Types 18 type fontWeight = 'initial' | 'inherit' | 'unset' | 'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 https://github.com/Microsoft/TypeScript/pull/9407

19. Literal Types 19 <div style={{ fontWeight: 1000 }} /> <div style={{ fontWeight: 'ligther' }} /> // ERROR: Types of property 'fontWeight' are incompatible.

20. TypeScript 1 + Redux import { Action } from 'redux' // Interface const ACTION_TYPE_1 = 'type1' interface Action1 extends Action { data: number } 20

21. TypeScript 1 + Redux function reduce(state, action: Action) { switch (action.type) { case ACTION_TYPE_1: action.data } } 21

22. TypeScript 1 + Redux function reduce(state, action: Action) { switch (action.type) { case ACTION_TYPE_1: action.data } } // ERROR: Property 'data' does not exist on type 'Action' 22

23. TypeScript 1 + Redux 23 function reduce(state, action: Action) { switch (action.type) { case ACTION_TYPE_1: (action as Action1).data // number } }

24. TypeScript 1 + Redux ≠ ♥ 24

25. TypeScript 2 25

26. Discriminated Union Types type Action = { type: 'type1', id: number } | { type: 'type2', name: string } 26https://github.com/Microsoft/TypeScript/pull/9163

27. Discriminated Union Types const ACTION_TYPE1 = 'type1' const ACTION_TYPE2 = 'type2' 27

28. Discriminated Union Types const ACTION_TYPE1 = 'type1' const ACTION_TYPE2 = 'type2' type Action = { type: typeof ACTION_TYPE1, id: number } | { type: typeof ACTION_TYPE2, name: string } 28

29. TypeScript 2 ♥ Redux https://spin.atomicobject.com/2016/09/27/typed-redux-reducers-typescript-2-0/ switch (action.type) { case ACTION_TYPE1: action.id // number case ACTION_TYPE2: action.name // string } 29

30. React 30

31. TypeScript 1 + React type State = { x: number, y: string } this.state.x = 1 this.setState({ y: e.target.value }) 31

32. TypeScript 1 + React type State = { x: number, y: string } this.state.x = 1 this.setState({ y: e.target.value }) // ERROR: Property 'x' is missing 32

33. TypeScript 1 + React type State = { x: number, y: string } this.state.x = 1 this.setState({ y: e.target.value } as State) 33

34. TypeScript 1 + React ≠ ♥ 34

35. Index+Mapped Types // react.d.ts class Component<P, S> { setState<K extends keyof S>(s: Pick<S, K>): void; props: Readonly<P>; state: Readonly<S>; } 35 https://github.com/Microsoft/TypeScript/pull/11929 https://github.com/Microsoft/TypeScript/pull/12114

36. TypeScript 2 ♥ React type State = { x: number, y: string } this.state.x = 1 // ERROR: Cannot assign because it is a read-only property this.setState({ y: e.target.value }) 36

37. Predefined Mapped Types // lib.es6.d.ts Pick<T, K extends keyof T> Readonly<T> Partial<T> Record<K extends string, T> 37

38. В заключение 38 github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript github.com/Microsoft/TypeScript/wiki/Roadmap

39. Спасибо за внимание Вопросы? Презентация и материалы: bit.ly/2kzGfOP Александр Русаков / Techops [email protected] github.com/arusakov

TypeScript 2 in action

Recommended

More Related Content

Viewers also liked (13)

Similar to TypeScript 2 in action (20)

Recently uploaded (20)

TypeScript 2 in action