1. 简介
1.1 TypeScript 是什么
- javascript 的扩展
- 静态类型风格的类型系统
- 从 es6 到 es10 甚至是 esnext 的语法支持
- 兼容各种浏览器,各种系统,各种服务器,完全开源
1.2 TypeScript优点
- 程序更容易理解,不需要手动调试等过程,代码本身就可以上诉问题
- 杜绝一些常见的错误
- 完全兼容 Javascript
1.3 安装
安装命令
npm install -g typescript
2. 数据类型与基础语法
2.1 数据类型
最新的 ECMAScript 标准定义了 8 种数据类型:
- 7 种原始类型:
- Boolean
- Null
- Undefined
- Number
- BigInt
- String
- Symbol
- 和 Object
示例代码:
let isUse: boolean = false
let num: number = 10
let myName: string = 'dong'
let message: string = `hello, ${myName}`
let u: undefined = undefined
let n: null = null
let test: any = 2
test = 'string'
test = true
2.2 数组和元组
示例代码:
// 数组
let arrNum: number[] = [1,2,3]
arrNum.push(4)
// 元组
let user: [string, number] = ['dong', 18]
user.push('123')
user.push(12)
2.3 接口(Interface)
示例代码:
interface IPerson {
readonly id: number;
name: string;
age?: number;
}
let dong: IPerson = {
id: 1,
name: 'dong',
age: 18
}
2.4 函数(Function)
示例代码:
const add = (x: number, y: number, z?: number): number => {
if (typeof z === 'number') {
return x + y + z
} else {
return x+ y
}
}
interface ISum {
(x: number, y: number, z?: number): number
}
let add2: (x: number, y: number, z?: number) => number = add;
let add3: ISum = add;
2.5 联合类型和类型断言
示例代码:
// 联合类型
let numberOrString: number | string
numberOrString = 'abc'
numberOrString = 123
// 类型断言
function getLengh(input: string | number): number {
const str = input as string
if (str.length) {
return str.length
} else {
const number = input as number
return num.toString().length
}
}
// 类型守护
function getLengh2(input: string | number): number {
if (typeof input === 'string'){
return input.length
} else {
return input.toString().length
}
}
2.6 类(Class)
示例代码:
class Animal {
readonly name: string;
constructor(name) {
this.name = name
}
run() {
return `${this.name} is running`
}
}
const snake = new Animal('lily')
console.log(snake.run())
class Dog extends Animal {
bark() {
return `${this.name} is barking`
}
}
const xiaobao = new Dog('xiaobao')
console.log(xiaobao.run())
console.log(xiaobao.bark())
class Cat extends Animal {
static categories = ['mammal']
constructor(name) {
super(name)
console.log(this.name)
}
run() {
return 'Meow, ' + super.run()
}
}
const maomao = new Cat('maomao')
console.log(maomao.run())
console.log(Cat.categories)
2.7 类和接口
代码示例:
interface Radio {
switchRadio(trigger: boolean): void;
}
interface Battery {
checkBatteryStatus(): void;
}
interface RadioWithBattery extends Radio {
checkBatteryStatus(): void
}
class Car implements Radio{
switchRadio(trigger: boolean) {
}
}
class Cellphone implements RadioWithBattery {
switchRadio(trigger: boolean) {
}
checkBatteryStatus() {
}
}
2.8 枚举
示例代码:
enum Direction {
Up,
Down,
Left,
Right,
}
console.log(Direction.Up)
console.log(Direction[0])
2.9 泛型
示例代码:
function echo<T>(arg: T): T {
return arg
}
const result = echo(true)
function swap<T, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]]
}
const result2 = swap(['string', 123])
function echoWithArr<T>(arg: T[]): T[] {
console.log(arg.length)
return arg
}
const arrs = echoWithArr([1, 2, 3])
interface IWithLength {
length: number
}
function echoWithLength<T extends IWithLength>(arg: T): T {
console.log(arg.length)
return arg
}
const str = echoWithLength('str')
const obj = echoWithLength({ length: 10, width: 10})
const arr2 = echoWithLength([1, 2, 3])
class Queue<T> {
private data = [];
push(item: T) {
return this.data.push(item)
}
pop(): T {
return this.data.shift()
}
}
const queue = new Queue<number>()
queue.push(1)
console.log(queue.pop().toFixed())
interface KeyPair<T, U> {
key: T
value: U
}
let kp1: KeyPair<number, string> = { key: 1, value: "string"}
let kp2: KeyPair<string, number> = { key: 'str', value: 2 }
let arr: number[] = [1,2,3]
let arrTwo: Array<number> = [1,2,3]
2.10 声明文件
声明文件一般以 .d.ts
为后缀
declare var jQery: (selector: string) => any;