TypeScript基础

蓦然阑珊
150 阅读2分钟

安装编译TS的工具包

npm i -g typescript

安装简化运行TS步骤的工具包

npm i -g ts-node

使用ts-node命令运行文件报错

npm install -D tslib @types/node

若还有报错:

直接创建个tsconfig.json:

//tsconfig.json
{
    "compilerOptions": {
      "experimentalDecorators": true
    }
}

类型别名(自定义类型)

type CustomArray=(string | number)[]

函数类型

函数参数和返回值的类型

  1. 单独指定参数,返回值的类型
//函数声明
function add(num1:number,num2:number):number {
  return num1 + num2
}
// 函数表达式
const add=(num1:number,num2:number):number=> {
  return num1 + num2
}

2.同时指定参数,返回值类型(只适用于函数表达式)

const add:(num1:number,num2:number)=>number=(num1,num2)=>{
  return num1+num2
}

3.函数没有返回值

function greet(name:string):void{
  console.log('hello',name)
}

4.函数的可选参数

function mySlice(start?:number,end?:number):void{
console.log('起始索引',start,'结束索引',end)
}
//可选参数只能出现在参数列表的最后.

对象类型

1.直接使用{}来描述对象解构.

2.属性采用属性名:类型的形式

3.方法采用方法名():返回值类型的形式

4.如果方法有参数,就在方法名后面的小括号中指定参数类型

5.在一行代码中指定对象的多个属性类型时,使用分号来分隔

如果一行代码只指定一个属性类型,分号可以去掉
方法的类型也可以使用箭头函数形式
可选属性
function myAxios(config: {url:string;method?:string }{
  console.log(config)
}

接口

使用interface关键字来声明接口
interface IPerson {
  name:string
  age:number
  sayHi():void
}

1.接口和类型别名对比

相同点:都可以给对象指定类型.
不同点:
   接口,只能为对象指定类型
   类型别名,不仅可以为对象指定类型,实际上可以为任意类型指定别名

2.接口继承

 interface Point3D extends Point3D {}

元组

let positio:[number,number]=[34,434]

类型推论

声明变量并立即初始化值,可以省略类型注解
决定函数返回值类型也可以省略

类型断言

1.使用as 关键字实现类型断言
2.关键字as后边的类型是一个更加具体的类型
技巧:在控制台console.dir($0),属性列表最后边,可以看到元素类型
$0 表示当前选中的元素.

字面量类型

const str2:'hello TS'='hello TS'

字面量+ 联合类型

function direction('up'|'down'|'left'|'right') {

}

枚举

枚举: 定义一组命名常量.
enum Direction {Up,Down,Left,Right }
function changeDirection(direction: Direction) {
   console.log(direction)
}
枚举成员默认值:从0开始自增的值

1.字符串枚举:

枚举成员的值是字符串
字符串枚举的每个成员必须有初始值.

typeof

let p={x:1,y:2}
function formatPiont(point:typeof p) {}
所处的环境在类型上下文
只能用来查询变量或属性的类型
avatar
文章
阅读
粉丝