TypeScript学习：初学

安装等配置指令 安装TypeScript

npm i typescript -g

检查版本

tsc -v npx tsc -v

运行ts文件及js文件

npx tsc 文件名.ts node 文件名.js

安装ts-node脚手架

npm i ts-node -g

检查脚手架版本

npx ts-node -v

初始化ts状态

npx tsc -- init

使用脚手架运行ts文件

npx ts-node 文件名.ts

语法 类型注解

let 变量名:类型名 = 值

let age = 18->let age:number = 18

只能赋值相同类型

age = '张三' 报错：类型错误

其他基本数据类型

let name:name = '张三'

let isfalse:boolean = false

let un:undefined = undefined

数组写法

let arr:number[] = [1,2,3]

let arr:(string | number)[] = [1,2,3,'4']

let arr:Array<number | string> = [1,2,3,'4']

类型别名

type CustomPerson = Array<number | string | boolean>

let arr:CostomPerson = [1,'2',true]

函数类型  function add(a:number,b:number):number{   return a+b;  }  add(1,2)

return '1' 报错：因为要求返回的数据是number类型

add('1',2) 报错：因为要求传入的数据是number类型

键勾函数  const add = (a:number,b:number):number =>{   return a+b  } 可通过类型别名来同时指定  type CustomAdd = (a:number,b:number)=>number;  ​  const add:CustomAdd = (number1,number2)=>{   return number1+number2  } void类型

void函数在不需要返回值的时候使用

 function sayHi(str:string):void{   consolr.log(str)  } 可选参数

参数前加"?"表示可选参数

我不知道传入的参数，就把要求传入的参数改为可以传可以不传

必选参数不可以放在可选参数的后面

 function createPerson(name:string,age?:number):void{   console.log(`名字是${name},年龄为${age}`)  }  ​  createPerson('张三') 对象类型  let person :{   name:string   age:number   sayHi(str:string):void  }={   name : '张三',   age : 18,     sayHi(str){     console.log(`${str}`)     }  }  ​  person.sayHi('hello') 类型别名适用  type CostomPerson = {     name:string,     age:number,     sayHi(str:string):void  }  ​  let person:CostomPerson = {     name : '张三',     age : 18,     sayHi(str){         console.log(`${str}`)     }  }  ​  person.sayHi('hello') 键勾函数适用  type CostomPerson = {     name:string,     age:number,     sayHi:(str:string)=>void  }  ​  let person:CostomPerson = {     name : '张三',     age : 18,     sayHi(str){         console.log(`${str}`)     }  }  ​  person.sayHi('hello') 可选参数适用  type CostomPerson = {     name:string,     age:number,     hobby?:Array<string>,     sayHi(str:string):void  }  ​  let person:CostomPerson = {     name : '张三',     age : 18,     sayHi(str){         console.log(`${str}`)     }  }  ​  person.sayHi('hello') 接口

interface关键字来声明接口

 interface CustomPerson {   name:string   age:number  }  ​  let person:CustomPerson = {     name : '张三',     age : 18  } 继承  // 继承 继承另一个类型的所有属性  interface CustomPerson1 extends CustomPerson{     songs : string  }  let star:CustomPerson1 = {     name : 'aaa',     age : 19,     songs : '凤凰传奇'  } 元组  let position : [number,string] = [1,'1']  ​  // 类型推论，根据值反推出类型  let age = 18  // age = '111' 字面量类型

当类型别名被固定定义时，输入别的值就会报错

 {     let str = 'hello'     const str1 = 'hello'  ​     // 贪吃蛇游戏     type fangxiang = 'down' | 'up' | 'left' | 'right'     function move (driection:fangxiang){         console.log(driection)     }     move('down')     // move('aaa')  } 泛型

传入什么数据类型 返回什么数据类型

注册泛型函数，在变量名后加<type>，type为类型名

 function fn<type> (value:type):type{   return value  } 调用

声明什么类型，就要用到什么类型

let res = fn<number>(10)

let res = fn<string>('a')

一般能推断的函数类型，简化即可

let res = fn(2)

其他属性调用无效

泛型函数的类型变量 Type 可以代表多个类型，这导致无法访问任何属性

console.log(value.length) 报错：因为不认识length属性

添加约束

添加一个接口，使length属性可以被继承到定义的函数中

 interface havelength {     length : number  }  ​  function fn1<type extends havelength> (value:type):type{     console.log(value.length)     return value  }

在调用时，只用有length属性的，在调用时才不会报错

像数字无length属性的，就会报错

let res4 = fn1(2) 报错：因为数字无length属性

let res5 = fn1('abc')

let res6 = fn1([1,2,3,4,5])

多个类型变量

在传入一个对象与其对象之中的子属性时，一般情况下不能正常使用

这需要我们添加一个约束，让key的值始终在obj里面

 function getValue<Type,Key extends keyof Type>(obj:Type,key:Key){     return obj[key]  }  ​  getValue({name:'zs',age:18},'name')

在未限制对象之前，如果引用的第一个参数不符合条件，反而会在第二个参数报错，那么我们就要对第一个参数也进行约束

 // 继承js中object属性，使第一个参数满足object  function getValue1<Type extends object,Key extends keyof Type>(obj:Type,key:Key){     return obj[key]  }  // 这样在引入时就会报第一个参数的错误  // getValue1('aaa','b') 泛型接口

但我们在定义了一个固定类型的接口是，泛用性太差，因此我们就需要使用泛型接口在进行泛用

未运用泛型

 // 定义了一个接口  interface MyArray100 {     length : number     push(value:number):number     pop():number     reverse():number[]  }  ​  const arr100:MyArray100 = {     length:10,     push(n:number){         return 11     },     pop(){         return 10     },     reverse(){         return [1,2,3]     }  }  ​  arr100.push(10)

运用泛型

 // 定义一个存所有值的泛型接口  interface MyArray<Type> {     length : number     // 返回新的数组长度，所以不用改返回的number类型     push(value:Type):number     pop():Type     reverse():Type[]  }  ​  // 存数字  // 声明传入的类型  const arr:MyArray<number> = {     length:10,     push(n:number){         return 11     },     pop(){         return 10     },     reverse(){         return [1,2,3]     }  }  ​  arr.push(10)  ​  // 存字符串  ​  // 存布尔值  ​ 泛型工具类型  type Person = {     name : string,     age : number     hobby : string[]  }

可选

type p = Partial<Person>

只读

type p = Readonly<Person>

单个属性构造

type pickPerson = Pick<Person,'name' | 'age'>

索引签名类型  type Obj = {     [key : string] :number  }  ​  let test : Obj = {     x : 111,     y : 222  }  type Person = {     [k : string] : string | number  }  ​  let zs : Person = {     name : 'zs',     address : 'aaa',     email : 'aaa',     age : 18  }