【前端，TypeScript】TypeScript速成（二）：逻辑控制与循环

TypeScript 当中的逻辑控制

if-else

if-else 的使用和其它语言非常相似：

let answer: 'yes'|'no'|'maybe'|undefined = undefinedlet httpStatus: 200 | 404 | 500 | '200' | '404' | '500' = 200function 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 if (s === '500') {console.log('Internal Server Error')}
}processHttpStatus(200)

现在我们觉得上述判断的情况太多，我们希望先将 404 和 '404' 都转为 number 或 string 再做判断：

function processHttpStatus(s: 200 | 404 | 500 | '200' | '404' | '500') {// 一律使用 ===, 而不是 ==. 使用 !==, 而不是 !=// number -> stringlet 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')}
}

使用函数 parseInt 可以将 string 转为 number。

可以使用三目运算符（问号表达式）优化上述流程：

function processHttpStatus(s: 200 | 404 | 500 | '200' | '404' | '500') {// 一律使用 ===, 而不是 ==. 使用 !==, 而不是 !=// number -> stringconst statusStr = typeof s === 'number' ? s.toString() : sif(statusStr === '200') {console.log('Ok')} else if (statusStr === '404') {console.log('Not Found')} else if (statusStr === '500') {console.log('Internal Server Error')}
}

switch

和其它语言区别不大：

function processHttpStatus(s: 200 | 404 | 500 | '200' | '404' | '500') {// 一律使用 ===, 而不是 ==. 使用 !==, 而不是 !=// number -> stringconst statusStr = typeof s === 'number' ? s.toString() : sswitch(statusStr) {case '200':console.log('Ok')breakcase '404':console.log('Not Found')breakcase '500':console.log('Internal Server Error')break}

循环

和其它语言的差别同样不大。

for 循环

let sum = 0
for (let i = 0; i < 100; i ++) {sum += i
}
console.log(sum)// 等价的写法👇
let sum = 0
let i = 0
for (; i < 100; i ++) {sum += i
}
console.log(sum)

结果为 4950。

while 循环

let sum = 0
let i = 0
while(i < 100) {sum += i ++
}
console.log(sum)

答案仍然是 4950。注意，TypeScript 的自增运算符也是有前置和后置的区别的，其区别与 C++ 当中相同，即前置运算符会在当前语句执行之前执行，而尾置运算符会在当前语句结束的时候执行。这意味着当在以上代码中使用 sum += ++ i 时，答案将变为 5050。

try-catch

TypeScript 当中也有自己的 try-catch 语句：

let sum = 0
let i = 0
for (; i < 100; i ++) {try {sum += iif(i % 17 === 0) {throw `bad number ${i}`}} catch(err) {console.error(err)}}
console.log(sum)