typescript学习之旅----数据类型及函数、传参、重载
typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验，在typescript中主要给我们提供了以下数据类型
布尔类型(boolean)
数字类型(number)
字符串类型(string)
数组类型(array)
元组类型(tuple)
枚举类型(enum)
任意类型(any)
null 和 undefined
void类型
never类型
console.log('ts')
var str: string = '你好'
var flag: boolean = false;
// flag=123 错误类型
var num: number = 123
num = 234
// num = 'str'; 错误
var str: string = '123'
// str = 123 错误
// ts中定义数组有两种方式
// 数组中所有数据都为number
var arr: number[] = [11, 22, 33]
// 第二种
var arr2: array = [11, 22, 33, 44]
// 元组类型(tuple) 属于数组的一种
// 给每个位置指定数据类型
let arr3: [number, string] = [11, 'ts']
//3、第三种
var arr4: any[] = ['131214', 22, true];
console.log(arr3);
// 枚举类型
/*
枚举类型(enum)
随着计算机的不断普及，程序不仅只用于数值计算，还更广泛地用于处理非数值的数据。
例如：性别、月份、星期几、颜色、单位名、学历、职业等，都不是数值数据。
在其它程序设计语言中，一般用一个数值来代表某一状态，这种处理方法不直观，易读性差。
如果能在程序中用自然语言中有相应含义的单词来代表某一状态，则程序就很容易和理解。
也就是说，事先考虑到某一变量可能取的值，尽量用自然语言中含义清楚的单词来表示它的每一个值，
这种方法称为枚举方法，用这种方法定义的类型称枚举类型。
enum 枚举名{
标识符[=整型常数],
标识符[=整型常数],
...
标识符[=整型常数],
} ;
*/
enum flag { success = 1, error = 2 }
let s: flag = flag.success
console.log(s)
// enum color {blue,red,'orange'};
// var c:color=color.red;
// console.log(c); //1 如果标识符没有赋值 它的值就是下标
// enum color { blue, red = 3, 'orange' };
// var c: color = color.red;
// console.log(c); //3
// var c: color = color.orange;
// console.log(c); //4
enum err { 'undefined' = -1, 'null' = -2, 'success' = 1 };
var e: err = err.success;
console.log(e);
// 任意类型(any)
// var num: any = 123;
// num = 'str';
// num = true;
// console.log(num)
var obox: any = document.getelementbyid('box');
obox.style.color = 'red';
// null 和 undefined 其他(never类型)数据类型的子类型
// var num:number;
// console.log(num) //输出：undefined 报错
// var num:undefined;
// console.log(num) //输出：undefined //正确
//一个元素可能是 number类型 可能是null 可能是undefined
var num2: number | null | undefined;
num2 = 1234;
console.log(num2)
// void类型 typescript中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值。
//表示方法没有返回任何类型
//正确写法
function rua(): void {
console.log('run')
}
rua();
// never类型:是其他类型 (包括 null 和 undefined)的子类型，代表从不会出现的值。这意味着声明never的变量只能被never类型所赋值。
var a: never;
// a=123; //错误的写法
a = (() => {
throw new error('错误');
})()
// 函数的定义
function run(): string {
return 'run'
}
run();
// 匿名函数
var fun2 = function (): number {
return 123
}
// ts中定义方法传参
function getinfo(name: string, age: number): string {
return `${name}---${age}`
}
getinfo('ts', 1)
// 匿名函数
var getinfos = function (name: string, age: number): string {
return `${name}---${age}`
}
// 没有返回值的方法yong void
function run2(): void {
console.log('ts')
}
run2()
// 方法选参数
// es5里面方法的实参和行参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数
// 加个?表示可选 //注意:可选参数必须配置到参数的最后面
function getinfo3(name: string, age: number): string {
if (age) {
return `${name} --- ${age}`;
} else {
return `${name} ---年龄保密`;
}
}
alert(getinfo3('1'))
alert(getinfo3('1', 123))
// 默认参数
// es5里面没法设置默认参数，es6和ts中都可以设置默认参数
function getinfo4(name: string, age: number = 20): string {
if (age) {
return `${name} --- ${age}`;
} else {
return `${name} ---年龄保密`;
}
}
// alert( getinfo4('张三'));
alert(getinfo4('张三', 30));
// 剩余参数
function sum(a: number, b: number, c: number, d: number): number {
return a + b + c + d;
}
alert(sum(1, 2, 3, 4));
//三点运算符 接受新参传过来的值
function sum2(...result: number[]): number {
var sum = 0;
for (var i = 0; i < result.length; i++) {
sum += result[i];
}
return sum;
}
alert(sum2(1, 2, 3, 4, 5, 6));
// 另一种写法 先赋值a
function sum3(a: number, b: number, ...result: number[]): number {
var sum = a + b;
for (var i = 0; i < result.length; i++) {
sum += result[i];
}
return sum;
}
alert(sum3(1, 2, 3, 4, 5, 6));
// 3.5、ts函数重载
// java中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。
// typescript中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
// ts为了兼容es5 以及 es6 重载的写法和java中有区别。
//es5中出现同名方法，下面的会替换上面的方法
/*
function css(config){
}
function css(config,value){
}
*/
//ts中的重载
function getin(name: string): string;
function getin(age: number): string;
function getin(str: any): any {
if (typeof str === 'string') {
return '我叫：' + str;
} else {
return '我的年龄是' + str;
}
}
alert(getin('张三')); //正确
alert(getin(20)); //正确
// alert(getinfo(true)); //错误写法 ,没有布尔值的判断
function getname(name: string): string;
function getname(name: string, age: number): string;
function getname(name: any, age: any): any {
if (age) {
return '我叫：' + name + '我的年龄是' + age;
} else {
return '我叫：' + name;
}
}
alert(getname('zh')); /*正确*/
// alert(getname(123)); 错误
alert(getname('zh', 20));
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论