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>()