一文带你搞定typescript语法

第一部 变量，never，元组，可选链，联合等

var name:string = "zlk"
var age:number = 18
var num1:number = 222
var num2:number = 0x100
var num3:number = 0o100
console.log(name,age,num1,num2,num3)


//数组
var list:string[] = []
list.push('abc')
list.push('def')
console.log(list)



//布尔
var bool1 = false
var bool2 = 20 > 22
console.log(bool1,bool2)


//对象
var obj = {
    name:'zlk',
    age:123
}
console.log(obj.name,obj.age)


//字符串 可加可不加 不加会自动推到
var txt:string = "str"
var num = 18
console.log(txt,num)


//symbol 可以定义相同的命名
var title1 = Symbol('title')
var title2 = Symbol("title")
const info = {
    [title1]:'程序员',
    [title2]:'老师'
}
console.log(info[title2])


//和js一样，支持所以类型
var antest:any = 123



//any 和 unknown区别在于
// any可以用于任何类型
// unknown只能用在any和unknown类型中
function foo(){
 return 'abc'
}
function bee(){
    return 123
}
var flag = true
var feast:unknown

if (flag){
    feast = foo()
}else {
    feast = bee()
}
// var message:string = feast 错误
// var conter:number = feast




// 从不会出现的值never 用例
function never(state:string|number|boolean){
    switch (typeof state){
        case 'string':{
            console.log('string处理')
            break
        }
        case 'number':{
            console.log('number处理')
            break
        }
        case 'boolean':{
            console.log('boolean处理')
            break
        }
        //正常不会走到这里
        default:{
            const nem:never = state
        }
    }
}
never(123)
never('abc')
never(true)






//数组的弊端 无法在一个数组里加入多种类型，any可以，但是用得时候不知道是什么类型
// const list4: any[] = ['abc',123,true]
// let show = list4[1]
// console.log(show.length)

//tuple 元组的特点
const list5 :[string,number,boolean] = ['abc',123,true]
const show1 = list5[0]
const show2 = list5[1]
const show3 = list5[2]
//元组用例
function usestate<T>(state:T){
    let content = state;
    const usecont = (newstate:T) => {
        content = newstate
    }
    const str :[T,(newstate:T) => void] = [content,usecont]
    return str
}
const [one,two] = usestate(12)
two(10)
const [title,settitle] = usestate("abc")
const [haha,setflag] = usestate(true)




// 返回值可以不加类型如果想加在()后，他会推导
function abc(message:string){
    return message
}



//item参数不用加类型，因为这个匿名函数有上下文，可以推导
var list6 = ['abc','bnm','jkl']
list6.forEach((item) => {
    item.split(" ")
})

function print(point:{x:number,y:number,z?:number}){
    console.log("x坐标",point.x)
    console.log("y坐标",point.y)
    console.log("z坐标",point.z)
}
print({x:1,y:2})
print({x:1,y:2,z:3})

function cdprint(a:number|string){
    console.log(a)
}
cdprint(123)
cdprint("abcd")



//起别名
type IDaios = number|string
function printID(id:IDaios){
    if (typeof id === 'string'){
        console.log("你的id是:",id.toUpperCase())
    }else {
        console.log("你的id是",id)
    }
}
printID('a')
printID(1)


// ?. 可选链    短路 打印undefined
type Person = {
    name:string,
    friend?:{
        name:string,
        age?:number,
        grilfriend?:{
            name:string,
            age:number
        }
    }
}
const shenye: Person = {
   name:'zlk',
   friend:{
       name:'kobe'
   }
}

// ?. 可选链    短路 打印undefined

// 另一个文件
console.log(shenye.name)
console.log(shenye.friend?.age)
console.log(shenye.friend?.grilfriend?.name)
export {}



// as 类型断言  TypeScript只知道该函数会返回 HTMLElement ，但并不知道它具体的类型
// var btndiv = document.getElementById('div') as HTMLImageElement
// btndiv.src = './../haha'


// 非空断言 表示可以确定某个标识符是有值的，跳过ts在编译阶段对它的检测
const zlkya = function (message?:string){
    console.log(message!.toUpperCase())
}
zlkya('zlk')

// !! 和 ??
const abcd = 'hello world'
console.log(!!abcd) //true

let hanfei:string|null = null
let relust = hanfei ?? 'nihao'
console.log(relust) //nihao

//字面量类型
const nihao1:'hello' = 'hello'
// nihao1 = 'hahah' 报错

//字面与联合使用
type zimian = 'left'|'right'|'bottom'

const zimianfun = function (zm:zimian){
    console.log(zm)
}
zimianfun('left')

第二部分 函数

// 类型缩小
const typed = function (num:number|string){
    if (typeof num === "number"){
        return num * 2
    }
    if (typeof num === "string"){
        console.log(num)
    }
}

const a = typed(2)
console.log(a)
typed("abc")


//类型缩小 实例
const obj = {
    name:"zlk"
}

class Date{
    friend(){
        console.log('shili')
    }
}
let shili = new Date()
const typed1 = function (date:Date|string){
    if (date instanceof Date){
        console.log(date.friend())
    }else {
        console.log(date)
    }
}
typed1(obj.name)
typed1(shili)


//函数 类型缩小
type fish = {swim:() => void}
type Dog = {run:() => void}

function move(animal:fish|Dog){
    if ('swim' in animal){
        animal.swim()
    }else {
        animal.run()
    }
}

//函数类型举例
type CalcFun = (num1:number,num2:number) => number
function call(fn:CalcFun){
    console.log(fn(20,30))
}
function sum(num1:number,num2:number){
    return num1 * num2
}
function mul(num1:number,num2:number){
    return num1 + num2
}
call(sum)
call(mul)

//函数重载
function abcd1(num1:string,num2:string):string
function abcd1(num1:number,num2:number):number
function abcd1(num1:any,num2:any):any{
    return num1+num2
}

console.log(abcd1(20,20))
console.log(abcd1("hah","lala"))


//参数可能字符串可能是数组,求长度
// 方式一 联合
function suma(num:string|any[]){
    return num.length
}
//方式二  函数重载
function sumb(num:string):string
function sumb(num:any[]):any[]
function sumb(num:any):any{
   return  num.length
}

console.log(suma(['a','b','c','d']))
console.log(sumb('hhhhhhhh'))

//制定this类型
// type haaha = {
//     name:string
// }
// function sumc(this:haaha){
//     console.log(this.name)
// }



export {}

第三步 类，类继承

// 类的基本使用
class person {
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    run(){
        return this.name + 'person'
    }
}
let p = new person('zlk',18)
console.log(p.name)
console.log(p.age)
console.log(p.run())


//继承

class friend{
    name:string = ''
    age:number = 0
    constructor(name:string,age:number) {
        this.name = name
        this.age = age
    }
    run(){
        return this.name.toUpperCase()
    }
}
class xiaoming extends friend{
    son:number
    constructor(name:string,age:number,son:number) {
        super(name,age); //调用父 构造器constructor
        this.son = son
    }
}
class xiaohong extends friend{
    son:number
    constructor(name:string,age:number,son:number) {
        super(name,age); //调用父 构造器constructor
        this.son = son
    }
}


let pa = new xiaoming('xiaoming',16,18)
let pa2 = new xiaohong('xiaohong',26,28)
console.log(pa.name)
console.log(pa.run())
console.log(pa.son)
console.log(pa.age)

console.log(pa2.name)
console.log(pa2.son)

//redonly  只读

class sonan{
   readonly name:string = 'hong'
}
const p3 = new sonan()
console.log(p3.name)
// p3.name = 'wang'  不能被修改




export {}

第四部 接口，泛型与枚举

// type IPoint = {
//     x:number
//     y:number
// }
interface IPoint {
    x:number
    y:number
    friend?:{
        name:string
        age?:number
        readonly rie:string
}
}

const obj:IPoint = {
    x:1,
    y:2,
    friend:{
        name:'zlk',
        rie:'zhf'
    }
}

console.log(obj.x)
console.log(obj.friend?.name)
console.log(obj.friend?.age)
// obj.friend.rie = 'zlk'

//索引类型  规定别人以什么方式
interface Front{
    [index:number]:string
}
const front:Front = {
    1:'html',
    2:'css',
    3:'javascript',
    4:'vue',
    5:'node',
    6:'wxcode',
    7:'ts',
    // abc:8
}

//面向接口开发
interface Iswim{
    swiming:() => void
}
interface Irun{
    runing:() => void
}
class person implements Iswim,Irun{
    swiming(){
        console.log("swiming")
    }
    runing(){
    console.log('runing')
    }
}

const p = new person()
function swin(swing:Iswim){
    return swing.swiming()
}
swin(p)
//枚举类型
enum Direct{
    LEFT,
    RIGHT,
    TOP,
    BOTTOM
}
function dir(direct:Direct){
    switch (direct) {
        case Direct.LEFT:
            console.log('left')
            break
        case Direct.BOTTOM:
            console.log('bottom')
            break
        case Direct.TOP:
            console.log('top')
            break
        case Direct.RIGHT:
            console.log('right')
            break
        default:{
                const mydirect:never = direct
            }
    }

}
dir(Direct.BOTTOM)
dir(Direct.LEFT)

// 泛型
// 普通我们这样做，但是类型写死了，我没调用的时候传参无法传其他类型
function dir2(num:number):number{
    return num * 2
}
// 如果我们:any 是可以传多种类型的，但是参数丢失了类型信息，我们返回的将是any类型，可是我们想要的是number类型呀

// 所以泛型可以把类型交给调用者决定
function dir3<T,O>(num:T ,num2:O):T{
    return num
}
dir3<string,number>('123',1)
dir3<number,string>(123,'123')

//泛型接口
interface IFoo<T>{
    initialValue:T,
    valueList:T[],
    handle:(value:T) => T

}
const foo:IFoo<number> = {
    initialValue:0,
    valueList:[0,1,2],
    handle:function (value:number) {
        return value
    }
}
console.log(foo.valueList)
console.log(foo.handle)

// 泛型类
class person2<T>{
    x:T
    y:T
    constructor(x:T,y:T) {
        this.x = x
        this.y =y
    }
}
const p1 = new person2<number>(1,2)
const p2 = new person2(1,2)
const p3:person2<number> = new person2(1,2)

//泛型约束

interface Ilength{
    length:number
}
function abc<T extends Ilength>(num:T){
    console.log(num.length)
}
abc([1,2,3])
abc('abcde')
abc(['a','b','c'])