五分钟带你搞懂简易ts

// 运行方式 
// 可以使用tsc one.ts（本块代码文件命名为one.ts）转换为js后在node环境运行 (tsc one.ts -w 加-w可以监听变化)
// 也可以引入转换后的js在html中在浏览器中运行

let str:string = 'hello word'
function add(num1:number, num2:number) {
  return num1+num2
}
// console.log(add(7,3))
let f:unknown
let a:number = 10
/* 
  类型断言
*/
// str = a
f = 20
// str = a as string //只能使用定义时是unknown的变量
// 以下两种方式都可以进行转换
str = f as string 
str = <string>f
// console.log(str, 8888)

// void表示函数的返回值为空 never表示永远没有返回值
function fun2(num1:number, num2:number):void {
  console.log(num1+num2)
}
// console.log(fun2(10,12))

// 对象类型
let obj1:object = {
  name: 'lili',
  age: 18
}

// 声明对象
/*
  ? 代表可有可无
  [propName:类型] 代表任意key
*/
let obj2:{
  name: string,
  age: number,
  sex?: number
}
obj2 = {
  name: 'lili',
  age: 23,
  sex: 1
}

let obj3: {
  [propName:string]:any
}
obj3 = {
  name: 'xiaowang',
  sex: 1,
  tc: 3
}
// console.log(obj2)

// 声明函数
let fun4:(a:number, b:string) => string
fun4 = (a:number, b:string) => { return a+b }
// console.log(fun4(2,'4'))

/* 声明数组 */
let nums: number[] = [1, 2, 3, 6, 5, 9, 6, 4]
let arr1:(number|string)[] = [1, 'str', 4, 'b']
let arr2:[string, number, string] = ['a',1,'c'] //固定长度&类型的数组 -- 元祖
nums.sort((a:number, b:number)=>{
  return a-b
})
// console.log(nums)
/* 
  声明多个类型 
  联合声明：｜（或）
           &（同时）

*/
let info: string | number | number[];
info = 'tt'

let user: {name:string} & {age:number}
user = {
  name: 'lili',
  age: 14
}
// console.log(user, 9999)
// 声明时如果后面是一个具体的值，那么后面赋值就只能是固定的这个值
let num4:10
num4 = 10
let sex : "female" | "male"
sex = "male"
/* 
  枚举 enum 
  枚举只允许定义时赋初始值不允许后期修改和赋值
*/
enum sex2 {
  female = 1,
  male = 'c'
}
// console.log(sex2.female,sex2.male, 999999)
/*
  别名 type（重复利用声明）
  -一般用于声明比较复杂的情况而去多个地方都需要使用
*/
type mystate = 1|2|3|4|5
let state1: mystate = 1
let state2: mystate = 5

type myFun = (a:number, b:number) => number
let fun5:myFun = (a, b) => a*b
// console.log(fun5(4,5))

/*
  对象
  -? (代表可有可无)
  -[propName:key类型]: value类型 （代表多个不确定的key和value）
*/
type userInfo1 = {
  name: string,
  age?: number,
  [propName:string]:any
}
let obj5:userInfo1 = {
  name: 'lili',
  age: 13,
  sex: 1,
  lover: 'jack'
}
/*
  数组
  -元祖（固定元素的数组）
*/
let arr3: number[] = [1,2,6]
let arr4:[number, string, number] = [1,'ab',3]
let arr5:[string, number][] = [['lili',12],['fh',78]]

/*
  类型断言 type assertions
  -as (相当于其他类型语言中的强制类型转换)
*/
// 语法有<>和as, 变为只读
let arr6 = ['a', 3] as const //数组转化为元祖
let arr7 = <const>[78, 'jack']
let obj6 = {  //readOnly
  name: 'js',
  age: 1000
} as const
// arr6[1] = 'd'
// obj6.name = 'tt'
// 也可用作解构
function ega(a:string, b:number) {
  let str1 = 'eduwork'
  function da() {
    return a+b
  }
  return [str1, da] as const 
}
let [rstr, rfun] = ega('a',10)
// console.log(rfun(), 88) // 返回的第一个参数并不能当作函数调用
// console.log(rfun()) // 使用了as const做解构就可以了
// -！后跟！就是非空断言（告诉编译器不用检查空）

/* ts进阶 */
// 继承：把几个类共同部分提取出来，构成一个父类；子类是对其中某些的扩展
class Person {
    name: string;
    age: number;
    constructor(name:string, age:number=0) {
      this.name = name
      this.age = age
    }
    say() {
      console.log(this.name+'说话了')
    }

  }
  class Student extends Person {
    school: string;
    constructor(name:string, age:number, school:string) {
      super(name, age)
      this.school = school
    }
    study() {
      console.log(this.name+'在'+this.school+'学习')
    }
  }

  class Teacher extends Student {
    price: number;
    constructor(name:string, age:number, school:string, price:number) {
      super(name, age, school)
      this.price = price
    }
    study() {
      super.study() //被覆盖的方法可以用super调用，没被覆盖的方法可以直接this调用
      this.say()
      console.log(this.name+'在'+this.school+'学习如何教好学生')
    }
  }

  let stu1 = new Student('小明', 16, 'beida')
  stu1.study()
  let tea1 = new Teacher('张老师', 34, '清华', 8000)
  tea1.study()
  console.log(Teacher, tea1, 777)

/* 
  访问修饰符
    -public(默认)
    -protected(只能在类的内部和子类中访问)
    -private(私有的，只能在自己内部读或者写，外部无法使用)
    -readonly(只读)
 */
    interface IPerson<T1 = string, T2 = number> {
      name: T1
      age: T2,
      [propName: string]: any
      // 也可以定义方法
      say(): string
    }
    const p1:IPerson = {
      name: 'lili',
      age: 20,
      say: function (): string {
        return 'c'
      }
    }
  
    // 泛型的应用
    // 普通类
    class person {
      name: string;
      age: number;
      sex: number;
      constructor(name:string, age:number, sex:number) {
        this.name = name
        this.age = age
        this.sex = sex
      }
    }
    const pe1 = new person('lili', 14, 1)
    console.log(pe1)
    // 转换为泛型 - 类型推断
    class Person1<T1, T2> {
      name: T1;
      age: T2;
      sex: T2;
      constructor(name:T1, age:T2, sex:T2) {
        this.name = name
        this.age = age
        this.sex = sex
      }
    }
    const pe2 = new Person1('lili', 14, 1) //类型推断
    const pe3 = new Person1<string, number>('lili', 14, 1) 
    interface User {
      name: string;
      age: number;
      like?: string;
      [propname: string]: any;
      // 需要注意的是：加了方法后作为类型注解使用时对象必须要有该方法
      say(): string;
    }
    // 类和接口可以很好的结合
    class Tea3 implements User {
      name="蜡笔小新";
      age=18;
      say() {
        return"你好，我是蜡笔小新！";
      }
    }
    
    function myFun<ANY>(params: Array<ANY>) {
      return params;
    }
    myFun<string>(["123", "456"]);
    
    interface addressType {
      name: string
      phone: string
      age: number
      address: string
    }
    let addressObj: addressType = {
      name: 'lili',
      phone: '',
      age: 18,
      address: ''
    }
    const changeAddress = <K extends keyof addressType>(target: K, value: any) => {
      addressObj[target] = value
    }
    console.log(changeAddress('address', '杭州市滨江区'), 7777)

可以直接复制下来自己动手尝试哦