TypeScript
全局安装
npm install typescript -g查看版本号
tsc -v基本类型
let isDone: boolean = false
let age: number = 10
let firstName: string = 'viking'
let message: string = `Hello, ${firstName}`
let u: undefined = undefined
let n:null = null
let num: number = undefined
let notSure: any = 4
notSure = 'maybe a string'
notSure = true
notSure.myName
notSure.getName()数组和元组
数组和元组区别,数组是同一类型的集合,元素是多个类型的顺序集合
let arrOfNumbers: number[] = [1,2,3]
arrOfNumbers.push(3)
function test() {
console.log(arguments)
}
let user: [string, number] = ['viking', 20]枚举
const enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT',
}
const value = 'UP'
if (value === Direction.Up) {
console.log('go up!')
}类
大部分和JAVA类似
readonly提供属性的读写保护
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)接口
接口当中定义抽象方法
一个接口可以继承和扩展另一个接口
继承接口的类必须实现接口的所有方法
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() {
}
}也有单独描述方法的接口
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: ISum = add泛型
类型的参数化,表示参数类型的不确定性
定义在类或者方法名后面,使用
<>来表示类型在传入时确定
泛型可以多个
泛型可以约束其范围
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]内建类型
由ts提供内置的类型
//global objects
const a: Array<number> = [1,2,3]
const date = new Date()
date.getTime()
const reg = /abc/
reg.test('abc')
//build-in object
Math.pow(2, 2)
//DOM and BOM
let body = document.body
let allLis = document.querySelectorAll('li')
allLis.keys()
document.addEventListener('click', (e) => {
e.preventDefault()
})
//Utility Types
interface IPerson {
name: string
age: number
}
let viking: IPerson = { name: 'viking', age: 20 }
type IPartial = Partial<IPerson>
let viking2: IPartial = { name: 'viking' }
type IOmit = Omit<IPerson, 'name'> // 使用内建类型忽略对象的某一属性
let viking3: IOmit = { age: 20 }别名的用法
用在字面量常量
扩展对象属性
// type aliase
let sum: (x: number, y: number) => number
const result = sum(1,2)
type PlusType = (x: number, y: number) => number
let sum2: PlusType
const result2 = sum2(2, 3)
type StrOrNumber = string | number
let result3: StrOrNumber = '123'
result3 = 123
const str: 'name' = 'name'
const number: 1 = 1
type Directions = 'Up' | 'Down' | 'Left' | 'Right'
let toWhere: Directions = 'Left'
interface IName {
name: string
}
type IPerson = IName & { age: number }
let person: IPerson = { name: '123', age: 123 }类型保护
在使用typeof判断其类型自动限定其类型范围
声明文件
声明文件以.d.ts结尾,提供了供全局使用的类型