TypeScript 快速上手

初识 TypeScript

• TypeScript是⼀种由微软开发的开源、跨平台的编程语⾔。它是JavaScript的超集，最终会被编译为

JavaScript代码

• TypeScript 主要有 3 ⼤特点

• • 始于JavaScript，归于JavaScript
  • 强⼤的类型系统
  • 先进的 JavaScript

• TypeScript 在社区的流⾏度越来越⾼，它⾮常适⽤于⼀些⼤型项⽬，也⾮常适⽤于⼀些基础库，极⼤地帮助我们提升了开发效率和体验。

安装 TypeScript

• 命令⾏运⾏如下命令，全局安装 TypeScript：

• • npm install -g typescript
  • 安装完成后，在控制台运⾏如下命令，检查安装是否成功(3.x)：tsc -V

配置 TS 程序

• 安装好依赖后可以在项目中直接创建 .ts的文件

• • 在终端 输入 ：tsc helloworld.ts 可以执行ts文件
  • 输入 node helloworld.js 可以执行js文件

• vscode⾃动编译

• • 输入：tsc --init 可以 ⽣成配置⽂件tsconfig.json
  • 解开outDir注释，并且配置，"outDir": "./js"
  • 终端 -> 运⾏任务 -> 显示所有任务->监视-tsconfig.json 后就可以实时更新

TypeScript 程序

• 类型注解

• • 在属性的后边 :类型 就是 类型的注解 例如： let arr:strign = '123'

• 基础类型

• • 布尔值（boolean）

• • • let isDone: boolean = false

• • 数字（number）

• • • let a1: number = 10

• • 字符串（string）

• • • let name: strign= 'tom'

• • undefined（undefined） 和 null（null）
  • 数组（Array）

• • • 例子1：let list1: number[] = [1, 2, 3]
    • 例子2：let list2: Array<number> = [1, 2, 3]

• • 元组 Tuple（）

• • • let t1: [string, number] 二元组 固定写法： t1 = ['hello', 10]

• • 枚举（enum）

• • • enum Color {

'Red'=0,

'Green'=1,

'Blue'=3

}

let pickColor = Color[0] 可以得到对应的--键

console.log(Color['red']) 可以得到对应键的--值

• • any（在编程阶段还不清楚类型的变量指定⼀个类型）

let notSure: any = 4

notSure = 'maybe a string'

notSure = false // 也可以是个 boolean

• • void（表示没有任何类型, ⼀般⽤来说明函数的返回值不能是undefined和null之外的值）

function fn(): void {

console.log('fn()')

// return undefined

// return null

// return 1 // error

}

• • object（ 表示⾮原始类型，也就是除 number，string，boolean之外的类型）

function fn2(obj:object):object {

console.log('fn2()', obj)

return {}

}

• • 联合类型（表示取值可以为多种类型中的⼀种需求）

function toString2(x: number | string) : string {

return x.toString()

}

• • 类型断⾔（通过类型断⾔这种⽅式可以告诉编译器他时什么类型）

⽅式⼀: <类型>值

⽅式⼆: 值 as 类型 tsx中只能⽤这种⽅式

• • 类型推断（TS会在没有明确的指定类型的时候推测出⼀个类型）

• • • 定义变量时赋值了, 推断为对应的类型
    • 定义变量时没有赋值, 推断为any类型

类（class）

类是面向对象进行编程的

• 基本示例

class Greeter {

// 声明属性

message: string

// 构造⽅法

constructor (message: string) {

this.message = message

}

创建类的实例const greeter = new Greeter('world')

调⽤实例的⽅法console.log(greeter.greet())

• 继承

class Animal {

run (distance: number) {

console.log(`Animal run ${distance}m`)

}}

class Dog extends Animal {

cry () {

console.log('wang! wang!')

}}

const dog = new Dog()

dog.cry()

dog.run(100) // 可以调⽤从⽗中继承得到的⽅法

• 公共，私有与受保护的修饰符

• • 默认为 public（默认值, 公开的外部也可以访问）

• • • 将⼀个成员标记成 public。 我们可以⽤下⾯的⽅式来重写上⾯的 Animal 类

• • private（只能类内部可以访问）

• • • 当成员被标记成 private 时，它就不能在声明它的类的外部访问。

• • protected（类内部和⼦类可以访问）

• • • protected 修饰符与 private 修饰符的⾏为很相似，但有⼀点不同，protected成员在派⽣类中仍然可以访问。