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()