开发环境配置

在入门前我们先配置一个基本开发环境，笔者采用的是 vscode 基本配置如下：

yarn global add typescript
mkdir ts-node
cd ts-node && yarn init -y
yarn add @types/node

# 生成 tsconfig.json
tsc --init

# 新建 index.ts 文件
touch index.ts

# 编译 ts 的命令
tsc index.ts # 会在根目录生成 index.js

# vscode 可以在任务菜单/终端/运行任务
tsc 监视: -tsconfig.json # 热编译
tsc 构建: -tsconfig.json # 单次编译

变量类型

TypeScript 中的数据类型有：

undefined number string boolean enum any void array tuple null

enum 枚举类型 | void 空类型 | tuple 元祖类型

// === undefined
let v1: number // 注意：const v1: number 报错 => 'const' declarations must be initialized.

// === number
let v2: number = 2

// === string
let v3: string = 'guodada'

// === boolean
let v4: boolean = true

// === enum
enum v5 {
  name = 'guodada',
  age = 18
}
console.log(v5.age) // 18

// === any
let v6: any = 'guodada'
v6 = 18

// === array
let v7: number[] = [1, 2] // ... array 后面再提

• any: any 表示任意类型，可以在类型不确定时使用
• void: 正好相反，表示没有类型，一般用于没有返回值的函数
• null、undefined 比较少用

这里列举了常用的类型，如果还有其他类型用到，可以参看文档。

数组和元祖

数组有两种声明方式：

let arr1: string[] = ['hello', 'world']
let arr2: Array<string> = ['hello', 'world'] // 泛型的声明，详见后面章节介绍

元组是一种特殊的数组：

let arr1: [string, number] = ['hello', 123]

元组越界时，会以联合类型来处理，具体请查阅文档

类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

以下代码虽然没有指定类型，但是会在编译的时候报错：

let myFavoriteNumber = 'seven'
myFavoriteNumber = 7

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

事实上，它等价于：

let myFavoriteNumber: string = 'seven'
myFavoriteNumber = 7

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：

let myFavoriteNumber
myFavoriteNumber = 'seven'
myFavoriteNumber = 7

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。

语法

<类型>值 或者 值 as 类型

在 tsx 语法（React 的 jsx 语法的 ts 版）中必须用后一种。

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

function getLength(something: string | number): number {
  return something.length
}

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

上例中，获取 something.length 的时候会报错。 因为 something 可能是 number 类型 不存在 length 属性

此时可以使用类型断言，将 something 断言成 string：

function getLength(something: string | number): number {
  return (<string>something).length // 或者  (something as string).length
}

getLength(1)
getLength('abc')

编译结果

function getLength(something) {
  return something.length
}
getLength(1) // undefined
getLength('abc') // 3

类型断言的用法如上，在需要断言的变量前加上 <Type> 即可。

类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的：

function toBoolean(something: string | number): boolean {
  return <boolean>something
}

// Conversion of type 'string | number' to type 'boolean'
// Type 'number' is not comparable to type 'boolean

参考

typeScript 语言手册