TypeScript 基础知识

提示

TypeScript 是 JavaScript 的超集，添加了可选的静态类型。本文总结了 TypeScript 的基础语法和常用特性。

1. 基础类型

TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

布尔值 (Boolean)

let isDone: boolean = false

数字 (Number)

let decLiteral: number = 6
let hexLiteral: number = 0xf00d

字符串 (String)

let name: string = 'bob'
let sentence: string = `Hello, my name is ${name}`

数组 (Array)

let list: number[] = [1, 2, 3]
let list: Array<number> = [1, 2, 3] // 泛型语法

元组 (Tuple)

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

let x: [string, number]
x = ['hello', 10] // OK
// x = [10, 'hello'] // Error

枚举 (Enum)

enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green

Any

为那些在编程阶段还不清楚类型的变量指定一个类型。

let notSure: any = 4
notSure = 'maybe a string instead'
notSure = false

Void

void 类型像是与 any 类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void。

function warnUser(): void {
  console.log('This is my warning message')
}

Null 和 Undefined

默认情况下 null 和 undefined 是所有类型的子类型。

let u: undefined = undefined
let n: null = null

Never

never 类型表示的是那些永不存在的值的类型。例如，never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
  throw new Error(message)
}

Object

object 表示非原始类型，也就是除 number，string，boolean，symbol，null 或 undefined 之外的类型。

declare function create(o: object | null): void
create({ prop: 0 }) // OK
create(null) // OK

2. 类型断言

有时候你会比 TypeScript 更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

let someValue: any = 'this is a string'

// 尖括号语法
let strLength: number = (<string>someValue).length

// as 语法 (推荐，因为在 JSX 中只能使用 as 语法)
let strLength: number = (someValue as string).length

3. 接口 (Interfaces)

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。

interface LabelledValue {
  label: string
  size?: number // 可选属性
  readonly x: number // 只读属性
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label)
}

let myObj = { size: 10, label: 'Size 10 Object', x: 100 }
printLabel(myObj)

4. 函数 (Functions)

函数类型

function add(x: number, y: number): number {
  return x + y
}

let myAdd = function (x: number, y: number): number {
  return x + y
}

可选参数和默认参数

function buildName(firstName: string, lastName?: string) {
  if (lastName) return firstName + ' ' + lastName
  else return firstName
}

function buildName(firstName: string, lastName = 'Smith') {
  return firstName + ' ' + lastName
}

5. 泛型 (Generics)

泛型是创建可重用组件的重要工具，一个组件可以支持多种类型的数据。

function identity<T>(arg: T): T {
  return arg
}

let output = identity<string>('myString')
let output2 = identity('myString') // 类型推论

6. 类 (Classes)

TypeScript 支持基于类的面向对象编程。

class Greeter {
  greeting: string
  constructor(message: string) {
    this.greeting = message
  }
  greet() {
    return 'Hello, ' + this.greeting
  }
}

let greeter = new Greeter('world')

修饰符

• public: 默认，可以在任何地方访问。
• private: 不能在声明它的类的外部访问。
• protected: 与 private 类似，但可以在派生类中访问。
• readonly: 只读属性，必须在声明时或构造函数里被初始化。

class Animal {
  private name: string
  constructor(theName: string) {
    this.name = theName
  }
}

// new Animal("Cat").name // Error: 'name' is private;