打字稿入门学习之路(打字稿教学视频)

学习之路学习安装环境之路开始。开发工具自动编译文件中数据类型的类的定义。继承中继承类的静态属性和静态方法类接口中的泛型学习路。查看安装环境并开始新的构建。此时通过命令编译。

typescript学习之路typescript学习之路安装typescript环境TypeScript启动TypeScript开发工具vscode自动编译。ts文件typescript数据类型typescript函数typescript类定义继承了javascript中的typesc。在ript中继承typescript类的静态属性和静态方法；多态类型脚本抽象类类型脚本；typescript中的接口泛型

typescript学习之路安装TypeScript环境npm安装-g typescript查看版本

Tsc -v类型脚本Start 1。创建新的hello.ts

const hello : string = "Hello World！"Console.log(hello) 2。通过tsc命令编译。

Tshello.ts3 .此时路径下会生成一个hello.js文件。

var hello = "Hello World！"；console . log(hello)；4.节点hello.js打开或引入xxx.html浏览器打开查看。

Typescript开发工具vscode编译。ts文件自动。1.创建tsconfig.json文件cmd后，执行命令tsc --init来生成配置文件。

然后，您可以编译。ts文件自动。

typescript中的数据类型// typescript增加了类型检查/*，目的是让编写代码更加标准化，易于维护。布尔型布尔型数字字符串型数组祖先型元组枚举型枚举任意型任意null和未定义的void型never型*///布尔型布尔型var flag:Boolean = true flag = false//数值型数字var num:number = 123 console . log(num)；//字符串类型String let str:String = " fqniu " console . log(str)；//数组类型array//第一个定义是let arr 1: number [] = [1，2，3，4]console . log(arr 1)；let arr2: string[] = ["1 "，" 2 "，" 3 "，" 4 "]console . log(arr 2)；//第二个定义Letarr 3: array = [1，2，3，4] Letarr 4: array = ["1 "，" 2 "，" 3 "，" 4 "]//第三个定义let arr5: any[] = [1，2，" 3 "，4，True]//祖先类型tuple(一种定义数组的方式)Letarr 7: [string，number，Boolean] = ["fqniu "，25，True]//枚举类型enumenum Flag {success = 1，error = -1 } let fs:Flag = Flag . success let Fe:Flag = Flag . error console//1 -1 enumcolor {red，blue，yellow }//如果这里默认没有赋值，则打印索引值0 12 let c:color = color . yellow console . log(c)；//2 enumcolor1 {red，blue = 5，yellow }//如果这里默认没有赋值，将打印索引值012 let Cr:color 1 = color 1 . red let CB:color 1 = color 1 . blue let cy:color 1 = color 1 . yellow console . log(Cr)；//0 console . log(CB)；//5 console . log(cy)；// 6取最后一个值，blue的值为+1//Any let numy:Any = 25 numy = " FQ Niu " numy = true console . log(num Any)；//使用any:获取dom元素节点操作的样式等。//var obox:any = document . getelementbyid(" box ")//obox . style . color = " red "//null和undefined let undefined:undefined console . log(undefined)；var nul:nullnul = nullconsole . log(nul)；//一个元素可以是number，type可以是null，undefined var ele:number | null | undefined console . log(ele)；void typescript中的void表示在一般不使用类型定义方法时，方法不返回值function fun():void { console . log(" fun ")；}fun()//函数fun1():有返回值时number { console . log(" fun ")；Return 123}fun1()// never type:其他类型的子类型(包括null和undefined)，代表从不出现的值。这意味着声明never的变量只能由never type赋值let Error:Never//Error = 25//Error Reporting//Correct Error =(()= > { throw new Error(" Error ")})()Function//type script中函数的定义//JS fun 1(){ }/JS匿名函数定义函数表达式var fun 2 = fun(){ }/TS函数声明定义fun 3():string { return " fqniu " } console . log(fun 3())；//匿名函数定义函数表达式//fqniu//ts var fun 4 = function():number { return 25 } console . log(fun 4())；// 25// 1.函数fun5的参数(name: string，age:number):string { return `$ { name } --$ { age } `} console . log(fun 5(" fqniu "，25))；//fqniu --25 var fun 6 = function(name:string，age:number):string { return ` $ { name } --$ { age } `} console . log(fun 6(" nfq "，22))；// nfq -- 22//无返回值的方法function fun 7():void { console . log(" fun 7 ")；}fun7()// 2、函数可选参数ES5中方法的实参和形参可以不同//但ts必须一致。如果它们不同，可以配置可选参数。请注意，参数必须配置为最后一个参数？函数fun8(名称:字符串，年龄？:number):string { if(age){ return `$ { name } --$ { age } `} else { return `$ { name } --confidential `} } console . log(fun 8(" fqniu(" fqniu "))；//FQ Niu --confidential console . log(fun 8(" FQ Niu "，25))；// fqniu -- 25// 3，默认参数// es5，默认参数没有办法设置，但是es6和ts可以设置默认参数函数fun9(name: string，Age = 20):string { if(Age){ return `$ { name } --$ { Age } `} else { return ` $ { name } --confidential `} } console . log(fun 9(" fqniu(" fqniu "))；//FQ Niu --20 console . log(fun 9(" FQ Niu "，25))；// fqniu -- 25// 4，剩余参数函数Sum1 (A: NUMBER，B: NUMBER，C: NUMBER，D:NUMBER { Return A+B+C+D } console . log(sum 1(1，2，3，4))；//10函数sum2(...结果:number[]):number { var sum = 0 for(var I = 0；ii if(type of str = = " string "){ return "我的名字是"+str} else {return "我的年龄是"+str } } console . log(getinfo(" fqniu "))；console . log(getInfo(22))；// 6、箭头函数//这个指向上下文settimeout(()= > { console . log(" fqniuws ")；}, 2000);typescript中类的定义//TS类中类的定义Person { name:string；//省略构造函数实例化类时触发的属性{//方法this.name = name前的公共关键字constructor(name:string)；} fun(): void { console.log("fun "，this . name)；} getName():string { return this . name } setName(name:string):void { this . name = name } } var p = new Person(" fqniu ")console . log(p . name)；//fqniuconsole . log(p . getname())；//fqniup.setName("牛牛")console . log(p . getname())；//牛牛继承javascript中的继承函数person(){ this . name = " fqniu "/* attribute */this . age = 25 this . fun = function(){ console . log(this . name+this . age)；} } var p = new Person()console . log(p . name)；P.fun() //原型链上的属性会被多个实例共享，但构造函数不会是person . prototype . sex = " male " person . prototype . work = function(){ console . log(this . name+" typing code))；} p.work() //添加静态方法person . getinfo = function(){ console . log("我是静态方法")；}亲自继承。getinfo ()//es继承Person类// 1，对象模拟实现继承functionweb1 () {person。call(this)//对象模拟实现继承} var web1 = new Web1() web1.fun() //对象假装继承构造函数// web.work() //错误index.html:48 UnAugust type Error:web . work不是函数但不能继承原型链上的属性和方法// 2、原型链实现继承function web 2(){ } web 2 . Prototype = new person()//原型链实现继承var web 2 = new web 2()console . log(web 2 . name)；//fqniu web 2 . fun()//fqniu 25 web 2 . work()//fqniu knocking代码//原型链实现继承好处:既可以继承构造函数中的属性和方法，也可以继承原型链上的方法//原型链实现继承？实例化子类时，没有办法传递参数函数Person 1 (name，age){ this . name = name/* attribute */this . age = age this . fun = Function(){ console . log(this . name+this . age)；}}函数Web3(姓名，年龄){} Web3。Prototype = new person 1()//原型链实现继承VarWeb3 = NewWeb3 ("nfq "，25)console . log(web 3 . name)；//未定义是因为实例化子类时，没有办法向父类传递参数//组合继承模式函数Person 2 (name，age) {this。name = name/*属性*/this。年龄=年龄这个。fun = function(){控制台。日志(这个。名字+这个。年龄)；} } person 2 . prototype . sex = " male " person 2 . prototype . work = function(){ console . log(this . name+"键入代码")；} functionweb4 (name，age) {person2.call (this，name，age)//对象模拟继承，实例化子类可以向父类传递参数} Web4.prototype = new Person2() //原型链实现继承//或//web 4 . prototype = person 2 . prototype var web 4 = new web 4(" nfq "，25)console . log(web 4 . name)；//nfq web 4 . fun()//nfq 25 web 4 . work()//nfq在typescript // ts中敲继承实现继承扩展和超类Person { name:string；//省略构造函数实例化类时触发的属性{//方法this.name = name前的公共关键字constructor(name:string)；} fun(): void { console.log("fun "，this . name)；} getName():string { return this . name } setName(name:string):void { this . name = name } } class web extends person { constructor(name:string){ super(name)//初始化父类的构造函数} work():void { console . log(` $ { this . name }正在键入代码`)；}//fun():void {//console . log(" fun -subclass "，this . name)；//} } var w = new web(" fqniu ")w . fun()//funfqniuw . work()//fqniu在代码中的修饰符typescript中定义属性时提供了三个修饰符/* public//class:public-在当前类中，subclass，Protected: protected类型可以在类外访问-所有子类都可以在当前类中访问，但是provite: private不能在类外访问-只有当前类可以访问，子类和类都不能在没有修饰的情况下访问属性。