文章目录
安装、编译
安装
npm install typescript -g
编译
会生成一个与.ts文件同名的.js文件
tsc name.ts
在编译器中实时编译ts文件
vscode实时编译
在工程目录下执行tsc --init生成tsconfig.json
tsc --init
修改tsconfig.json的ouDdi
修改前
// "outDir": "./",
修改后
"outDir": "./",
在vscode编译器工具栏选择Terminal,执行Run task…,选择tsc: watch - tsconfig.json
数据类型
typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,写ts代码必须指定类型。
布尔类型(boolean)
let flag:boolean = true
// flag = 123 // 报错
flag = false // 正确
console.log(flag) // false
数字类型(number)
var age:number = 21
age = 19
console.log(age) // 19
字符串类型(string)
let str:string = 'Hello Peppa Pig.'
str = 'No hello.'
数组类型(array)
定义一个全部由数字组成的数组
let arr:number[] = [11, 22, 33 ,44]
console.log(arr)
// [11, 22, 33, 44]
let arr:Array<number> = [11, 22 ,33 , 44]
console.log(arr)
由任意数据类型组成的数组
let arr:any[] = [911, 'abc', true]
console.log(arr)
// [911, "abc", true]
元组类型(tuple)
给数组的每个元素指定数据类型
let tup:[number, string] = [11, 'This is ts.']
console.log(tup)
// [11, "This is ts."]
枚举类型(enum)
enum Err {undefined = -1, null = -2, success = 1}
let err:Err = Err.undefined
console.log(err)
// -1
如果枚举没有指定值,返回对应索引
enum color {red, blue = 3, yellow}
let color_red:color = color.red
console.log(color_red)
// 0
let color_blue:color = color.blue
console.log(color_blue)
// 3
let color_yellow:color = color.yellow
console.log(color_yellow)
// 4
任意类型(any)
let val:any = 123
val = 'Hello girl.'
console.log(val)
// Hello girl.
let aDiv:any = document.getElementById('box')
aDiv.style.color = 'blue'
null和undefined
let num:number | null | undefined;
console.log(num)
// undefined
num = 911
console.log(num)
// 911
void类型
void类型:typescript中的void表示没有任何类型,一般用于定义方法的时候方法没有返回值。
function test():void {
console.log('test')
}
test()
function test():number {
return 911
}
console.log(test())
never类型
never类型:是其他类型(包括null和undefined)的子类型,代表从不会出现的值。这意味着声明never的变量只能被never类型所赋值。
let val:undefined;
val = undefined
let val:null;
val = null;
typescript中的函数
函数声明法
function test():string {
return 'Are you ok?'
}
匿名函数
let test = function ():number {
return 911
}
ts中定义方法传参
function person(name:string, age:number):string {
return `${name}今年都${age}岁了,可是还没女朋友。`
}
let person = function (name:string, age:number):string {
return `${name}今年都${age}岁了,可是还没女朋友。`
}
没有返回值的方法
function test():void {
console.log('Hello world!')
}
方法可选参数
ts方法的实参和形参必须一样,如果不一样就需要配置可选参数
在参数名后面加问号(?)表示该参数可传、可不传。
注意:可选参数必须放到最后。
function person(name:string, age?:number) {
if (age) {
return `${name}今年都${age}岁了,可是还没女朋友。`
} else {
return `${name}不好意思说自己的年龄。`
}
}
console.log(person('alex'))
console.log(person('alex', 34))
默认参数
es5里面没法设置默认参数,es6和ts中都可以设置默认参数
function getInfo(name:string, age:number = 20) {
console.log(`${name}${age}`)
}
getInfo('小李')
// 小李20
function getInfo(name:string, age:number = 20) {
console.log(`${name}${age}`)
}
getInfo('小李', 29)
// 小李29
不定长参
三点运算符实现
function sum (a:number, ...arr:number[]) {
let sum = a
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
return sum
}
console.log(sum(1, 2, 3, 4, 5, 6))
// 21
函数重载
java中方法的重载:重载指的是两个或者两个以上同名函数,但它们的参数不一样,这时会出现重载的情况。
typescript中的重载:通过为同一个函数提供多个函数类型定义来实现多功能的目的。
ts为了兼容es5以及es6重载的写法和java有区别。
function getInfo (name:string):string;
function getInfo (name:string, age:number):string;
function getInfo (name:any, age?:any):string {
if(age) {
return `我叫${name},今年${age}岁。`
} else {
return `我叫${name}。`
}
}
console.log(getInfo('小莲'))
// 我叫小莲。
console.log(getInfo('小莲', 18))
// 我叫小莲,今年18岁。
es5中的类
// es5中的类
function student (name, teacher) {
this.name = name
this.teacher = teacher
this.speak = function () {
console.log('我叫' + this.name + '老师是' + teacher)
}
}
// 通过原型链添加方法
student.prototype.sport = '跑步'
student.prototype.run = function () {
console.log(this.name + '在操场上' + this.sport)
}
var stu = new student('小虫', '苍井空')
stu.speak()
// 我叫小虫老师是苍井空
stu.run()
// 小虫在操场上跑步
es5中的静态方法
// es5中的类
function student (name, teacher) {
this.name = name
this.teacher = teacher
// 实例方法
this.speak = function () {
console.log('我叫' + this.name + '老师是' + teacher)
}
}
// 通过原型链添加方法
student.prototype.sport = '跑步'
student.prototype.run = function () {
console.log(this.name + '在操场上' + this.sport)
}
// 静态方法
student.hobby = function () {
console.log('王者农药')
}
var stu = new student('小虫', '苍井空')
stu.speak()
// 我叫小虫老师是苍井空
stu.run()
// 小虫在操场上跑步
student.hobby()
// 王者农药
es5中的继承
原型链+对象冒充的组合继承模式
// es5中的类
function student (name, teacher) {
this.name = name
this.teacher = teacher
// 实例方法
this.speak = function () {
console.log('我叫' + this.name + '老师是' + teacher)
}
}
// 通过原型链添加方法
student.prototype.sport = '跑步'
student.prototype.run = function () {
console.log(this.name + '在操场上' + this.sport)
}
// 继承
function juniorStu () {
// 冒充对象继承
student.call(this, '黄毛', '苍井空')
}
stu = new juniorStu()
// 冒充对象可以继承构造函数里的属性和方法
stu.speak()
// 我叫黄毛老师是苍井空
// stu.run() 冒充对象不能继承构造函数原型链的方法
原型链继承
// es5中的类
function student (name, teacher) {
this.name = name
this.teacher = teacher
// 实例方法
this.speak = function () {
console.log('我叫' + this.name + '老师是' + teacher)
}
}
// 通过原型链添加方法
student.prototype.sport = '跑步'
student.prototype.run = function () {
console.log(this.name + '在操场上' + this.sport)
}
// 构造函数+原型链继承
function juniorStu (name, teacher) {
// 子类可以给父类传参
student.call(this, name, teacher)
}
juniorStu.prototype = student.prototype
var stu = new juniorStu('黄毛', '苍井空')
stu.speak()
// 我叫黄毛老师是苍井空
stu.run()
// 黄毛在操场上跑步
ts中的类
class Person{
name:string
// 构造函数
constructor (name:string) {
this.name = name
}
run ():void {
console.log(`${this.name}在跑步`)
}
}
let p = new Person('张三')
console.log(p.name)
p.run()
上面的代码编译后的运行结果:
张三
张三在跑步
class Person{
name:string
// 构造函数
constructor (name:string) {
this.name = name
}
getName ():string {
return this.name
}
setName (name:string):void {
this.name = name
}
}
let p = new Person('张三')
console.log(p.getName())
p.setName('李四')
console.log(p.getName())
上面代码运行结果
张三
李四
ts中类的继承
extends和supper实现继承
class Person{
name: string
age: number
constructor (name:string, age:number) {
this.name = name
this.age = age
}
speak ():void {
console.log(`${this.name}今年${this.age}岁`)
}
}
class Stu extends Person {
constructor (name:string, age:number) {
super(name, age)
}
}
let stu1 = new Stu('黄飞虎', 22)
stu1.speak()
上面代码运行结果:
黄飞虎今年22岁
class Person{
name: string
age: number
constructor (name:string, age:number) {
this.name = name
this.age = age
}
speak ():void {
console.log(`${this.name}今年${this.age}岁`)
}
}
class Stu extends Person {
constructor (name:string, age:number) {
super(name, age)
}
run ():void {
console.log(`${this.name}在运动`)
}
speak ():void{
console.log(`${this.name}说这是子类的方法`)
}
}
let stu1 = new Stu('黄飞虎', 22)
stu1.run()
// 子类方法和父类重名,调用子类方法
stu1.speak()
上面代码运行结果:
黄飞虎在运动
黄飞虎说这是子类的方法
类的修饰符
public | 可以在类、子类、类的外部被访问 |
---|---|
protected | 可以在类、子类内部被访问 |
private | 可以在类内部被访问 |
class Person{
public name:string = ''
constructor (n) {
this.name = n
}
run () {
console.log(`${this.name}在草场跑步`)
}
}
class Stu extends Person{
constructor (n) {
super(n)
}
work () {
console.log(`${this.name}在夜店上班`)
}
}
let stu1 = new Stu('alex')
console.log(stu1.name) // 打印结果:alex
stu1.run() // 打印结果:alex在草场跑步
stu1.work() // 打印结果:alex在夜店上班
class Person{
protected name:string = ''
constructor (n) {
this.name = n
}
run () {
console.log(`${this.name}在草场跑步`)
}
}
class Stu extends Person{
constructor (n) {
super(n)
}
work () {
console.log(`${this.name}在夜店上班`)
}
}
let stu1 = new Stu('alex')
// Property 'name' is protected and only accessible within class 'Person' and its subclasses.
// console.log(stu1.name)
stu1.run() // 打印结果:alex在草场跑步
stu1.work() // 打印结果:alex在夜店上班
class Person{
private name:string = ''
constructor (n) {
this.name = n
}
run () {
console.log(`${this.name}在草场跑步`)
}
}
class Stu extends Person{
constructor (n) {
super(n)
}
work () {
// Property 'name' is private and only accessible within class 'Person'.
// console.log(`${this.name}在夜店上班`)
}
}
let stu1 = new Stu('alex')
// Property 'name' is private and only accessible within class 'Person'.
// console.log(stu1.name)
stu1.run() // 打印结果:alex在草场跑步
stu1.work() // 打印结果:alex在夜店上班
类的静态属性、静态方法
可以类比jq,$(’.box’).css(‘color’, ‘red’)是实例方法,$.get(url, callback())是静态方法。
es5中的静态属性、方法
function $(id) {
return new base(id)
}
function base (id) {
let el = document.getElementById(id)
this.css = function (attr, value) {
el.style[attr] = value
}
}
// 静态方法
$.get = function (url, fn) {
fn()
}
// 静态属性
$.author = 'lupe'
// 实例方法
$('box').css('color', 'red')
// 静态方法
$.get('www.baidu.com', () => {
console.log('success')
})
ts类的静态属性、静态方法,使用static关键字
class Person{
public name:string = ''
// 静态属性只能被类调用
static sex:number = 0
constructor (n) {
this.name = n
}
run () {
// 静态属性只能被Person类调用
console.log(`${this.name}性别${Person.sex}`)
}
// 静态方法只能调用静态属性,切只能被Person类调用
static work () {
console.log(`${this.sex}`)
}
}
let stu = new Person('alex')
stu.run() // 打印结果:alex性别0
// 静态方法只能被Person类调用
Person.work() // 打印结果:0
// 静态属性只能被Person类调用
console.log(Person.sex) // 打印结果:0
抽象类、抽象方法
abstract关键字定义抽象类,不能直接被实例化,为继承子类提供基类
抽象方法必须放在抽象类中,只需要定义,所有子类必须包含eat方法,在子类中实现
// 定义抽象类,不能直接被实例化,为继承子类提供基类
abstract class Animal {
public name: string
constructor(name: string) {
this.name = name
}
// 抽象方法必须放在抽象类中,只需要定义,所有子类必须包含eat方法,在子类中实现
abstract eat(): any
}
class Dog extends Animal{
constructor (name:string) {
super(name)
}
// 子类必须包含eat方法
eat () {
console.log(`${this.name}吃骨头`)
}
}
class Cat extends Animal{
constructor(name:string) {
super(name)
}
// 子类必须包含eat方法
eat () {
console.log(`${this.name}吃鱼`)
}
}
// 抽象类不能直接实例化
// let animal = new Animal('小黑狗')
let dog = new Dog('小黑狗')
let cat = new Cat('小花猫')
dog.eat() // 打印结果:小黑狗吃骨头
cat.eat() // 打印结果:小花猫吃鱼
接口
interface Animal{
name:string;
eat(str:string):void;
}
class Dog implements Animal{
name:string;
constructor(name:string){
this.name=name;
}
eat(){
console.log(this.name+'吃粮食')
}
}
var d=new Dog('小黑');
d.eat();
class Cat implements Animal{
name:string;
constructor(name:string){
this.name=name;
}
eat(food:string){
console.log(this.name+'吃'+food);
}
}
var c=new Cat('小花');
c.eat('老鼠');
ts接口扩展、接口的继承
接口可以继承接口
interface Animal {
eat():void
}
// 接口可以继承
interface Person extends Animal{
work():void
}
class Programme {
public name:string
constructor (name:string) {
this.name = name
}
code () {
console.log(`${this.name}在写ts代码`)
}
}
class Person extends Programme implements Person{
constructor (name:string) {
super(name)
}
eat () {
console.log(`${this.name}吃火锅`)
}
work () {
console.log(`${this.name}写代码`)
}
}
let programmer = new Person('王强')
programmer.eat()
programmer.work()
programmer.code()
// 王强吃火锅
// 王强写代码
// 王强在写ts代码