TS入坑

周末无聊 跟着技术胖来学点TS

大家可以去B站看看ts
文本教程 https://www.runoob.com/typescript/ts-tutorial.html

// 安装 ts cnpm install -g typescript 有tsc的全局命令
// 安装ts-node cnpm install -g ts-node // 有全局ts-node的命令
// tsc demo1.ts  + node demo1.js
// ts-node ts-node demo1.ts
const str:string = 'hello world' 
console.log('111', str)

// 申明变量
let cnt: number = 1
let str1: string = 'hello ts'
let flag: boolean = true
console.log(cnt, str1, flag)

// 定义静态类型
interface XiaoJieJie {
    name:string,
    age: number
}

const xiaohong : XiaoJieJie = {
    name: '小红',
    age: 18
}
console.log(xiaohong.name+ xiaohong.age)


// 基础对象类型
const cnt1 :number = 12
const myName:string = '123'
const vNull: null = null
const vUndefined: undefined = undefined
const vBool: boolean = true
const vVoid: void = null
// 对象类型
const XJJ:{
    name:string,
    age:number
} = {
    name:'xxxx',
    age: 23
}
// string数组
const XiaoJieJies:string [] = ['小红','小华', '小S']

// 类形式的类型
class Person{

}
const p1 :Person = new Person()

// 函数类型
const xjj: ()=> string = () => {return '1111'}

const isXjj: ()=> boolean = () => {return true}

// 类型注解 和类型推断
// 能够分析的就不用注解 不能分析出来的 需要写类型
const a1 = 1
const a2 = 'str'
const a3 = a1 + 3 // 这样的a3能自动推断出为number类型
const a4 = a1 + a2 // a4自动推断为string类型

// 下面的列子 不能推断 所以total都是显示any类型
function getTotal(one, two) {
    return one + two
}
const total = getTotal(1,2)
const total1 = getTotal(3,4)
// 
// 每一个属性的类型都是固定 

const numberArr = [1,32,4]

const numberArr1: number[] = [1,3,2,4]
const strArr:string[] =['1','2','3','4']
const undefinedArr: undefined [] = [undefined, undefined]

// arr0能自动推断为number 为string
const arr0 = [1, '1']
// 能自动推断
const arr1:(number | string |boolean) [] = [1, '1', true]

// 对象类型的数组
const xjjobj : {name: string, age:number}[] = [{name: 'xxx', age:17}, {name: 'xxxx', age: 18}]

// 使用type alias设置对象类型别名
type Lady= {name: string, age: number}
const xxxArr: Lady [] = [{name: 'xxx', age:17}, {name: 'xxxx', age: 18}]

// 也可以使用类来代替
class Madam {name: string; age:number} // 注意class的写法使用分号 
const xxxxArr2: Madam [] = [{name: 'xxx', age: 19}]

// demo2.ts
// 数组组
const xiaojiejie = ['dajiao', 'teacher', 28]
// const xiaojiejie: (string | number)[] 不能控制对应的次序
// 元组 能控制每一个员的次序
const xiaojiejie1: [string,string, number] = ['dajiao', 'teacher', 28]

// csv 元组数组
const xiaojiejieArr:[string,string, number][] = [['dajiao', 'teacher', 28]]

// interface
interface XJJModel {
    name:string,
    age:number,
    bust:number
}
const x1:XJJModel = {
    name:'xxx',
    age: 18,
    bust: 100
}
const getXJJModels =():XJJModel[] => {
    return [x1]
}

// 类型别名
type Girl1 = {
    name:string,
    age:number,
    bust:number
}

// ?: 标识是可选的 

// eg 
type Girl2 = {
    name:string,
    age:number,
    bust:number,
    wasitline?:number // 可选的值
}

const gir1:Girl2 = {name:'xxx', age: 18, bust: 111,wasitline: 14} 

console.log(gir1.name, gir1.age)

// 
interface GirlModel {
    name:string,
    age:number,
    bust: number,
    sex:string,
    // 可选
    grade985?: boolean
    // 能加任意类型 任意多的
    [propname: string]: any,
    // 函数的返回值控制
    say():string
}

const g1:GirlModel = {
    name: 'g1',
    age: 18,
    bust: 96,
    sex: '女',
    grade985: true,
    xxxx: '我是任意的',
    say() {
        return 'welcome'
    }
}
console.log(g1.name + ' '+ g1.grade985 + ' '+ g1.xxxx+ ' say'+ g1.say())

enum SEXY {
  Man,
  Woman,
}
interface Gril {
  name: String
  age: Number
  sex: SEXY
  breast: Number
  feetSize?: Number
  isTeacher?: Boolean
  say(): string
  tech(): void
}

const gg1: Gril = {
  name: '小芳',
  age: 20,
  sex: SEXY.Woman,
  breast: 98,
  feetSize: 30,
  say() {
    return 'English'
  },
  tech() {
    console.log('I canot tech')
  },
}

class gg2 implements Gril {
  name = '小丽'
  age = 19
  sex: SEXY.Woman
  breast: 99
  xxx: 'ttt'
  xxxx2: 'tttt2'
  say() {
    return 'Franch'
  }
  isTeacher = true
  tech() {
    console.log('I can tech ')
  }
}

console.log(gg1.name + ':' + gg1.say() + '::' + gg1.tech())
const gg2Instance = new gg2()
console.log(gg2Instance.name + ':' + gg2Instance.age + ':' + gg2Instance.tech())

// 自己学习的一个ts
class Rect {
  l: number
  w: number
  constructor(lo, wi) {
    this.l = lo
    this.w = wi
  }
  area() {
    return this.l * this.w
  }
  zhouLong() {
    return 2 * (this.l + this.w)
  }
}

const l1 = new Rect(20, 20)
console.log(l1.area() + ':' + l1.zhouLong())

class Sq extends Rect {
  constructor(l) {
    super(l, l)
  }
  square = true
}
console.log(new Sq(40).area() + 'is Square:' + new Sq(50).square)

interface Ci {
  pi: number
}

class Circel extends Sq implements Ci {
  pi = 3.1415
  area() {
    return super.area() * this.pi
  }
}

const c1 = new Circel(1)
console.log(c1.area())