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美配合，是很多⼤型项⽬的⾸选。
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 = ;
console.log(f1);
console.log(f2);
enum Colors {
red,
blue,
green
}
var c:Colors = d;
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{
return123
}
run2();
var a:never;
a=()=>{
throw new Error('错误');
}
4.TS中的函数
4.1 函数的定义
4.1.1 ES5中定义函数
//函数声明法
function run(){
return123;
}
//匿名函数
var run2=function(){
return123;
}
4.1.2 ts中定义函数的⽅法
//函数声明法
function run():string{
return'run';
}
/
/匿名函数
var run2=function():number{
return123;
}
//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 箭头参数
enum函数//this指向函数定义处的上下⽂
let a=()=>{
console.log('aaa')
}
a()

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。