一:TypeScript是什么?
-
他是以javascript为基础构建的语言;
-
他是一个javascript的超集;
-
可以在任何支持javascript的平台中执行;
-
他扩展了javascipt并添加了类型系统;
注意:Ts不能被解析器直接执行
二、Typescript安装编译
在使用npm命令之前电脑必须得安装nodejs
安装
npminstall-gtypescript
或者
cnpminstall-gtypescript
或者
yarnglobaladdtypescript
运行：
tsc helloworld.ts
注意：如果电脑上面没有安装过cnpm，请先安装cnpm
npm install -g cnpm--registry=https://registry.npm.taobao.org
注意：如果电脑上面没有安装过yarn请先安装yarn:
npm install -gyarn
或者
cnpm install -gyarn
三、Typescript开发工具Vscode自动编译.ts文件
1.创建tsconfig.json文件tsc–init生成配置文件
2、老版本vscode点击:任务->运行任务->tsc:监视-tsconfig.json然后就可以自动生成代码了
3、最新版本vscode点击:终端->运行任务->typescript->tsc:监视-tsconfig.json然后就可以自动生成代码了
二.typeScript数据类型
TypeScript支持与JavaScript几乎相同的数据类型
注意:
- 在TypeScript中变量声明了是什么类型,它赋的值也必须和声明的类型一致,不然会报错
- 声明赋值可以同时进行,ts会自动对变量进行类型检测
- 下面赋的值会覆盖上面的值
typeScript的数据类型
布尔类型(boolean)
字符串类型(string)
数值类型(number)
数组类型(array)
元组类型(tuple)
枚举类型(enum)
任意类型(any)
null和undefined
void类型
never类型
布尔(boolean):
//布尔类型(boolean) true false
var flag:boolean=true
flag=true
字符串(string):
//字符串类型(string)
let str:string='hahah'
str=12 //错误写法
str=false //错误写法
str='你好'
console.log(str)
数值类型(number):
//数值类型(number)
var a:number=123;
console.log(a);
a='string' //错误写法
a=boolean //错误写法
a=87.5
console.log(a)
数组类型(array)
/数组类型(array) Ts中定义数组有两种方法
// es5 var arr=[1,'2333',false]
//1.第一种定义方法
let arr:number[]=[1,2,366]
console.log(arr)
let arr:string[]=['html','css','php']
console.log(arr)
//第二种定义方法
let arr:Array<number>=[11,22,33];
console.log(arr)
let arr:Array<string>=['html',"css","php"];
console.log(arr)
元组类型(tuple):
在定义数组的时候,类型和数据的个数一开始就已经限定了
let arr:[string,number,boolean]=['str',123,true];
console.log(arr)
注意:元组类型使用的时候,数据的类型的位置和数据的个数,应该和定义元组的时候的数据一致
枚举类型(enum):
enum枚举类型是对javascript标准数据类型的一个补充
如果说我们有些数据是常用的,个数也是固定的,就可以把它定义为一种单独的数据类型,叫枚举类型
// 枚举类型(enum)
enum flag {success=1,error=-1}
var f:flag=flag.success
console.log(f)
enum flag {success=1,error=-1}
console.log(flag.error)
enum Color {red,blue,cyan}
var c:Color=Color.blue;
console.log(c) // 1 没有给值,默认是索引值
enum Color {red,blue=5,cyan}
// var c:Color=Color.red;
// console.log(c) //输出0
// enum Color {red,blue=5,cyan}
// var c:Color=Color.cyan;
// console.log(c) //输出6,以上一个为基础
任意类型(any):
可以存储任何类型的数据,当我们不知道当前数据是什么类型,但又想把他存起来可以用any类型
// 任意类型(any)
var num:any=123;
num='456'
num=true
console.log(num)
当一个数组中要存储多个数据,个数不确定,类型不确定,也可以使用any类型
let aa:any[]=[1,'hello',true]
console.log(aa) //[1,'hello',true]
null和undefined
// null和undefined 其他类型的子类型
var num:number;
console.log(num) //undefined 报错
var num:undefined;
console.log(num) //undefined 正确
var num:number | undefined;
num=12;
console.log(num)
//定义未赋值
var num:number|undefined;
console.log(num)
//一个元素可能是undefined或者是null
var num:number|null|undefined;
num=123;
console.log(num)
void:
从某种程度上来说,void类型与any 类型相反,它没有任何类型,当一个函数没有返回值是,通常它的返回值类型是void
function run():void{
console.log('run')
}
run()
定义void类型的变量,可以接收一个undefined的值,但意义不大
let vd:void=undefined
console.log(vd) //undefined
never:
never类型 其他类型的值 包括null和undefined 的子类型 代表从不会出现的值
这就意味着声明never的变量只能被never类型所赋值;
var a:undefined;
a=undefined;
var b=null;
b=null;
三.函数类型
1.函数的定义
function run:string{
return '必须返回字符串'
}
//匿名函数
var run2=function():number{
return 123
}
alert(run2())
//ts定义方法传参
function getInfo(name:string,age:number):string{
return `${name}------${age}`
}
alert(getInfo('zhangsan',20))
// 匿名函数
var getInfo=function(name:string,age:number):string{
return `${name}------${age}`
}
alert(getInfo('王五',20))
2.可选参数
es5里面方法的实参和形参可以不一样,但是ts中必须一样,如果不一样就要配置必 选参数
加个?就是可选参数,可选可不选
function getInfo(name?:string,age:number):string{
if(age){
return `${name}------${age}`
}else{
return `${name}------年龄保密`
}
}
alert(getInfo('zhangsan'))
3.默认参数
es5终不能选默认参数,es6和ts都可以有默认参数
注意:可选参数必须配置到参数最后面,有参数传入,默认值不起作用
function getInfo(name:string,age:number=20):string{
if(age){
return `${name}------${age}`
}else{
return `${name}------年龄保密`
}
}
// alert(getInfo('zhangsan')) //zhangsan---20
alert(getInfo('zhangsan',30)) //zhangsan---30
4.剩余参数
…运算符接收新传过来的值
function sum(a:number,...result:number[]):number{
//解释:a=1,result=2,3,4,5,6
var sum=0;
for(var i=0;i<result.length;i++){
sum+=result[i]
}
return sum;
}
alert(sum(1,2,3,4,5,6)) //21
5.函数重载
多个函数方法名是一样的
function getInfo(name:string):string;
function getInfo(age:number):number;
function getInfo(str:any):any{
if(typeof str=='string'){
return '我叫'+str
}else{
return '我的年龄是'+ str
}
}
// alert(getInfo('张三')) //我叫张三
alert(getInfo(30)) //我的年龄是30
6.箭头函数 es6
setTimeout(()=>{
alert('123')
},1000)
ES5的类和继承
function Person(){
this.name='张三';
this.age=18;
this.run=function(){
alert(this.name+'在跑步')
}
}
//原型链
//通过原型链添加属性
// 注意:原型链上的属性会被多个实例共享,构造函数的属性不会
Person.prototype.sex='男';
//通过原型链添加方法
Person.prototype.work=function(){ //实例方法
alert(this.name+'在工作')
}
//静态方法
Person.getInfo=function(){
alert('我是静态方法')
}
var p=new Person();
alert(p.name) //张三
p.run(); //张三在跑步
调用原型链上的方法
p.work() //张三在工作
调用静态方法
Person.getInfo()
es5里的继承 对象冒充实现继承
对象冒充可以继承构造函数的属性和方法
对象冒充可以继承构造函数的属性和方法,但是没办法继承原型链的属性和方
function Person(){
this.name='张三';
this.age=18;
this.run=function(){
alert(this.name+'在跑步')
}
}
Person.prototype.sex='男';
Person.prototype.work=function(){ //实例方法
alert(this.name+'在工作')
}
//web类 继承person类 原型链UI想冒充组合继承模式
function Web(){
Person.call(this) /* 对象冒充实现继承*/
}
var w=new Web();
// w.run();
w.work();
es5继承 原型链继承
好处:原型链实现继承既可以实现构造函数里的属性和方法的继承,又可以实现原型链里的继承
function Person(){
this.name='张三';
this.age=18;
this.run=function(){
alert(this.name+'在跑步')
}
}
Person.prototype.sex='男';
Person.prototype.work=function(){ //实例方法
alert(this.name+'在工作')
}
//web类 继承person类 原型链UI想冒充组合继承模式
function Web(){
}
Web.prototype=new Person() //原型链实现继承
var w=new Web();
// w.run(); //张三在跑步
w.work(); //张三在工作
TS中类:
//ts类中的定义和使用
class aa{
//定义属性
name:string
age:number
sex:string
//定义构造函数
constructor(name:string='花花',age:number=18,sex:string='女'){
this.name=name
this.age=age
this.sex=sex
}
//定义实例方法
bb(){
console.log(`我是${this.name},今年${this.age}岁,性别${this.sex}`)
}
}
//实例化对象
const cc=new aa()
cc.bb() //我是花花,今年18岁,性别女
TS实现继承
class cc{
//定义属性
name:string
age:number
//定义构造函数
constructor(name:string,age:number){
//更新属性
this.name=name
this.age=age
}
//定义实例方法
aa(){
console.log(`我是${this.name},今年${this.age}`)
}
}
定义一个类,作为子类,继承
//定义一个类,作为子类
class dd extends cc{
constructor(name:string,age:number){
//调用父类中的构造函数,使用super
super(name,age)
}
//调用父类中的方法
aa(){
console.log('我是子类中的aa方法')
//调用父类中的aa方法
super.aa()
}
}
实例化
//实例化父
const person=new cc('父',11)
person.aa()
//子
const stu=new dd('子',1)
stu.aa()
类里面的修饰符
public :公有 在类里面,子类,类外面都可以访问;
protected:保护类型 在类里面和子类里面可以访问,类外面不能访问;
private :私有 在类里面可以用,类外面和子类不能用
.注意:属性如果不写修饰符默认是公有的(public)
public :
公有 在类里面,子类,类外面都可以访问;
class aa{
public name:string
public constructor(name:string){
this.name=name
}
}
const b=new aa('张三')
console.log(b.name) //张三
protected:
保护类型 在类里面和子类里面可以访问,类外面不能访问;
class aa{
protected name:string
constructor(name:string){
this.name=name
}
}
class bb extends aa{
constructor(name:string){
super(name)
}
cc(){
console.log('hello',this.name)
}
}
const c=new bb('李四')
c.cc() //hello 李四
private :
私有 类中的成员如果使用private来修饰,那么外部是无法访问到这个成员的
class aa{
private name:string
public constructor(name:string){
this.name=name
}
}
const b=new aa('张三')
console.log(b.name) //报错属性"name"为私有属性,只能在类"aa"中访问
子类也不能访问:
class bb extends aa{
constructor(name:string){
super(name)
}
cc(){
console.log('hello',this.name) //报错属性"name"为私有属性,只能在类"aa"中访问
}
}
总结:
安装typescript以及配置vscode里的自动监听
typescript里的数据类型,
复习了ES5里的类和继承;
typeScript里的类,继承,静态方法
210
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
