TypeScript理论知识二

目录

一、TypeScript 字符串新特性

二、TypeScript 参数新特性

三、TypeScript 函数新特性

四、表达式与循环

五、面向对象特性

---

一、TypeScript 字符串新特性

多行字符串用反引号表示

const item = `
  <ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
`
console.log(item)

模版字符串中可以使用嵌入表达式 ${ } 

// 模版字符串
const names = 'Vue'
const times = 2
console.log(`学习${names}已有${times}年时间`)

 字符串自动分隔

// 自动拆分字符串
function foo(template, name, age){
  console.log(template)
  console.log(name)
  console.log(age)
}
const myName = 'Doraemon'
const getAge = function(){
  return '50th'
}
foo`Record the ${getAge()} anniversary of ${myName}`

案例：反转字符串

// 案例：反转字符串
function reverseStr(str: string): string{
  const reverseResult = str.split('').reverse().join('')
  return reverseResult
}
const str = 'TypeScript'
reverseStr(str)

 

二、TypeScript 参数新特性

参数类型：参数名称后面使用冒号来指定参数的类型
默认参数：参数声明后面用等号来指定参数的默认值，参数默认值一定要放在最后
可选参数：方法的参数声明后面用问号来标明此参数为可选参数，可选参数必须放在必选参数的后面

参数类型：在参数名称后面使用冒号来指定参数的类型

any 关键字可以给变量赋任何类型的值
void 关键字表示函数不需要返回值

// TypeScript 有一个类型推断机制，默认初始设置的数据类型
let infer = 'string'

// any 可以给变量赋任何类型的值
let alias: any = 'xixi'


// void 表示此函数不需要任何返回值
function test01(): void{
  
}
test01()

// 此函数返回字符串类型
function test02(): string{
  return ''
}
test02()

// 规定此函数的参数类型和返回类型
function test03(name: string): string{
  return ''
}
test03('ts')


// 自定义类型
class Person {
  name: string
  age: number
}
let zhangsan: Person = new Person()
zhangsan.name = 'zhangsan'
zhangsan.age = 18

// 字符串型 string
let language: string = 'vue'

// 数字型 number
let age: number = 5

// 布尔型 boolean
let man: boolean = true

默认参数：参数声明后面用等号来指定参数的默认值，参数默认值一定要放在最后

function func(a: string, b: string, c: string = 'jojo'){
  console.log(a, b, c)
}
func('x', 'y', 'z')
func('x', 'y') // 只转入2个参数IDE会报错，不影响编译后的结果
func('x', 'y') // 给参数设置默认值，默认值一定要放在最后

可选参数：在方法的参数声明后面用问号来标明此参数为可选参数，可选参数必须放在必选参数的后面

// 必须参数、可选参数？、默认参数=
function func(a: string, b?: string, c: string = 'jojo'){
  console.log(a, b, c)
}
func01('x')

 

三、TypeScript 函数新特性

rest and spread 操作符：用来声明任意数量的方法参数
generator 函数：控制函数的执行过程，手动暂停或恢复代码执行
destructuring 析构表达式（解构赋值）：通过表达式将对象或数组拆解成任意数量的变量

rest and spread 操作符：用来声明任意数量的方法参数

function func1(...args){ // rest 运算符
  console.log(args) // [1, 2, 3]
  args.forEach((item) => {
    console.log(item) // 1, 2, 3
  })
}
func1(1, 2, 3)

function func1(...args){ // rest 运算符
  console.log(args) // [1, 2, 3, 4]
  args.forEach((item) => {
    console.log(item) // [1, 2, 3, 4]
  })
}
func1([1, 2, 3, 4])

function func2(a, b, c){
  console.log(a) // 1
  console.log(b) // 2
  console.log(c) // undefined
}
let args = [1, 2]
func2(...args) // spread 扩展运算符

generator 函数：控制函数的执行过程，手动暂停或恢复代码执行

function* doSomething(){
  console.log('start')
  yield
  console.log('finish')
}
let doSome = doSomething()
doSome.next() // start
doSome.next() // finish

destructuring 析构表达式：通过表达式将对象或数组拆解成任意数量的变量

从对象中提取值

// ES5 写法
function getStock() { // 获取标签
  return {
    code: 'IBM',
    price: 100
  }
}
const stock = getStock()
const code = stock.code // IBM
const price = stock.price // 100

// ES6 写法
function getStock() {
  return {
    code: 'IBM',
    price: 100
  }
}
const { code, price } = getStock()
// 析构表达式注意点：大括号里面的变量要和对象里面的变量相等

// ES6 写法
function getStock() {
  return {
    code: 'IBM',
    price: 100
  }
}
// 析构表达式取别名，原变量名不可以用
const {code: codex, price} = getStock()
console.log(codex)
console.log(price)

// ES6 写法
function getStock() {
  return {
    code: 'IBM',
    price: {
      price1: 100,
      price2: 200  
    },
    aaa: 'xixi'
  }
}
const {code, price: { price1 }} = getStock()
console.log(price1)

从数组中提取值

const arr1 = [1, 2, 3]
const [num1, num2] = arr1
console.log(num1) // 1
console.log(num2) // 2

// 析构表达式结合 rest 运算符
const arr1 = [1, 2, 3, 4]
const [num1, num2, ...others] = arr1
console.log(num1) // 1
console.log(num2) // 2
console.log(others) // [3, 4]

// 析构表达式作为方法的参数
const arr1 = [1, 2, 3, 4]
function doSomething([num1, num2, ...others]){
    console.log(num1)
    console.log(num2)
    console.log(others)
}

doSomething(arr1)

 

四、表达式与循环

箭头表达式：用来声明匿名函数，消除传统匿名函数的 this 指向问题

const sum01 = (arg1, arg2) => {
  return arg1 + arg2
}
// 上面箭头表达式的简写，只有一行语句可以省略return语句和大括号
const sum02 = (arg1, arg2) => arg1 + arg2

// 没有参数的箭头表达式
const sum03 = () => {
  return 1
}
// 只有一个参数，可以省略括号
const sum04 = arg1 => {
  return arg1
}

const myArray = [1, 2, 3, 4, 5]
// 需求过滤出数组中的双数（偶数）
let result = myArray.filter(item => {
  return item % 2 === 0
})
console.log(result)

function getStock01(name: string){
  this.name = name
  setInterval(function(){
    console.log('普通函数 this 指向' + this.name)
  }, 1000)
}
const stock01 = new getStock01('IBM')
stock01

function getStock02(name: string){
  this.name = name
  setInterval(() => {
    console.log('箭头函数 this 指向' + this.name)
  }, 1000)
}
const stock02 = new getStock02('IBM')
stock02

for...of 循环、forEach() 循环、for...in 循环

const myArray = [1, 2, 3, 4]
// TypeScript 不能给数组指定属性，数组是一个集合
myArray.desc = 'four number' // Property 'desc' does not exist on type 'number[]'.ts(2339)
// Array.forEach() 循环不允许使用 break、container 语句
myArray.forEach(item => console.log(item))

// for...in 循环不允许使用 break、container 语句
for (const item in myArray) { // for...in 遍历出数组索引，能够数组出原型链上的属性
  console.log(item)
}

for (const item of myArray) { // for...of 遍历出数组项
  if (item > 2) break
  console.log(item)
}

 

五、面向对象特性

类 class 是 TypeScript 的核心，使用 TypeScript 开发时，大部分代码都写在里面

访问控制符：控制类的属性和方法是否可以在类的外部被访问到
✦ public 默认，表示可以在类的内部和外部都可以被访问
✦ private 私有的，只能在类的内部被访问
✦ protected 受保护的，受保护的属性和方法可以在类的内部和类的子类里被访问到，在类的外部不能被访问到
constructor 构造函数（不能在外部访问到的），只有在实例化的时候被调用
类的继承：extends 父类，子类里的构造函数必须调用父类的构造函数：super(父类构造函数的参数)

class Person {
  constructor() { // 类的构造函数，只有类被实例化后调用，只会调用一次
    console.log('haha')
  }
  name;
  eat () {
    console.log('Im eating')
  }
}
const p1 = new Person()
p1.name = 'batman'
p1.eat()

const p2 = new Person()
p2.name = 'superman'
p2.eat()

// 类
class Person {
  constructor(public name: string) { // 类的构造函数中，必须明确访问控制符
    console.log('haha')
  }
  eat () {
    console.log(this.name)
  }
}

const p1 = new Person('batman')

const p2 = new Person('superman')
p2.eat()

// 类的继承
class Employee extends Person {
  constructor(name: string, code: string) {
    super(name)
    console.log('xixi')
    this.code = code
  }
  code: string
  work() {
    super.eat()
    this.doWork()
  }
  private doWork() {
    console.log('Im working')
  }
}

const e1 = new Employee('name', '1')
e1.work()

泛型 generic：参数化的类型，一般用来限制集合的内容

// 类
class Person {
  constructor(public name: string) { // 类的构造函数中，必须明确访问控制符
    console.log('haha')
  }
  eat () {
    console.log(this.name)
  }
}

const p1 = new Person('batman')

const p2 = new Person('superman')
p2.eat()

// 类的继承
class Employee extends Person {
  constructor(name: string, code: string) {
    super(name)
    console.log('xixi')
    this.code = code
  }
  code: string
  work() {
    super.eat()
    this.doWork()
  }
  private doWork() {
    console.log('Im working')
  }
}

const workers: Array<Person> = [] // Person 是 Array 的泛型
workers[0] = new Person('zhangsan')
workers[1] = new Person('lisi')


const e1 = new Employee('name', '1')
e1.work()

接口 interface：用来建立某种代码约定，使得其它开发者在调用某个方法或创建新的类是必须遵循接口所定义的代码约定

// 接口的第一种声明方式
// 声明一个接口
interface IPerson {
  name: string;
  age: number;
}

// 声明一个类
class Person {
  constructor(public config: IPerson) {

  }
}

const p1 = new Person({
  name: 'zhangsan',
  age: 18
})

// 接口第二种使用方式：implements
interface Animal {
  eat();
}

class Sheep implements Animal {
  eat(){
    console.log('I eat grass')
  }
}

class Tiger implements Animal {
  eat(){
    console.log('I eat grass')
  }
}

模块 Module 可以帮助开发者将代码分割为可重用的单元。开发者可以自己决定将模块中的哪些资源（类、方法、变量）暴露出去供外部使用，哪些资源只在模块内使用。

模块在 TS 中指的是一个文件，一个文件就是一个模块，有 2 个关键字支撑模块 export、import

// a.ts
export let prop1

let prop2

export function func1(){

}

function func2(){

}

export class Clazz1{

}

class Clazz2{
  
}

import { prop1, func1 } from './a'

console.log(prop1)

func1()

new Clazz1()

export function func3(){
  
}

 注解：为程序的元素（类、方法、变量）加上更直观更明了的说明，这些说明信息与程序的业务逻辑无关，而是供指定的工具或框架使用

 

六、类型定义文件（*.d.ts）

类型定义文件用来帮助开发者在 TS 中使用已有的 JS 工具包，如 JQuery