🏆 欢迎来到本站： https://xuchangwei.com/。 希望这里有你感兴趣的内容。

极速上手TypeScript应用

TS环境搭建与配置

node和typescript的安装

node: https://nodejs.org/zh-cn/ 

wget https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz
tar xvf node-v16.13.0-linux-x64.tar.xz
ln -sv  node-v16.13.0-linux-x64 node

cat >/etc/profile.d/node.sh<<\EOF
export NODE_HOME=/usr/local/node
export PATH=$PATH:$NODE_HOME/bin
export NODE_PATH=$NODE_HOME/lib/node_modules
EOF
source /etc/profile
node  -v

npm get registry
npm config set registry https://registry.npm.taobao.org

# yum
curl -sL https://rpm.nodesource.com/setup_10.x | bash -\
    && yum install nodejs-10.16.3 -y \
    && npm config set registry https://registry.npm.taobao.org \
    && npm install cnpm -gnv

typescript:https://www.typescriptlang.org/download 

# 临时运行
npx tsc

typescript小程序代码的生成

目录结构 

cd src/coolcar  项目名称
#git仓库
cat .gitignore

#代码结构
mkdir wx # 放微信小程序代码
mkdir server # go语言后端
mkdir admin # 后台管理界面 voe前端
mkdir deployment # 部署文件，放k8s yml文件


# 启动小程序 collcar
wx/miniprogram # 真正工作的代码 index.ts
wx//typings # 微信的类型，在开发时基本上不会动
wx/node_modules #第三方依赖
wx/package.json # npm包的信息
wx/project.config.json
wx/tsconfig.json # typescript配置文件，告诉怎么编译项目

gitignore的配置

*.out
.vscode

wx/miniprogram-api-typings/**/*.js
node_modules

了解TypeScript vs JavaScript

Typescript语法基础

可以在页面练习：https://www.typescriptlang.org/ 一个项目中统一标准，行尾不加分号，字符串用单引号

基本数据类型

const,number,string,boolean

  • const
  • let 可以改变变量

  • var 最好不要用，坑比较多 

    const myVar = 'Hello World'
console.log(myVar)

let myVar1 = 'hello'
myVar1 = 'w'
console.log(myVar1)

编译器可以推断变量类型，可以直接写明类型 

const myVar: string = 'Hello World'
let myVar1: number = 123.456  // number是个浮点类型
let myVar2: boolean = true

// 在实际写程序时，能让编译器推断就推断
const myVar = 'Hello World'
let myVar1 = 123.456  // number是个浮点类型
let myVar2 = true

literal qtype

// literal type
// 类似于枚举类型，只有这些可能性，但比枚举类型更加灵活
let answer: 'yes'|'no'|'maybe' = 'maybe'
let httpStatus: 200|404|500 = 200

answer = 'yes'
httpStatus = 404

// answer 可以被赋值给string类型的，但无法转回来的
let s: string = answer
s = 'abcd'
// answer = s // 报错，Type 'string' is not assignable to type '"yes" | "no" | "maybe"'

类型的并集

// union of types

let httpStatus: 200 |404 |500 | '200' | '404' |'500' = '200'

let s: string = httpStatus
// httpStatus 是什么类型
function f(s: 200 |404 |500 | '200' | '404' |'500') {
    // let status: string = s // 报错 Type 'string | number' is not assignable to type 'string'
    let status: string | number = s
}

目前看还没有看到定义类型有多大帮助，到后面自定义类型如果没有用typescript写的话会很痛苦的

any 类型

let a: any = 'abc'
a = 123
a.name = 'John'  // 报错：123是点不出name的
console.log(a.salary)
// 运行还是会出错

// 这样就不会报错了
let a: any = 'abc'
a = 123
a = {}
a.name = 'John'
console.log(a.salary)

有any 代表放弃有所有typescript类型检查

undefined 类型

let b: undefined // 一但定义了undefined，变量值只有一种就是undefined
console.log(b)

// 使用场景
// 不回答
let answer: 'yes'|'no'|'maybe'|undefined = 'maybe'

在对象、函数参数、接口中会用到

数据类型小结

数据类型

  • number
  • boolean
  • string
  • literal类型
  • 类型的并集
  • any类型
  • undefined类型

逻辑控制

逻辑控制

  • if/else
  • switch
  • for
  • while
  • tyr/catch

if/else

function processHttpStatus(s:
    200|404|500|'200'|'404'|'500') {
    // 一律使用 === 及 !==
    if (s === 200) {
        console.log('ok')
    } else if (s === 404) {
        console.log('not found')
    } else if (s === 500) {
        console.log('internal server error')
    } else if (s === '200') {
        console.log('ok')
    } else if (s === '404') {
        console.log('not found')
    } else  (s === '500') {
        console.log('internal server error')
    }
}

processHttpStatus(200) // "ok"

不会有其它else的情况，因为函数参数已经规定了变量s只能有6种情况。给函数传其它参数会报错

改进，数字转字符串 

function processHttpStatus(s:
    200|404|500|'200'|'404'|'500') {
    // 把number一律转化成string
    let statusStr = ''
    if (typeof s === 'number') {
        statusStr = s.toString()
    } else {
        statusStr = s
    }
    // 一律使用 === 及 !==
    if (statusStr === '200') {
        console.log('ok')
    } else if (statusStr === '404') {
        console.log('not found')
    } else if (statusStr === '500') {
        console.log('internal server error')
    }
}

processHttpStatus(200)

改进，字符串转数字 

function processHttpStatus(s:
    200|404|500|'200'|'404'|'500') {
    // 把string一律转化成number
    let statusNum = 0
    if (typeof s === 'string') {
        statusNum = parseInt(s)
    } else {
        statusNum = s
    }
    // 一律使用 === 及 !==
    if (statusNum === 200) {
        console.log('ok')
    } else if (statusNum === 404) {
        console.log('not found')
    } else if (statusNum === 500) {
        console.log('internal server error')
    }
}

processHttpStatus(200)

改进，使用? 如果成立取:冒号左边，否则右边 

function processHttpStatus(s:
    200|404|500|'200'|'404'|'500') {
    let statusNum = typeof s === 'string' ?
       parseInt(s) : s
    // 一律使用 === 及 !==
    if (statusNum === 200) {
        console.log('ok')
    } else if (statusNum === 404) {
        console.log('not found')
    } else if (statusNum === 500) {
        console.log('internal server error')
    }
}

processHttpStatus(200)

枚举类型

TS进阶之数组、对象、函数与方法

数组

对象及方法

函数的定义

精通typescript

函数式编程

高阶函数与函数闭包

一等公民与高阶函数

函数的闭包

函数式编程总结与应用

函数式编程攻克小程序难点：页面状态维护

数组的变换

Promise详解

回调函数的缺点

Promise的创建和使用

同时等待多个Promise

将小程序API改写成Promise

获取用户头像

异步编程 async-await 语法糖

TS之面向对象：接口、类、泛型

接口

高级技巧

接口的两种实现方式

类

泛型