Typescript
icon
password
Intro
- JavaScript:20多年来成为广泛使用的跨平台语言。
- 初始作为小型脚本语言,现支持大规模前后端应用。
- JavaScript开发因语言与程序复杂性不匹配而困难。
- 程序员常见错误为类型错误。
- TypeScript目标:作为JavaScript的静态类型检查器。
- 无JavaScript背景者应先学习JavaScript基础。
如果我们查看当前目录,我们会在 hello.ts 旁边看到一个 hello.js 文件。这是 hello.ts 文件在 tsc 编译或转换为纯 JavaScript 文件后的输出。如果我们检查内容,我们会看到 TypeScript 在处理 .ts 文件后会输出什么:
Keep in mind, we don’t always have to write explicit type annotations. In many cases, TypeScript can even just infer (or “figure out”) the types for us even if we omit them.
请记住,我们并不总是需要编写显式类型注释。在许多情况下,TypeScript 甚至可以为我们推断(或“找出”)类型,即使我们忽略它们。
- JavaScript Value Behaviors: 不同操作下,JavaScript值展示的行为取决于其类型。
- TypeScript's Goal: TypeScript旨在作为JavaScript的静态类型检查器。
- Static Type-Checking: 静态类型检查帮助提前识别错误,提高代码质量。
- Non-Exception Failures: TypeScript处理JavaScript中的非异常失败。
- Types for Tooling: TypeScript的类型系统增强了代码编辑工具的功能。
- tsc, the TypeScript Compiler: TypeScript编译器tsc将TypeScript代码转换为JavaScript。
- Explicit Types: 明确的类型注释增强了函数和变量的可读性和健壮性。
- Erased Types: 编译过程中TypeScript的类型注释会被移除,不影响运行时行为。
- Downleveling: TypeScript可以将高版本ECMAScript代码转换为低版本。
- Strictness: TypeScript提供严格模式,增加类型检查的严格性。
- noImplicitAny: noImplicitAny标志防止隐式任意类型的使用,增加代码安全性。
- strictNullChecks: strictNullChecks标志增强null和undefined的处理,防止常见错误。
- JavaScript Value Behaviors:
- TypeScript's Goal:
- Static Type-Checking:
- Non-Exception Failures:
- Types for Tooling:
- tsc, the TypeScript Compiler:
- Explicit Types:
- Erased Types:
- Downleveling:
- Strictness:
- noImplicitAny:
- strictNullChecks:
string
- 字符串类型,表示文本数据。- 描述:用于表示文本数据的类型。
- 例子:
let greeting: string = "你好, 世界";
number
- 数值类型,不区分整数和浮点数。- 描述:表示数字,无整数或浮点数之分。
- 例子:
let age: number = 30;
boolean
- 布尔类型,表示真或假。- 描述:用于表示真值(true)或假值(false)。
- 例子:
let isOpen: boolean = true;
Arrays
- 数组类型,表示同类型元素的集合。- 描述:用于表示同一类型元素的有序集合。
- 例子:
let numbers: number[] = [1, 2, 3];
any
- 任意类型,可分配给任何值。- 描述:不进行特定类型检查的类型。
- 例子:
let randomValue: any = "Hello"; randomValue = 100;
noImplicitAny
When you don’t specify a type, and TypeScript can’t infer it from context, the compiler will typically default to
any
.You usually want to avoid this, though, because
any
isn’t type-checked. Use the compiler flag noImplicitAny
to flag any implicit any
as an error.Type Annotations on Variables
- 变量类型注解。- 描述:用于明确变量的数据类型。
- 例子:
let myString: string = "测试";
Functions
- 函数类型,定义输入输出的数据类型。- 描述:指定函数参数和返回值的类型。
- 例子:
function greet(name: string): string { return "Hello " + name; }
- 参数类型注解 (Parameter Type Annotations): 函数参数的类型定义。
- 返回类型注解 (Return Type Annotations): 明确函数返回值类型。
- 匿名函数 (Anonymous Functions): 没有具名的函数。
例子:
function greet(name: string) { ... }
例子:
function getNumber(): number { return 123; }
例子:
let myFunction = function(user: string) { ... };
- 对象类型 (Object Types): 定义对象属性及其类型。
- 可选属性 (Optional Properties): 对象属性可能不存在。
例子:
function printCoord(pt: { x: number; y: number }) { ... }
例子:
function printName(obj: { first: string; last?: string }) { ... }
- 联合类型 (Union Types): 值可以是几种类型中的一种。
例子:
function printId(id: number | string) { ... }
联合类型(Union Types)是 TypeScript 中一种非常有用的特性,它允许你创建一个新类型,这个新类型可以是几个已有类型中的任意一个。这是通过使用多种操作符组合现有类型来实现的。
定义联合类型
联合类型是由两个或更多其他类型形成的一个新类型,表示的值可以是这些类型中的任何一个。每个参与组成联合类型的类型都被称为联合的成员。
让我们来看一个例子,这个函数可以接受字符串或数字类型的参数:
使用联合类型
向符合联合类型的变量提供值很简单,只需提供任何一个联合成员的类型即可。但如果你拥有一个联合类型的值,该如何操作呢?
TypeScript 只允许对联合类型的每个成员都有效的操作。例如,如果你有一个
string | number
类型的联合,你就不能使用只在字符串上可用的方法:解决方案是通过代码对联合类型进行缩小(narrowing),类似于在没有类型注解的 JavaScript 中的做法。当 TypeScript 可以基于代码结构推断出一个更具体的类型时,就会发生缩小。
例如,TypeScript 知道只有字符串类型的值会有
typeof
值 "string"
:另一个例子是使用像
Array.isArray
这样的函数:注意,在
else
分支中,我们不需要做任何特别的事情 - 如果 x
不是 string[]
,那么它一定是 string
。有时候,你可能会有一个联合类型,其中所有成员都有一些共同点。例如,数组和字符串都有
slice
方法。如果一个联合中的每个成员都有一个共有属性,你可以不缩小类型就使用该属性:理解联合类型可能有些混淆,因为联合类型似乎拥有那些类型属性的交集。这并非偶然 - 联合的名称来自类型理论。通过取每种类型的值的联合来组成
number | string
这样的联合。注意,给定两组对应的事实集合,只有这些事实的交集适用于这些集合的联合本身。例如,如果我们有一个房间里的人都很高并且戴着帽子,另一个房间里的人都是西班牙语说话者并且戴着帽子,那么合并这些房间后,我们唯一知道的关于每个人的事实是他们必须戴着帽子。- 类型别名 (Type Aliases): 给类型起一个别名。
例子:
type Point = { x: number; y: number; };
- 接口 (Interfaces): 描述对象的结构。
- 类型别名与接口的区别 (Differences Between Type Aliases and Interfaces): 类型别名不可扩展,接口可扩展。
例子:
interface Point { x: number; y: number; }
例子:
interface Animal { name: string; } interface Bear extends Animal { ... }
- 类型断言 (Type Assertions): 手动指定一个值的类型。
例子:
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;
- 字面量类型 (Literal Types): 定义具体的字符串或数字类型。
- 字面量类型推断 (Literal Inference): 根据字面量推断类型。
例子:
let x: "hello" = "hello";
例子:
const obj = { counter: 0 } as const;
- null 和 undefined: 表示无值或未初始化的值。
- 非严格空检查关闭 (strictNullChecks off):
null
和undefined
可赋值给任意类型。 - 非严格空检查开启 (strictNullChecks on): 对
null
和undefined
进行严格检查。 - 非空断言操作符 (Non-null Assertion Operator (Postfix !)): 断言值不为
null
或undefined
。
例子:
let a: null = null; let b: undefined = undefined;
例子: 在配置中设置
strictNullChecks: false
。例子: 在配置中设置
strictNullChecks: true
。例子:
let x: number | null; console.log(x!.toFixed());
- 枚举 (Enums): 定义一组命名常量。
例子:
enum Color {Red, Green, Blue}
- 较不常见的原始类型 (Less Common Primitives):
bigint
和symbol
。
例子:
const big: bigint = 100n; const uniqueSymbol = Symbol("unique");
Last update: 2024-01-28
icon
password
I am currently in Melbourne
I am Looking for a Data Analytics Role…