typescript学习

153 阅读4分钟

3、安装TypeScript编译器 typeScript意义类型检查

npm install –g typescript

node自带typeScript 全局安装typeScript

如果想直接 通过ts-node去运行ts文件
//全局安装typescript和ts-node
npm install -g typescript
//npm install -g typescript-node 由于typescript-node不支持更高版本的ts
npm install -g ts-node //typescript@>=2.7

为什么要使用面向对象以及其好处面向过程编程更简单

代码并不是写的约简洁越好
// 健壮性 
// 可维护性
// 代码的可读性
// 代码的可扩展性 
// 可移植性
//对于菜鸟来说 用面向对象的方式更容易达到以上的效果
 封装继承多态
 在用面向对象的思想去 开发项目 的时候尽量让这个类所有 的属性都是私有的让外面不可以访问这个属性 
  封装的概念 在类里面的属性设置成一个 私有的属性只能通过内部的getter和setter等方法的方式去获取和设置不能直接在外面打.调用
  继承的概念 对于重复的代码进行重构 提高复用性  子类可以使用父类的所有属性和方法
  继承的时候如果父类的方法和子类的重名那么子类的方法就会覆盖(重写)父类的方法可以用于父类什么都不写去实现一个继承的方法
  
  多态的概念
  clase Game{
playShout(player:Animal){
  player.shout()
}
  }
let game:Game  = new Game()
game.playShout(cat) Cat->Animal向上 转型调用的自己的方法
  比如各种各样的游戏再次定义一个类来管理这些游戏 
  多态的特性 对象可以向上转型 cat dog这些子类可以向上转成animate
  多态最常用的  通过接口去实现一个类型 例如将飞机和鸟公共的方法飞定义成一个接口然后将类型定义成一个接口 interface tofly{
    flay():void
  }
将飞机和鸟同时去实现这个接口flay和继承 即
class Bird extends Animal implements tofly


tsc typeScript compile typeScript编译

优化编译
  • 1、解决TS和JS冲突问题

    tsc –-init #生成配置文件

  • 2、自动编译

    tsc --watch

  • 3、发出错误 (出现错误不进行ts-js的编译)

    tsc –noEmitOnError hello.ts

  • // "strict": true, 关闭严格模式

  • 给定显示类型

 greet(person:string, date:Date)写类型不是必须的许多情况下typeScript会自动帮我们推断类型

tsconfig.json:相关配置

降级编译(将js 6789等等兼容到es5 43 这种就叫降级)

tsconfig.json:
/* Language and Environment */
"target": "es5", 
将target改为es5通过JavaScript编译的代码就会符合es5规范的能在兼容es5的环境里面运行

严格模式

/* Type Checking */可配置的开关选项
"strict": true, 
"noImplicitAny": true, 
"strictNullChecks": true,"module": "commonjs" 
   "rootDir": "./src",编译入口文件 
   
   /* Emit */
 "outDir": "./",   ts编译成js输出文件夹

基元类型

string  number  boolean  对于类型常使用小写的

let str: string = 'helo word '
let num: number = 100
let bool: boolean = true
数组类型
type[]  Array<type>  关键字加<>叫做泛型
let arr: number[] = [1,2,34,566,100]限定数组元素每一个都是数值类型的

特殊类型 any  不希望某个特定值导致类型检查错误
any可以赋给任何类型的值   可以被任何访问

类型注释 
let myName: string = "Felixlu";  冒号+类型
只支持这种类型写法 即变量名:变量类型

函数

function greet(
name: string 参数类型注释): void 返回值类型注释
{
  console.log(" Hello, " + name)
}

对象类型

function printCoord(pt: { x: number; y: number }) {
  console.log("坐标的x值为: " + pt.x);
  console.log("坐标的y值为: " + pt.y);
}
printCoord({ x: 3, y: 7 });
function printCoord(pt: { x: number; y?: number })
表示y是可选的课传可以不传 

printCoord?.toUpperCase()   ?表示printCoord可能是undefined    ?.是可选链运算符  ?。存在就调用后面的方法

联合类型

let id: number|string|number[]由numberstringnumber类型的数组组成的类型
但是需要注意的就是需要在调用方法的时候需要这些都有的 如果不一样就需要用到分支去判断

类型别名(用名字来代替定义的类型)也可以用接口

语法type 别名  可以是联合基元对象类型等
type Point = {
x: number
y: number
}
type ID = number

type的交叉扩展方式 type Animal = {等号一定要写
x: number
y: number
}
type Bear = Animal &{}

接口

interface Point = {
x: number
y: number
}
类型别名和接口的区别 typeinterface用法很类似
接口是可以扩展的
// 定义重名的接口添加新字段  接口可以通过extends去扩展接口
interface window{
    count:number
}
interface window{
    title:string
}
interface Bear extends Animal

function configure(x: window | 'auto') {}
给定的参数需要和option的结构一样
function configure({
	count:200
}) 

类型断言

typeScript只知道以getElementById将返回某种类型的HTMLelement并不知道具体是哪种类型 但是我们知道myCanvas始终会有HTMLCanvasElement这个类型所以就引入了断言


类型断言会在被编译时删除所以没有与运行断言相关联的运行时检查
const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement

const myCanvas2 = <HTMLCanvasElement>document.getElementById('main_canvas')

const x = ('hello' as unknown) as number

类型断言可以帮助我们 在 定义变量这些的时候不知道是什么类型的可以使用断言的方式去写一个unknown而不是写成any 不要 吧ts写成了anyscript

文字类型

const在typeScript这种就可以是如何为文字创建类型上了
printText(s: string, alignment: 'left' | 'right' | 'center')
利用了const只能为常量 上述有三个字符串的文字类型即alignmen只能是3个类型的


布尔文字类型
let b1:true = true

当范围太大的时候可以在任意位置添加类型推断来判断我们的类型
文字类型推断
const req = {
  url: 'https://example.com',
  method: 'GET'as 'GET'
}
或者handleRequest(req.url, req.method as 'GET')
或者const req = {} as const这时候req呢吧的属性固定类型了

null和undefined类型可以直接赋值

(x?:number| null)表示这个参数可选
console.log(x!.toFixed())将x断言为不可能是numberundefined一般不太使用

枚举

只有当你确定了这个是枚举类型所以也不太使用
语法enum Direction{
up=1,  down left right
}
访问 枚举 Direction.up
当我们定义了第一个值的时候 后面的值就依次递增1

不太常用的原语

bigint大整数 从es2020引入js			symbol全局唯一引用  (js中通过symbol进行全局引用的)

类型缩小(常用语处理联合类型的变量的场景)

注释

*  @param {Array<any> | null} crsTransform - 表示二维仿射变换矩阵的六个数字的数组。
   *  @param {Number | null} scall