TS学习day01 

  1 // interface Person {
  2 //   firstName:string
  3 //   lastName:string
  4 // }
  5 // function greeter(person:Person){
  6 //   return "hello," + person
  7 // }
  8 // let user = {
  9 //   firstName:"Yee",
 10 //   lastName:"Huang"
 11 // }
 12 // greeter(user)
 13 class User {
 14   fullName:string
 15   firstName:string
 16   lastName:string
 17 
 18   constructor(firstName:string,lastName:string){
 19     this.firstName = firstName
 20     this.lastName = lastName
 21     this.fullName = this.firstName + ' ' + this.lastName
 22   }
 23 }
 24 
 25 interface Person {
 26   firstName: string
 27   lastName: string
 28 }
 29 
 30 function greeter(person: Person) {
 31   return 'Hello, ' + person.firstName + ' ' + person.lastName
 32 }
 33 
 34 let user = new User('Yee', 'Huang')
 35 
 36 console.log(greeter(user))
 37 
 38 //t2是一个元组，元组是已知数量和类型的数组
 39 let t2:[string,number]
 40 t2 = ['hello',10]
 41 
 42 //enum 枚举类型 enum类型是对js标准数据类型的一个补充。使用枚举类型可以为 一组数值赋予友好名字 enum在js中是生成对象
 43 enum Color {
 44   Red,//0
 45   Green,//1
 46   Blue//2
 47 }
 48 //枚举数值 Color.Red|Green|Blue访问的结果是0，1，2，Color[0|1|2]访问的结果是Red,Green,Blue
 49 let myColor:Color = Color.Green
 50 console.log(myColor,Color.Red,Color.Blue)
 51 
 52 enum Color2{
 53   Red = 2,
 54   Green = 4,
 55   Blue = 6
 56 }
 57 let myColor2 = Color2//Color2其实就是一个对象
 58 console.log(myColor2,myColor2.Red)
 59 
 60 
 61 //object类型
 62 // object表示非原始类型，除number，string，boolean之外的类型
 63 /**
 64  * 使用object类型，可以更好的标是Object.create
 65  */
 66  function fn2(obj: object) : object{
 67   console.log("fn2()",obj)
 68   return {}
 69 }
 70 fn2(new String("aaa"))
 71 fn2(String)
 72 
 73 //联合类型
 74 // 表示可以取多种类型中的一种
 75 function getLength(x: number | string) {
 76   // return x.length // error
 77   // 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的 所有类型里共有的属性或方法 ：
 78   //访问length属性会报错，因为number类型上没有length属性
 79   if(typeof x === "number"){
 80     return x.toString().length
 81   }else {
 82     return x.length
 83   }
 84 
 85   //下面这样写会报错
 86   // if(x.length){
 87   //   return x.length
 88   // }else{
 89   //   return x.toString().length
 90   // }
 91 }
 92 getLength("1234")
 93 
 94 //类型断言
 95 function getLength2(x: number | string) {
 96   if((<string>x).length){
 97     return (<string>x).length
 98   }else{
 99     return x.toString().length
100   }
101 }
102 
103 //ts的核心原则是对值所具有的结构进行类型检查
104 /**
105  * 在TypeScript中，使用接口Interface定义对象类型
106  * 
107  * 可选属性使用？
108  * 只读属性使用readonly
109  */
110 
111 //interface里面定义对象不需要,
112 interface IPerson{
113   readonly id:number
114   name:string
115   age:number
116   sex:boolean,
117   score?:number
118 }
119 const person1:IPerson = {
120   id:1,
121   name:"tom",
122   age:20,
123   sex:false,
124   // score:10//error
125 }
126 person1.sex = true
127 // person1.id = 2//error
128 
129 /**
130  * interface可以描述javascript中对象拥有的各种各样的外形。除了描述带有属性的普通对象，接口也可以描述函数类型
131  * 用接口表示函数类型，为接口定义一个调用签名，表示了参数列表和返回值的函数定义
132  */
133 interface SearchFnuc{
134   (souce:string,subString:string):boolean
135 }
136 const mySearch:SearchFnuc = function(souce:string,sub:string):boolean{
137   return souce.search(sub) > -1
138 }
139 console.log(mySearch("abcd","v"))
140 //接口可以继承
141 interface Alarm{
142   alert():any
143 }
144 interface Light{
145   lightOn():void
146   lightOff():void
147 }
148 interface LightAlarm extends Alarm,Light {
149   
150 }

 

posted @ 2021-06-22 17:01  jiangchengzi  阅读(50)  评论(0)    收藏  举报