联想官方服务网站,西安社动网站建设,武义建设工程网站,短期网站建设培训班以js为基础构建的语言 一个js的超集 引入了类型(type)的概念给变量赋予类型#xff1a;让从动态类型语言(js)变成静态类型语言(ts) 让变量的类型明确 扩展了js 可以在任何支持js的平台中执行 比js复杂 可维护性更高 ts不能被js解析器执行 不能再浏览器中直接执行 ts会被编译为…以js为基础构建的语言 一个js的超集 引入了类型(type)的概念给变量赋予类型让从动态类型语言(js)变成静态类型语言(ts) 让变量的类型明确 扩展了js 可以在任何支持js的平台中执行 比js复杂 可维护性更高 ts不能被js解析器执行 不能再浏览器中直接执行 ts会被编译为js 如果变量的声明和赋值是同时进行 ts可以自动对变量进行类型检测let cfalse //现在c就是boolean 函数后加:number表示返回结果function sun(a:number,b:number):number{ return ab } 有时候不需要运行ts代码把ts文件写入一个html 从script标签引入 运行html文件即可
类型
numberstringBoolean字面量 let a:10赋值一次不可修改可以跟let a:boolean | string也可以写具体值竖线或any任意类型关闭类型检测 声明变量不声明类型就会被ts设置为any any的类型值赋值给别的变量时会导致其它变量也会变成anyunknown未知类型 未知类型赋值给别的类型会报错 判断未知类型后可以赋值给对应的变量 类型断言s e as string 或 atringe告诉解析器变量的实际类型 不确定类型的变量尽量用unknownvoid 表示为空 以函数为例 表示没有返回值的函数never 没有值object 很少使用 对对象的设置主要是对对象属性的限制 {}涌来指定对象中可以包含哪些属性let b:{ name:stringage?:number }属性名后面加一个表示属性是可选的 表示任意属性let c:{name:string,[propName:string]:any}其它属性任意类型 要是写string value只能是string propName可以自行修改设置函数类型声明 语法(形参类型形参类型…){返回值} let d:(a:number,b:number)numberarray let e:string:[] //表示字符串数组 let g:Arraynumber //表示数值数组tuple元组 固定长度的数组let h:[string,string]enum枚举 enum Gender{male0,female1} let i:{name:string,gender:Gender} i{name:,gender:Gender.male} |或 与
let j:{name:string}{age:number}
j{name:,age:}//类型别名
type myType1|2|3|4
let k:myType
k5 //报错
//或者
type myTypestring编译选项
tsc xxx.ts -w 编译文件夹下所有文件tsc需要一个配置文件tsconfig.json tsconfig.json是ts编译器的配置文件 ts编译器可以根据它的信息来对代码进行编译
include(包含) 用来指定哪些文件需要被编译 按目录检索 **表示任意目录 *表示任意文件include:[./src/**/*]exclude(不包含) 不被编译的文件 默认值 node_modules、bower_components、jspm_packagesextends 定义被继承的配置文件files 指定被编译的文件列表 只有编译很少的文件才会用到 需要列出文件complierOptions编译器选项 决定编译器如何对ts文件进行编译 包含很多子选项
//默认情况下转换es3
complierOptions:{target:ES6,//写错会报错 提供可选项 es2016es6module: //编译成的js指定要使用的模块化规范 推荐es6 可选项commonjs、none、amd、system、umd、es6、es2015、es2020、esnextlib:[] //制定项目中需要的库 dom(指定后才可以使用document.) 一般情况不需要改 在浏览器中运行的代码不需要改 有默认值不需要改outDir: //指定编译后文件所在目录 ./distoutFile:./dist/app.js //将代码合并为一个文件 全局作用域中的代码会合并到同一个文件夹 如果想合并多个模块的文件(一个文件中引入了其他文件) 需要把moudules改成 amd或者system 不经常用 这里会用打包工具来处理allowJs:true //是否对js文件进行编译checkJs:true //是否检查js代码removeComments:true //是否编译注释 consolenoEmit:false //不生成编译后的文件 执行编译 不生成jsnoEmitOnError:false //当有错误时不生成编译后的文件strict:false //所用严格检查总开关 包含下面四项 建议为true 代码更严谨alwaysStrict:false //是否在编译后的js文件使用严格模式 在引入其它模块代码时 改文件会使用严格模式 不用设置noImplicitAny:true //不允许隐式any 需要给变量加类型noImplicitThis:true //不允许不明确类型的thisstrictNullChecks:false //严格检查空值 比如获取不存在的值
}webpack 大型项目会结合webpack打包工具npm -init -y生成package.json
面向对象
比如 操作浏览器window对象 操作网页document对象 操作控制台console对象 类 属性方法 操作对象的属性或者方法 类对象的模型 定义对象 规定对象的属性和方法 加static用类访问 不加用实例访问 就是new一下
//用class定义一个类
//对象中主要包含属性和方法需要在类中表现
class Person{//直接定义的属性时实例属性 需要通过对象的实例去访问//使用static开头的属性时静态属性 可以直接通过类取访问//静态属性将不可以通过对象实例访问反之同样//定义实例属性//实例属性前面加readonly只读属性静态属性static readonlyname:stringxxx,static age:number0//静态属性//或者可以直接写 会自动判断类型 即赋值的变量会被定义类型name,age0//定义方法 也可以加static sayHello(){}
}const per new Person() //只有new(实例化)之后才能访问
console.log(per)
console.log(Person.age)//会报错 想这么使用需要定义类属性 在属性前使用static关键字可以定义类属性(静态属性)构造函数
class Cat{name:string,//在属性中定义构造函数时赋值age:number,constructor(name:string,age:number){//在实例方法中this表示当前实例 表示当前新建的对象this.namename,this.ageage},voice(){//哪个对象调这个方法this就是谁 当前调用实例}
}
const catnew Cat(1,0)//穿的值不同会创建不同对象
const cat2new Cat(2,1)我们需要调用时创建不同的对象 不能定义类中的属性 使用构造函数constructor 继承
//这里是一个立即执行函数(function(){class Animal{name:string,constructor(name:string){this.namename},}class Cat extends Animal{//使用继承后 子类会继承父类的所有属性方法//通过继承可以将多个类中共有的代码写在一个父类中 这样只需要写一次即可让所有的子类同时拥有父类的属性和方法//如果在子类添加和父类相同的方法会覆盖父类 方法重写run(){console.log(${this.name}在跑)}}//这是两个属性方法相同的类class Cat{name:string,constructor(name:string){this.namename}}class Dog{name:string,constructor(name:string){this.namename}}
})()//super 代表当前类的父类
(function(){class Animal{name:string,say(){}}class Cat extends Animal{age:number,constructor(name:string,age:number){//如果在子类中写了构造函数需要调用父类构造函数 不然会报错 继承会出现问题super()this.ageage}say(){super.say()}}
})()//抽象类 禁止父类创建对象 就是专门被继承的类 不能直接new这个类
//抽象类中可以添加抽象方法
abstract class Animal{//抽象方法只定义在抽象类中 子类必须对抽象方法进行重写abstract say():void;
}
class Cat extends Animal{say(){//写方法}
}//接口 类似抽象类
(function(){type myType{name:string,age:number};//不能重复声明 接口可以重复声明const obj:myType{name:xxx,age:0};
//接口用来定义一个类结构 用来定义一个类中应该包含的属性和方法
//同时接口也可以当成类型声明去使用interface myInterface{name:string;age:number}
})()属性
//public 修饰的属性可以在任意位置访问修改默认值
//private 私有属性 智能在类内部访问 添加方法使私有属性在外部被访问getName(){return this.name}
