一、什么是TypeScript?
- TypeScript是JavaScript的超集，静态类型和面向对象编程
- TypeScript适合大型应用或者多人协作
二、TypeScript vs JavaScript
- TypeScript更适合编写应用程序
- TypeScript跨平台、开源
- 开始于JS，，结束于JS
- 重用JS，直接引入JS流行的库
- 类、接口、模块
- 在Vue、Node、React中都可以使用TypeScript
- 强类型限制（JavaScript是弱类型）
三、环境配置
npm install typescript -g
tsc --init 初始化
npm install @types/node --dev-save
四、数据类型
- 静态数据类型（interface）
// 自定义静态类型 -- 并引用
interface Student{
name:string,
age:number,
grade:string
}
let Joseph:Student = {
name:'joseph',
age:22,
grade:'大学毕业'
}
console.log(Joseph)
//{ name: 'joseph', age: 22, grade: '大学毕业' }
如果使用了静态数据类型，不仅意味着变量的类型不可以改变，还意味着变量的属性和方法也跟着确定了。大大提升了程序的健壮性，并且编辑器这时候会给你很好的语法提示，加快你的开发效率
- enum: 枚举
// enum
enum REN{ nan = '男人'， nv = '女人'， yao = '妖' }
console.log(REN.yao)
- any: 任意数据类型（类型转换不会报错）
// any 任意类型
var t: any = 10
t = 'Joseph'
t = 'true'
console.log( t ) // true
五、函数的定义
- 正常定义
// 函数传递的是形参（可指定类型） 返回值类型string
function findPerson(age: number): string{
return '找到了'+ age + ' 岁的人！ '
}
var age:number = 18
var result:string = findPerson(age)
console.log( result ) // 找到18岁的人
注意点
- 1.必须用function定义
- 2.函数与变量名必须遵循规则
- 3.传递多个参数的时候，' , '隔开
- 有可选参数的函数
// 有可选参数
// 不加 " ？ "的参数都是必须传递的
function findPerson(age: number, status? : string): string{
let str:string = ''
str = '找到了'+ age + ' 岁的 '
if( status != undefined ){
str = str + status
}
return str
}
var result:string = findPerson(18, ' 小可爱 ')
console.log( result ) // 找到18岁的小可爱
- 有默认参数的函数
// 有默认参数的函数
function findPerson(age: number = 18 , status? : string = '人' ): string{
let str:string = ''
str = '找到了'+ age + ' 岁的 '
if( status != undefined ){
str = str + status
}
return str
}
var result:string = findPerson()
console.log( result ) // 找到18岁的人
六、函数的三种声明方式
- 函数声明法
// 最常用
function add( n1:number, n2:number ): number{
return n1 + n2
}
console.log( add( 1, 2 ) )
- 函数表达式法
var add = function( n1:number, n2:number ): number{
return n1 + n2
}
console.log( add( 1, 2 ) )
- 箭头函数声明
// 箭头函数声明
var add = (n1:number,n2:number):number =>{
return n1 + n2
}
console.log(add(1,5))
七、数组赋值法
- 字面量赋值
// 1.字面量赋值法
// number类型的数组
let arr1:number[] = []
let arr2:number[] = [1,2,3,4,5]
// 字符串类型的数组
let arr3:Array<string> = ['Joseph','Elas','Lily']
// 布尔值类型
let arr4:Array<boolean> = [true,false,true]
- 构造函数赋值
// 2.构造函数赋值法
let arr11:number[] = new Array()
let arr22:number[] = new Array(1,2,3,4)
let arr33:Array<string> = new Array('Joseph','Elas','Lily')
let arr44:Array<boolean> = new Array(true,false,true)
- 元祖
// 当你定义了类型之后，传入的值必须相符，否则报错，还有一种方法，元祖
let arr5:number[] = [1,2,'ss'] // 报错
let x : [number,string]
x = [10,'Joseph'] // 正确
x = ['joseph',10] // 报错
八、字符串声明
- 普通类型
// 普通类型
let joseph:string = 'zhanggen'
console.log(joseph) // zhanggen
console.log(joseph.length) // 8
- 引用类型
// 引用类型
let joseph1:String = new String('zhanggen')
console.log(joseph1) // [String : 'zhanggen']
console.log(joseph1.length) // 8
九、日期的声明
// 不传递任何参数
let d:Date = new Date()
console.log(d)
// 传递一个整数
let d1:Date = new Date(1000) // 1970-01-01 00:00:00
let d2:Date = new Date(2000) // 1970-01-01 00:00:00
console.log(d1)
console.log(d2)
// 传递一个字符串
let d3:Date = new Date('2020/08/24 00:00:00')
let d4:Date = new Date('2020-08-24 00:00:00')
console.log(d3)
console.log(d4)
十、正则表达式
// 正则表达式
// RegExp
// 构造函数声明法
let reg1:RegExp = new RegExp('Joseph')
console.log(reg1)
let reg2:RegExp = new RegExp('Joseph','Elas')
console.log(reg2)
// 字面量声明
let reg3:RegExp = /joseph/i
let reg4:RegExp = /joseph/Elas
// 两个常用的方法
// test(string) -- 返回true\false
// exec(string ) --- 返回数组
十一、面向对象编程
- 类的声明
// 类是多个对象具体事物的一个抽象
// 对象是类的具体实现
// 声明类
class Class1{
name:string
age:number
constructor(name:string,age:number){
this.name = name
this.age = age
}
say(){
console.log('您好丫！')
}
}
let person:Class1 = new Class1('Joseph',21)
console.log(person)
person.say()
// Class1 { name: 'Joseph', age: 21 }
// 您好丫！
- 访问修饰符
// public 公开的
// protected 受保护的
// private 私有的
class Person{
public sex:string
protected name:string
private age:number
public constructor(sex:string,name:string,age:number){
this.sex = sex
this.name = name
this.age = age
}
public sayHello(){
console.log('Hello!')
}
protected sayHelloTim(){
console.log('Tim')
}
}
var joseph:Person = new Person('男','Joseph',21)
console.log(josephs.sex) // public
console.log(josephs.name) // protected
console.log(josephs.age) // protected
josephs.sayHello() // public
josephs.sayHelloTim() // protected
// readonly 只读
class Man{
public readonly sex:string = '男' // 只读属性在声明的时候就要赋值，否则会报错
}
var man:Man = new Man()
man.sex = '女' // 只读属性不可修改
- 类的继承
// 类的继承
class People{
public name:string
protected age:number
private skill:string
public constructor(name:string,age:number,skill:string){
this.name = name
this.age = age
this.skill = skill
}
public insterest(){
console.log('我的兴趣!')
}
}
let peopleObj:People = new People('Joseph',23,'codeing')
// peopleObj.insterest()
// 创建子类
class PeopleSSS extends People{
public height:number = 190
public insterest(){
super.insterest()
console.log('建立电商平台')
}
public makeMoney(){
console.log('赚钱！')
}
}
let haoxuan = new PeopleSSS('张皓轩',18,'swimming')
haoxuan.insterest()
// 我的兴趣
// 建立电商平台
haoxuan.makeMoney()
// 赚钱
