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:stringage:numbersayHi(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:stringage: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属性，使第一个参数满足objectfunction getValue1<Type extends object,Key extends keyof Type>(obj:Type,key:Key){return obj[key]}// 这样在引入时就会报第一个参数的错误// getValue1('aaa','b')

泛型接口

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

未运用泛型

 // 定义了一个接口interface MyArray100 {length : numberpush(value:number):numberpop():numberreverse():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):numberpop():Typereverse():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 : numberhobby : 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}