TS基础（2）

最新推荐文章于 2023-08-08 07:30:16 发布

WANGK_WEB

最新推荐文章于 2023-08-08 07:30:16 发布

阅读量178

点赞数 2

分类专栏： TS 文章标签： typescript

本文链接：https://blog.csdn.net/weixin_47677705/article/details/118582542

版权

TS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html中使用ts文件

每次都要转成js文件

html 只认识js文件后缀，所以要将ts文件转成js文件
- 步骤一：运行终端中运行： tsc xxx.ts (会生成一个xxx.js的文件) （每次修改都需要这么做）
- 步骤二：在html文件中引入js文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>这里是index页面</div>
    <!-- <script src="./index.ts"></script> -->//HTML文件中引入ts没有效果
    <script src="./index.js"></script>
  </body>
</html>

使用侦听模式

终端中运行 tsc --watch xxx.ts,会监视这个ts文件，自动转成js文件，不需要每一次都操作转换命令

ts中的DOM操作

类型断言值 as 更加具体的类型

 let img =  document.querySelector('#image') as HTMLImageElement

ps：想要知道类型短言具体是什么，，，使用console.dir(img),看 _ _ proto_ _ 是什么就知道了

//事件对象中
js： function(e){ console.log(e.target)}
ts:  function(e:MouseEvent){。。。} //鼠标事件

枚举

关键字enum
枚举成员是只读的，只可以访问，不可以赋值
枚举值为数字的叫做数字枚举，如果没有赋值，则默认从0 开始递增

enum Gender {  //使用enun 关键字  ， 名称首字母大写
    Female,  //首字母大写
    Male   //首字母大写
}
//使用
let userGender: Gender
userGender = Gender.Female  // 0 根据在枚举中的位置，从0开始
userGender = Gender.Male   //  1

//
enum Direction {
  Top,//0    从0开始自增
  Left,//1
}
function changeDirection(direction: Direction) {}
changeDirection(Direction.Top)//0

//字符串枚举
enum Direction {
  Top='Top',
  Left='Left'
}
function changeDirection(direction: Direction) {}
changeDirection(Direction.Top)//Top

//给枚举值设置初始值
enum Gender{
    Female = 1,   
    Male = 100   
}

枚举值为字符串的叫做字符串枚举，没有自增的行为，，，但是初始化时一定要赋值

//给枚举值设置初始值
enum Gender{
    Female = '男',   
    Male = '女'   
}

typeof

let p = { x: 1, y: 2 }
function formatPoint(point: { x: Number, y: Number }) {}
//-->为参数指定类型
function formatPoint(point: typeof P) {}
//--->查询
let num1 : typeof p.x = 10--->数字类型

class

//--->1
class Person {
  age: number
  gender: string
}
let p = new Person()

//---->2

class Person {
  age: number
  gender: string
  sex = '男'
}

const p = new Person()
p.age-->number
p.sex-->string

//---->3、构造函数

class Person {
  //实例属性
  age: number
  gender: string = 'nv' //有初始值，将来也会被构造函数修改

  //构造函数，为实例属性设置默认值
  constructor(age: number, gender: string) {
    this.age = age
    this.gender = gender
  }
}
//实例
const p = new Person(12, '男')
console.log(p.age)

//-->4扩充

function Person(age?: number, name?: string): void {
  if (!(this instanceof Person)) {
    return new Person()
  }
  this.age = age
  this.name = name
}
//---> p1 与 p2 都可以创建
let p1 = new Person()
let p2 = Person()

//--->5/类里面的方法

class Point {
  x = 10
  y = 10
  scale(n: number) {
    this.x *= n
    this.y *= n
  }
}
let p = new Point()
p.scale(10)
console.log(p);//Point { x: 100, y: 100 }

继承

//-->6/继承
class Animal {
  move() {
    console.log('走')
  }
}
class Dog extends Animal {
  bark(){
    console.log('旺旺');
    
  }
}
 const d = new Dog()
 d.move()
d.bark()

//-->7/implements-->继承接口

interface Singable {
  sing(): void
}
class Person implements Singable {
  sing() {
    console.log('xxx')
  }
}
const p = new Person()
p.sing()

//-->8/class 可见性修饰符
//public / protected /private / readonly
//public 公开的，任何地方都可以访问
// 实例、继承等方法访问

class Animal {
  public move() {
    console.log('走两步')
  }
}
const p = new Animal()
p.move()
class Dog extends Animal{
  bark(){
    this.move()
  }
}
const d = new Dog()
d.bark()
d.move()

//protected /受保护的--不可以被实例对象使用

class Animal {
  protected move() {
    console.log('走两步')
  }
}
class Dog extends Animal {
  bark() {
    this.move()
  }
}
const d = new Dog()
d.move()//错误
const p = new Animal()
p.move()//错误

//private//私有的，只能在当前类中使用，不可以在子类和实例中使用

class Animal {
  private move() {
    console.log('走两步')
  }
  go() {
    this.move()
  }
}
class Dog extends Animal {
  bark() {
    this.move() //错误
  }
}
const d = new Dog()
d.move() //错误
const p = new Animal()
p.move() //错误

//readonly--只读修饰符，真能在constructor中设置初始值，其他任何地方都不可以设置，但是都可读

class Person {
  readonly age: number = 19 //只读属性
  constructor(age: number) {
    this.age = age
  }
  setAge() {
    this.age = 20 //报错
  }
}

类型兼容

// interface point2D {
//   x: number
//   y: number
// }


对象/复杂类型（函数的返回值是对象），成员多的赋值给成员少的
class Point {
  x: number
}
class Point2D {
  x: number
  y: number
}
class Point3D {
  x: number
  y: number
  z: number
}
//类型兼容，成员多的赋值给类成员少的
const p1: Point = new Point3D()
// class 类型赋值给接口类型
const p2: Point2D = new Point3D()


//函数之间的类型兼容
//参数少的赋值给参数多的

type F1 = (a: number) => void
type F2 = (a: number, b: number) => void
let f1: F1
let f2: F2
f2 = f1



参数少的赋值给参数多的
interface Point {
  x: number
}
interface Point2D {
  x: number
  y: number
}
interface Point3D {
  x: number
  y: number
  z: number
}
type F4 = (a: Point) => void
//(x:number , y:number)=>void
type F5 = (a: Point2D) => void
//(x:number , y:number , z:number)=>void
type F6 = (a: Point3D) => void
let f4: F4
let f5: F5
let f6: F6
f4 = f5
f5 = f4
//参数少的赋值给参数多的
f6 = f5
//错误写法f5 = f6

交叉类型

// ---> &
interface Person {
  name: string
}
interface Contact {
  phone: string
}
type PersonDetail = Person & Contact
//-->type PersonDetail {name:string,phone:string }
let o: PersonDetail = {
  name: 'zs',
  phone: '110',
}

//-->类似于extends
//相同点，合并属性
interface PersonDetail1 extends Contact {
  name: string
}
let p: PersonDetail1 = {
  name: 'zs',
  phone: '110',
}
//不同点
//同名属性，extends会报错，& 会变成‘或’
interface A {
  fn: (value: number) => void
}
interface B {
  fn: (value: string) => void
}
type C = A & B
let c: C
c.fn(123) //正确
c.fn('abc') //正确
//c.fn(true)//报错

泛型

//泛型函数
 function id<Type>(value: Type): Type {
  return value
}
const num = id<number>(1) //--->省略写法id(1)
const str = id<string>('a') //--->省略写法id('a')
const arr = id<string[]>(['c']) //--->省略写法id(['c])


//收缩类型 Type[],才可以使用length属性
 
function id<Type>(value: Type[]): Type[] {
  console.log(value.length)
  return value
}

 
//添加约束
interface ILength {
  length: number //有length属性
}
function id1<Type extends ILength>(value: Type): Type {
  return value
}
//都要有length属性
id1(['a', 'b'])
id1('abc') */

//泛型约束keyof
 
//Type:person , key=name| age
function getProp<Type, key extends keyof Type>(obj: Type, key: key) {
  return obj[key]
}
let person = {
  name: 'zs',
  age: 10,
}
getProp(person, 'name')
getProp(person, 'age') 


//泛型接口

interface IdFunc<Type> {
  value: Type
  id: (value: Type) => Type
  ids: () => Type[]
}
let obj: IdFunc<number> = {
  value: 1,
  id(value) {
    return value
  },
  ids() {
    return [1, 2]
  },
}

//泛型类

class GenericNumber<NumType> {
  defaultValue: NumType
  constructor(num?: NumType) {
    this.defaultValue = num
  }
  add: (num1: NumType, num2: NumType) => NumType
}
//有constructor 可以省略类型
const g = new GenericNumber(1)
//没有constructor 要写类型
const g1 = new GenericNumber<string>()

WANGK_WEB

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
TS基础（2）

html中使用ts文件每次都要转成js文件html 只认识js文件后缀，所以要将ts文件转成js文件步骤一：运行终端中运行： tsc xxx.ts (会生成一个xxx.js的文件) （每次修改都需要这么做）步骤二：在html文件中引入js文件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="v
复制链接

扫一扫