TS01 : TS变量类型详解TS函数

1.typescript概述

  • 什么是javascript?(运行环境 浏览器/ nodejs)
    JavaScript (缩写: JS)是-种运行在客户端(比如:浏览器)中的编程语言。
    当应用于浏览器时,为网站提供动态交互特性,让网页“动”起来。
    JavaScript的运行环境: 1浏览器2 Node.js.
    Node.js让JavaScript摆脱了浏览器的束缚,可以实现服务端/桌面端编程等。

  • 什么是typescript?
    TypeScript (简称: TS)是JavaScript的超集(JS 有的TS都有)。
    TypeScript = Type + JavaScript (为 JS添加了类型系统)。

// TypeScript代码:有明确的类型,即: number ( 数值类型)
let age: number = 18
// JavaScript代码:无明确的类型
let age = 18

TypeScript是微软开发的开源编程语言,设计目标开发大型应用。
可以在任何浏览器、任何计算机、任何操作系统上运行。

2.TS相比于JS的优势

JS的类型系统存在”先天缺陷”, 绝大部分错误都是类型错误( Uncaught TypeError )

  • 优势一:类型化思维方式,使得开发更加严谨,提前发现错误,减少改Bug时间。
  • 优势二:类型系统提高了代码可读性,并使维护和重构代码更加容易。
  • 优势三:补充了接口、枚举等开发大型应用时JS缺失的功能。
  • Vue 3源码使用TS重写,释放出重要信号: TS是趋势。
  • Angular默认支持TS; React与TS美配合,是很多大型项目的首选。

3.typescript中的数据类型

  • 1.布尔类型
//布尔类型
let isTrue:boolean = true;

let isFalse:boolean = false;

console.log(isTrue)
console.log(isFalse)
  • 2.数字类型
//数字类型
let size:number = 18;
let score:number = 99.8;

let sub:number = - 100;
console.log(size)
console.log(score)
console.log(sub);
  • 3.字符串类型
//字符串类型
let pname:string = '康家豪';
console.log(pname);

//模板字符串
let age:number = 18;

let str:string = `${ pname}的年龄是${ age}岁!`;
console.log(str)
  • 4.数组类型
//数组类型
// 语法一:
let names:string[] = [];

//数组的类型注解由两部分组成:类型+ []。处表示字符串类型的数组(只能出现字符串类型)。
names = ['time','is','money'];
console.log(names);


//语法二:泛型
let scores:Array<number> = [1,2,3,4,5,6]
  • 5.元组类型
//元组类型(通过元组类型可以给数组中的元素指定多个数据类型)
let tuple:[string,number,boolean] = ['康家豪',18,true];
console.log(tuple);
  • 6.枚举类型
    枚举类型( enum)
    随着计算机的不断普及,程序不仅只用于数值计算,还更广泛地用于处理非数值的数据。
    例如:性别、月份、星期几、颜色、单位名、学历、职业等,都不是数值数据。
    在其它程序设计语言中,一般用一个数值来代表某状态,这种处理方法不直观, 易读性差。
    如果能在程序中用自然语言中有相应含义的单词来代表某一状态 ,则程序就很容易阅读和理解。
    也就是说,事先考虑到某一变量可能取的值,尽量用自然语言中含义清楚的单词来表示它的每一个值,
    这种方法称为枚举方法,用这种方法定义的类型称枚举类型。
//用于标识状态
enum Flag { 
    success = 1,
    error = 0
}

var f1:Flag = Flag.success;
var f2:Flag = Flag.error;

console.log(f1);
console.log(f2);

enum Colors { 
    red,
    blue,
    green
}

var c:Colors = Colors.red;
console.log(c) //0 没有赋值默认为对应的索引值
  • 7.任意类型 (any) (获取dom节点)
var num:number = 19;
num = 20; //报错

var num:any = 20;
num = 99;//不会报错
  • 8.null和undefined(都只有一个值,并且值为它本身。)
//用来定义可能为未赋值又需要赋值的数字
var num:undefined | number;
console.log(num)

//一个元素可能是number类型 可能是null 可能是undefined
var num:number | undefined | null;
  • 9.void类型(一般用于定义方法没有返回值)
//ES5 没有返回值的函数
function run():void{ 
    console.log('run')
}

run();

function run2():number{ 
    return 123
}
run2();

  • 10.never类型(声明never的变量只能被never类型所赋值)
var a:never;
a = () => { 
    throw new Error('错误');
}

4.TS中的函数

4.1 函数的定义

  • 4.1.1 ES5中定义函数
//函数声明法
function run(){ 
    return 123;
}

//匿名函数
var run2 = function(){ 
    return 123;
}
  • 4.1.2 ts中定义函数的方法
//函数声明法
function run():string{ 
    return 'run';
}

//匿名函数
var run2 = function():number{ 
    return 123;
}

//ts中定义方法传参
function getInfo(name:string,age:number):string{ 
    return `${ name}--- ${ age}`;
}
console.log(getInfo('康家豪',20))

//没有返回值的方法
function run():void{ 
    console.log('run')
}
run();

4.2 方法可选参数

es5中方法的实参和形参可以不一样,但是ts中不可以,需要配置可选参数

  • 举个例子(如果我某个函数中的参数是非必须的,我该怎么处理)
function getInfo(name:string,age:number):string{ 
    if(age){ 
        return `${ name}--- ${ age}`;
    }else{ 
        return `${ name}--- 年龄保密`;
    }
}
console.log(getInfo('康家豪'))

//这样程序是可以运行的,但是ts报错,并且不严谨
//所以我们需要配置可选参数
function getInfo(name:string,age?:number):string{ 
    if(age){ 
        return `${ name}--- ${ age}`;
    }else{ 
        return `${ name}--- 年龄保密`;
    }
}
console.log(getInfo('康家豪'))


//注意:可选参数必须配置到所有参数的最后面

4.3 默认参数

function getInfo(name:string,age:number = 20):string{ 
    if(age){ 
        return `${ name}--- ${ age}`;
    }else{ 
        return `${ name}--- 年龄保密`;
    }
}
console.log(getInfo('康家豪',99))

4.4 剩余参数

避免实参多余形参。

function sum(...result:number[]):number{ 
    var sum = 0;
    for(var i = 0; i < result.length; i++){ 
        sum += result[i]
    }
    return sum;
}

alert(sum(1,2,3,4,5,6,7))

4.5 箭头参数

//this指向函数定义处的上下文
let a = () => { 
    console.log('aaa')
}
a()
    原文作者:七月是我的生日
    原文地址: https://blog.csdn.net/qq_43955202/article/details/107617788
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞