TypeScript 是 具有类型语法的 JavaScript

TypeScript 是一种基于 JavaScript 构建的强类型编程语言,可为你提供任何规模的更好工具。

ts
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; }'.2339Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.
 
ts
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; }'.2339Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.
 

什么是 TypeScript?

JavaScript 及更多

TypeScript 向 JavaScript 添加了额外的语法,以支持与你的编辑器更紧密的集成。 在编辑器中尽早发现错误。

你可以信赖的结果

TypeScript 代码转换为 JavaScript,它在 JavaScript 运行的任何地方运行:在浏览器中、在 Node.js 或 Deno 上以及在你的应用程序中。

规模安全

TypeScript 理解 JavaScript 并使用类型推断为你提供出色的工具,而无需额外的代码。

逐步采用 TypeScript

逐步将类型应用到你的 JavaScript 项目,每一步都会改进编辑器支持并改进你的代码库。

让我们以这段不正确的 JavaScript 代码为例,看看 TypeScript 如何在你的编辑器中发现错误

js
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 文件

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

Adding this to a JS file shows errors in your editor

the param is arr, not orr!

具有 TS 检查的 JavaScript

js
// @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[]'.2339Property 'trim' does not exist on type 'any[]'.
return arr
}

Using JSDoc to give type information

Now TS has found a bad call. Arrays have slice, not trim.

具有 JSDoc 的 JavaScript

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

TypeScript adds natural syntax for providing types

TypeScript 文件

描述你的数据

在你的代码中描述对象和函数的形状

可以在你的编辑器中查看文档和问题

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

TypeScript 通过 delete 键变成 JavaScript。

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

TypeScript 文件

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

删除类型

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

JavaScript 文件