TypeScript基本知识（1）

1.环境准备

1. npm i typescript -g
2. tsc -init
3. tsc -w // 监听
4. node index.js

第二种:
npm i ts-node -g
ts-node index.ts

2.基本类型

let str: string = 'a2a'
let num: number = NaN
let v1: void = null
let n: null = null
let u: undefined = undefined
let a: any = 1
let b: unknown = 2 // unknown只能赋值给自身或any  str = b 报错
let kobe: unknown = { name: 'aa' } 
 //unknown无法读取任何属性 ，方法也不可以调用kobe.name， any可以调用  unknown类型比any更安全 

3.object类型

// Object包含所有类型
let a1: Object = 123
let a2: Object = 'aa'
let a3: Object = false
let a4: Object = []
// obejct指向引用类型
let a5: object = []
let a6: object = {}
let a7: object = () => 123
// {}赋值任意类型 字面量模式
let a8: {} = 123
let a9: {} = 'aa'

4.interface

// interface定义一种约束，让数据结构满足约束的格式
// 不能多属性，少属性
// 同名的会重合，取并集
// extends接口继承
interface obj {
    name: string,
    [propName: string]: any, // 索引签名
    readonly cb: ()=> boolean // 只读
}
let obj1: obj = {
    name: 'aa',
    age: 18,
    cb: ()=> false
}
interface fn { 
    (name:string):number[]
}
const fn1: fn = (name: string) => { 
    return [1]
}

interface X { 
    name: string,
    age:number
}
let arr: X[] = [{name:'zs',age:18}, {name:'ls',age:18}]

// 二位数组 number[][]
let arr1: number[][] = [[3], [4]]

函数

// 函数默认的参数 | 函数可选参数
function add(a: number = 10, b?: number): number { 
    return a + b
}
interface User { 
    name: string,
    age:number
}
function getUser(user: User): User { 
    return user
}

// this 在ts中可以定义this类型，js中不行，必须第一个参数定义this的类型
interface Obj { 
    user: number[]
    add:(this:Obj, nun:number)=>void
}
let obj: Obj = {
    user: [1, 2, 3],
    add(this: Obj, num: number) { 
        this.user.push(num)
    }
}
obj.add(4)

联合类型 | 交叉类型 & 类型断言 as

interface People { 
    name: string
    age: number
}
interface Man { 
    sex: number
}

const xiaoman = (man: People & Man) => { 
    console.log(man)
}

xiaoman({ name: 'zs', age: 18, sex: 1 })

interface A { 
    run: string
}

interface B { 
    build: string
}

let fn = (type: A | B): void => {
    console.log((type as A).run)
    console.log((<A>type).run)
}

内置对象

let div: HTMLElement = document.querySelector('div')
let div1: NodeList = document.querySelectorAll('div')
let local: Storage = localStorage
let lo: Location = location
let promise: Promise<string> = new Promise((r) => r('aaa'))
let cookie: string = document.cookie