var myname = 'gao tianyang'
var getname = function() {
return 'gao tianyang'
}
console.log(`hello ${myname}`)
console.log(`hello ${getname()}`)
var myname = 'gao tianyang'
var getName = function() {
return 'gao tianyang'
}
console.log(`<div>
<span>${myname}</span>
<span>${getName()}</span>
</div>`)
自动拆分字符串
function test(template, name, age) {
console.log(template)
console.log(name)
console.log(age)
}
var myname = "gao tianyang"
var getAge = function () {
return 18
}
test`hello my name is ${myname}, i'm ${getAge()}`
参数新特性
参数类型：在参数名称后面使用冒号来制定参数的类型
var myname: string = "gao tianyang"
myname = 13
var alise = "wang zhiwei"
alise = 13
var alise: any = "wang zhiwei"
alise = 13
var age: number = 13
var man: boolean = true
// 是否需要返回值(void-不需要)
function test() : void {
return ""
}
test()
function test2() : string {
return ""
}
test2()
function test3(name: string) : string {
return ""
}
test3(13)
// 自定义类型
class Person {
name: string;
age: number;
}
var zhangsan: Person = new Person ()
zhangsan.name = ""
zhangsan.age = 18
// ES5
function getStock(name: string) {
this.name = name
setInterval(function() {
console.log('name is :' + this.name)
}, 1000)
}
var stock = new getStock('IBM')
// ES6
function getStock2(name: string) {
this.name = name
setInterval(() => {
console.log('name is :' + this.name)
}, 1000)
}
var stock2 = new getStock2('IBM')
forEach(), for in 和 for of：
var myArray = [1,2,3,4]
myArray.desc = 'for number'
// 忽略属性值 不能打断循环break
myArray.forEach(value => console.log(value))
// 循环对象键值对的键名
for (var n in myArray) {
if (myArray[n] > 2) break
console.log(myArray[n])
}
//忽略属性值 可以打断循环做判断
for (var n of myArray) {
console.log(n)
}
for (var n of myArray) {
if (n > 2) break
console.log(n)
}
for (var n of 'for number') {
console.log(n)
}
补充
for of循环可以用于任何具有遍历器Iterator的对象上 常见的集合如：数组、map、set以及字符串内置了Iterator(迭代器)
Object.prototype[Symbol.iterator] = function() {
let _this = this
let index = 0
let length = Object.keys(_this).length
return {
next:() => {
let value = _this[index]
let done = (index >= length)
index++
return {value,done}
}
}
}
面向对象特性
TypeScript-类(class)
类是TypeScript的核心，使用TypeScript开发时，大部分代码都是写在类里面的
这里会介绍类的定义，构造函数，以及类的继承
类的定义
// 类的声明
class Person {
name;
eat () {
console.log('im eating')
}
}
// 类的实例化
var p1 = new Person()
p1.name = 'batman'
p1.eat()
// 同一个类 可以new多个实例 每个实例属性方法相同 但状态不同
var p2 = new Person()
p2.name = 'superman'
p2.eat()
访问控制符：控制类的属性是否可以在外部访问到
public: (公共的) 可以在内外访问（默认值）
class Person {
public name;
public eat () {
console.log('im eating')
}
}
var p1 = new Person()
p1.name = 'batman'
p1.eat()
private: (私有的) 只可以在内部访问
class Person {
private name;
private eat () {
console.log('im eating')
}
}
var p1 = new Person()
p1.name = 'batman'
p1.eat()
protected: (受保护的) 可以在内部和继承的子类访问
class Person {
protected name;
protected eat () {
console.log('im eating')
}
}
var p1 = new Person()
p1.name = 'batman'
p1.eat()
类的构造函数
构造函数constructor在类的实例化时被自动调用
class Person {
constructor(){
console.log('do something')
}
name;
eat () {
console.log('im eating')
}
}
var p1 = new Person()
p1.constructor()
p1.name = 'batman'
p1.eat()
var p2 = new Person()
p2.name = 'superman'
p2.eat()
构造函数的使用场景
例如在创建Person类的时候，name必须被指定
class Person {
name;
constructor(name: string){
this.name = name
}
eat () {
console.log('im eating')
}
}
var p1 = new Person()
p1.name = 'batman'
p1.eat()
var p2 = new Person('superman')
p2.eat()
简化可写
class Person {
constructor(public name: string){
}
eat () {
console.log(this.name)
}
}
var p1 = new Person('batman')
p1.eat()
注意构造函数的访问控制符不可省略
构造函数有、无访问控制符含义不同
class Person {
constructor(name: string){
}
eat () {
console.log(this.name)
}
}
var p1 = new Person('batman')
p1.eat()
类的继承
extends 声明类的继承关系 继承关系是一种'是'的关系
class Person {
constructor(public name: string){
}
eat () {
console.log(this.name)
}
}
class Employee extends Person {
code: string
work () {
console.log('do work')
}
}
var e1 = new Employee('batman')
e1.eat()
e1.code = '001'
e1.work()
super 调用父类属性
class Person {
constructor(public name: string){
console.log('im person')
}
eat () {
console.log('im eating')
}
}
class Employee extends Person {
constructor(name: string, code: string){
super(name)
console.log('im employee')
this.code = code
}
code: string
work () {
super.eat()
this.doWork()
}
doWork () {
console.log('im working')
}
// 私有的doWork方法
// private doWork () {
// console.log('im working')
// }
}
var e1 = new Employee('batman', '002')
e1.work()
TypeScript-泛型(generic)
参数化的类型，一般用来限制集合的内容
class Person {
constructor(public name: string){
console.log('im person')
}
eat () {
console.log('im eating')
}
}
class Employee extends Person {
constructor(name: string, code: string){
super(name)
console.log('im employee')
this.code = code
}
code: string
work () {
super.eat()
this.doWork()
}
private doWork () {
console.log('im working')
}
}
var workers: Array<Person> = []
workers[0] = new Person('ZhangSan')
workers[1] = new Employee('LiSi', '2')
workers[2] = 2
var e1 = new Employee('batman', '002')
e1.work()
指定数组只能放某个类型的元素 不能放其他类型的元素
TypeScript-接口(Interface)
用来建立某种代码约定，使得其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定
用接口声明属性
interface IPerson {
name: string
age: number
}
class Person {
constructor(public config: IPerson) {
}
}
var p1 = new Person({
name: 'zhangsan',
age: 18
})
var p2 = new Person({
name: 'zhangsan',
age: 18,
other: 'other'
})
var p3 = new Person({
name: 'zhangsan'
})
