TypeScript (JavaScript with syntax for types)

TypeScript (JavaScript with syntax for types)

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

const user = {
firstName: "Angela",
lastName: "Davis",
role: "Professor",
}
 
console.log(user.name)
Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.
 

TypeScript 5.2 is now available, 5.3 has a release candidate to try.

What is TypeScript?

JavaScript and More

TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.

A Result You Can Trust

TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.

Safety at Scale

TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.

Adopt TypeScript Gradually

Apply types to your JavaScript project incrementally, each step improves editor support and improves your codebase.

Let's take this incorrect JavaScript code, and see how TypeScript can catch mistakes in your editor.

function compact(arr) {
if (orr.length > 10)
return arr.trim(0, 10)
return arr
}

No editor warnings in JavaScript files

This code crashes at runtime!

JavaScript file

// @ts-check
 
function compact(arr) {
if (orr.length > 10)
Cannot find name 'orr'.Cannot find name 'orr'.
return arr.trim(0, 10)
return arr
}

Adding this to a JS file shows errors in your editor

JavaScript with TS Check

// @ts-check
 
/** @param {any[]} arr */
function compact(arr) {
if (arr.length > 10)
return arr.trim(0, 10)
Property 'trim' does not exist on type 'any[]'.Property 'trim' does not exist on type 'any[]'.
return arr
}

Using JSDoc to give type information

JavaScript with JSDoc

function compact(arr: string[]) {
if (arr.length > 10)
return arr.slice(0, 10)
return arr
}

TypeScript adds natural syntax for providing types

TypeScript file

Describe Your Data

Describe the shape of objects and functions in your code.

Making it possible to see documentation and issues in your editor.

interface Account {
id: number
displayName: string
version: 1
}
 
function welcome(user: Account) {
console.log(user.id)
}
type Result = "pass" | "fail"
 
function verify(result: Result) {
if (result === "pass") {
console.log("Passed")
} else {
console.log("Failed")
}
}

TypeScript becomes JavaScript via the delete

key.

type Result = "pass" | "fail"
 
function verify(result: Result) {
if (result === "pass") {
console.log("Passed")
} else {
console.log("Failed")
}
}
 

TypeScript file.

type Result = "pass" | "fail"
 
function verify(result: Result) {
if (result === "pass") {
console.log("Passed")
} else {
console.log("Failed")
}
}
 

Types are removed.

 
 
function verify(result) {
if (result === "pass") {
console.log("Passed")
} else {
console.log("Failed")
}
}
 

JavaScript file.

Post a Comment

0 Comments