前言
继续分享TypeScript学习笔记,大佬请绕行。
一、函数参数
function func1(a, b, c) {
console.log("-----" + a, b, c);
}
func1("a", "b", "c");
function func2(a, b, c) {
console.log("---可变参数--" + a, b, c);
}
func2("a");
function func3(a, b, c) {
if (c === void 0) { c = "c"; }
console.log("---默认参数--" + a, b, c);
}
func3("a", "b");
function func4(a) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
console.log("---不定参数--" + a, args);
}
func4("a", "b", "c", "d");
查看执行结果
查看js
使用tsc编译ts文件,生成js文件
对比ts文件与js文件内容,即可明白:
- 可变参数js实现
- 默认参数js实现
- 不定参数js实现
你会爱上ts,以往要实现这些,写的js可能很多,但是用ts则可so easy,还特别好理解.
二、函数重载
函数重载ts示例文件
//出入参数都为any,失去了安全性检查
function func1(a:any):any {
if (typeof a === 'number'){
console.log(a + '----参数为数字的逻辑');
}
if (typeof a === 'string'){
console.log(a +'-----参数为字符串的逻辑');
}
return a;
}
func1(1);
func1('hello');
//出入参数都为number|string联合类型,有安全性检查
function func2(a:number|string):number|string {
if (typeof a === 'number'){
console.log(a+'-----参数为数字的逻辑');
}
if (typeof a === 'string'){
console.log(a+'-----参数为字符串的逻辑');
}
return a;
}
func2(2);
func2('word');
//定义函数重载
function func3(a:number):number;
function func3(a:string):string;
//函数实现
function func3(a:any):any{
//函数重载,根据参数类型不同,返回值类型也不同
if (typeof a === 'number'){
console.log(a+'-----参数为数字的逻辑');
}
if (typeof a === 'string'){
console.log(a+'-----参数为字符串的逻辑');
}
return a;
}
//调用
var res = func3(3);
var res2 = func3('hello word');
执行结果
使用tsc编译ts文件为js文件
//出入参数都为any,失去了安全性检查
function func1(a) {
if (typeof a === 'number') {
console.log(a + '----参数为数字的逻辑');
}
if (typeof a === 'string') {
console.log(a + '-----参数为字符串的逻辑');
}
return a;
}
func1(1);
func1('hello');
//出入参数都为number|string联合类型,有安全性检查
function func2(a) {
if (typeof a === 'number') {
console.log(a + '-----参数为数字的逻辑');
}
if (typeof a === 'string') {
console.log(a + '-----参数为字符串的逻辑');
}
return a;
}
func2(2);
func2('word');
//函数实现
function func3(a) {
//函数重载,根据参数类型不同,返回值类型也不同
if (typeof a === 'number') {
console.log(a + '-----参数为数字的逻辑');
}
if (typeof a === 'string') {
console.log(a + '-----参数为字符串的逻辑');
}
return a;
}
//调用
var res = func3(3);
var res2 = func3('hello word');
对比ts文件js文件
- 代码差别不大
- 可能你还会觉得这局js代码更简单
总结
这次笔记就分享到这里,都是基础知识,uping!