TypeScript起步

全局安装TypeScript

npm install typescript -g
# 安装后查看版本信息
tsc -v

Hello World

// app.ts
let str:string = 'TS'
let template:string = `web ${str}`
console.log(template)

// 编译后得到 app.js
var str = 'TS';
var template = "web ".concat(str);
console.log(template);

执行tsc app.ts会将该文件编译为一个同名的js文件

let num:number = 123
let notANumber:number = NaN
let infinityNumber:number = Infinity
let decimal:number = 6		// 十进制
let hex:number = 0xf00d		// 十六进制
let binary:number = 0b1010	// 二进制

let b:boolean = false         // 接收一个布尔值
let bv:boolean = Boolean(23)

let bg:Boolean = new Boolean('314')   // 接收一个Boolean对象

console.log(b)    // false
console.log(bv)   // true
console.log(bg.valueOf()) // true

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

function fnVoid ():void {
  return        // ok
  return 123    // error, 不能将类型“123”分配给类型“void”。
}

console.log(u, n)

// void类型的变量不可以给别的变量赋值
let str:string = '123'
str = u		// error

任意类型，unknown和any

unknown类型比any类型更安全
unknown类型不能去调用属性和方法
unknown只可以赋值给unknown 和 any

接口和对象

interface A {
  name:string
}
interface A {
  age: number
}
// 两个接口名称一样会自动合并
// 对象里的属性需要和接口中的一样, 不能多也不能少
let obj:A = {
  name: 'hhx',
  age: 18
}
console.log(obj)

interface Person {
  name:string,
  age?:number     // 表示可选
}
let p:Person = {
  name:'张三'
}

// 继承
interface A {
  name:string
}
interface B extends A {
  age:number
}
let p:B = {
  name:'张三',
  age:123
}

interface Person {
  readonly name:string,		// 只读属性
  age?:number,            	// 可选属性
  cb():void,              	// 函数
	// 当不确定接口中有多少个属性时,可以使用可索引类型接口
	// 可索引类型接口可以用数字去索引,也可以用字符串去索引
  [propName:string]:any		// 表示用任意的字符串去索引Person得到的结果是any类型,[确定属性和可选属性的类型都必须是它的类型的子集]
}

let p:Person = {
  name:'张三',
  cb():void {
    return
  }
}

数组

let arr:number[] = [12, 23]
let str:string[] = ['sf', 'df']
let bvh:any[] = [12, '34', true]

interface ArrNumber {
  [index:number]:string
}

let arr:ArrNumber = ['1', '3', '4']

函数

// 默认值
const fn = function (name:string, age:number = 30):string {
  return name + age
}
// 可选
const fn2 = function (name:string, age?:number):string {
  return name + age
}

interface User{
  name:string,
  age:number
}
const fn3 = function (user:User):User {
  return user
}

let a = fn('张三', 500)
let b = fn3({
  name: '张三',
  age: 18
})

联合类型

let phone:number | string = 23    // 联合类型(赋值既可以是number,也可以是string)

let fn = function (type:number | boolean):boolean {
  return !!type   // 强转为boolean型
}

let result1 = fn(0)
let result2 = fn(false)

交叉类型

合并

interface People {
	name:string,
	age:number
}
interface Man {
	sex:string
}
const xiaoman = (man:People & Man):void => {
	console.log(man)
}
xiaoman({
	name: '小满今天坏掉了',
	age: 108,
	sex: '男'
})

内置对象

const regexp:RegExp = /\w\d\s/
const date:Date = new Date()
const error:Error = new Error('错误')
const list:NodeList = document.querySelectorAll('#list li')
const body:HTMLBodyElement = <HTMLBodyElement>document.body   // HTMLElement -> HTMLBodyElement 类型转换
const div:HTMLDivElement = document.querySelector('div')
console.log(div)
document.addEventListener('click', (e:PointerEvent) => {
  console.log(e)
})

function promise():Promise<string> {
  return new Promise<string>((resolve, reject) => {
    resolve('fefg')
  })
}

promise().then(res => {
  console.log(res)
})