一、Ts的优势

更早的发现错误
任何位置都有代码提示，增加开发效率
类型系统提升了代码的可维护性，重构更容易
使用最新的ES语法
TS类型推断机制，降低成本

二、开发环境的搭建

安装 Node.js 使用 node -v 来检查 node.js 的版本
安装 TypeScript 编译器：npm i typescript -g
查看TS版本：tsc -v
tsc --init 生成配置文件
使用 tsc 命令转换 TS 成 js ：例如：tsc hello.ts
自动编译 tsc --watch

初次使用 tsc 命令可能会出现如下错误：

解决方案：https://blog.csdn.net/virusss/article/details/122940140

ts中变量或函数名与js中重复名报错再ts中添加一行export default{} //模块化

三、数据类型

1、基础数据类型

number类型：双精度 64 位浮点值。它可以用来表示整数和分数。
boolean类型：表示逻辑值：true与false。
string类型：一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。

export default {}// 数值类型 number
let num:Number;
num=100
num=3.14
// num=0x00
console.log(num);// 布尔类型
let flag:boolean
flag=true
flag=false
// flag='abc'//报错
// flag=123//报错// 字符串类型
let str:string
str='张三'
let msg=`我的名字叫${str}`
console.log(str);
console.log(msg);

2、数组

声明变量的一组集合称之为数组。

export default {}// 数组的基本使用
// 方法一：
let arr_1:string[];
arr_1=['张三','李四','王五']
// arr_1=['张三','李四','王五',100]//报错// 方法二：
let arr_2:Array<number>;
arr_2=[1,2,3,4]
// arr_2=[1,3,8,'123']//报错// 方法三：联合类型
let arr_3:(number|string)[];
arr_3=['张安','李四',18]
// arr_3=['张安','李四',18,true]//报错// 方法四：任意类型
let arr_4:any[];
arr_4=['张三',12,true]

3、元组

元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。

export default {}
// 元组类型 Tuple
/*** TS中的元组类型其实就是数组类型的扩展* 用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同
*/
let tup1:[string,boolean,number];
tup1=['张三',true,18]
// tup1=[18,'张三',true]//报错
// tup1=['张三',true,18,'李四']//报错
console.log(tup1);

4、any与void

any：表示任意类型，当我们不清楚某个值的具体类型的时候我们就可以使用any
void：用于标识方法返回值的类型，表示该方法没有返回值。

export default {}// any类型:表示任意类型，当我们不清楚某个值的具体类型的时候我们就可以使用any
// 使用场景一：变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查
let temp:any;
temp='张三'
temp=18
temp=true// 使用场景二：改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查
let x:any=4
// x.dsdjfj()
x.toFixed()// 场景三：定义存储各种类型数据的数组时
let arr:any[]=['鞠婧祎',true,10];
console.log(arr[0]);// void类型
/*** 某种程度上来说，void类型是与any类型相反，它表示没有任何类型* 当一个函数没有返回值时，通常会见到其返回值类型是 void* 在TS中只有null和undefined可以赋值给void类型
*/
function test():void{console.log('每一个星球都有一个驱动核心，每一种思想都有影响力的种子。感受世界的温度，年轻的你也能成为改变世界的动力，百度珍惜你所有的潜力。你的潜力，是改变世界的动力');// return 'zhang'
}
test()// 定义了一个不可以保存任意类型数据的变量，只能保存null和undefined
let value:void;
// value=100
// value='zhang'
// value=true
// 严格模式下null会报错
value=null
value=undefined

5、null与undefined

TS中，undefined和null两者各自有自己的类型分别是undefined与null和void相似，他们的本身的类型用处不是很大
非严格模式下：可以把null和undefined赋值给number类型的变量

export default {}// TS中，undefined和null两者各自有自己的类型分别是undefined与null
// 和void相似，他们的本身的类型用处不是很大
let x:undefined=undefined
let y:null=null
// x='zhang'
// x=18
// y='sd'
// y=20// 非严格模式下：可以把null和undefined赋值给number类型的变量
let money:number=100
money=null
money=undefined

6、never与object

export default {}/*** never类型* 表示的是那些永不存在的值的类型* never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型* 变量也可能是never类型，当它们被永不为真的类型保护所约束时
*/
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {throw new Error(message);
}
// error("挂掉了~~")// 推断的返回值类型为never
function fail() {return error("666");
}// 返回never的函数必须存在无法达到的终点
function loop(): never {while (true) {// ....}
}/*** object类型* 表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型
*/
// 表示一个对象
// 定义了一个只能保存对象的变量
let goddess:object;
// goddess=true //报错
// goddess='zhang' //报错
// goddess=18 //报错
goddess={name:'杨幂',age:18}
console.log(goddess);

7、枚举

能够使代码可读性更高
可以赋值数字
enum类型是对js标准数据类型的一个补充，向c#等其它语言一样，使用枚举类型可以为一组数值复制一个友好的名字
枚举表示固定的几个数值
enum 枚举类型用于定义数值集合。

数字型枚举

export default {}
// 枚举用于表示固定的几个取值
// 例如：人的性别只能是男或女
// enum Gender{
//     Male,//男
//     Femal//女
// }// let sex;
// sex=1;//男
// sex=2;//女// 定义了一个名称叫gender的变量，这个变量只能保存Male与Femal
// let gender:Gender;
// gender=Gender.Male;
// gender=Gender.Femal;
// console.log(gender);
// gender='zhang'//报错
// gender=true//报错
// 注意点：TS中的枚举实现的本质其实就是数值类型，所以赋值一个数值不会报错
// gender=123//不会报错
// enum Gender{
//     Male,//男
//     Femal//女
// }
// console.log(Gender.Male);//0
// console.log(Gender.Femal);//1/*** 注意点：TS中的枚举类型的取值，默认是从上至下从0开始递增的* 虽然默认是从0开始递增的，但是我们也可以手动指定枚举的取值的值* 注意点：如果手动指定了前面枚举值的取值，那么后面枚举值的取值会根据前面的值来递增
*/
// enum Gender{
//     Male=3,//男
//     Femal//女
// }
// console.log(Gender.Male);//3
// console.log(Gender.Femal);//4// 注意点：如果手动指定了后面枚举值的取值，那么前面枚举值的取值是不会受影响的
// enum Gender{
//     Male,//男
//     Femal=5//女
// }
// console.log(Gender.Male);//0
// console.log(Gender.Femal);//5// 注意点：还可以同时修改多个枚举值的取值，如果同时修改了多个，那么修改的是什么最后就是什么
// enum Gender{
//     Male=30,//男
//     Femal=5//女
// }
// console.log(Gender.Male);//30
// console.log(Gender.Femal);//5// enum Gender{
//     Male,
//     Femal
// }
// console.log(Gender.Male);//0
// console.log(Gender[0]);//Male
/*** 1.数字枚举* 默认情况下就是数字枚举* 注意点:1.数字枚举的取值可以是字面量，也可以是常量,也可以是计算的结果*       2.如果采用字面量对第一个成员进行赋值,下面的成员会自动递增*       3.如果采用常量或计算结果进行赋值,则下面的线员也必须初始化
*/
const getNum=()=>200let gender:Gender;
gender=Gender.Femal
gender=100
gender=getNum()

字符串枚举

export default {}
/*** 2.字符串枚举* 注意点：1.如果采用字面品对第一个成员进行赋值,下面的成员也必须赋值*        2.采用[index]的形式不能获取到内容,需要传入[key]*        3.字符串枚举不能使用常量或者计算结果给枚举值赋值*        4.它可以使用内部的其它枝举值来赋值
*/
enum Direction{Up='Up',Down='Down'
}
console.log(Direction.Up);//Up
console.log(Direction.Down);//Down
console.log(Direction[0]);//undefined
console.log(Direction['Up']);//Uplet x:Direction;
x=Direction.Down;
// x='zhang';//报错const getDirection=()=>'左'
// x=getDirection()//报错

异构枚举合并

export default {}/*** 3.异构枚举* 枚举中既包含数字又包含字符串,我们就称之为异构枚举* 注意点:如果是字符串枚举,那么无法通过原始值获取到枚举值
*/
enum Num{Home=1,End='结尾'
}
console.log(Num.Home);//1
console.log(Num.End);//结尾
console.log(Num[1]);//Home
console.log(Num['结尾']);//undefined

8、bigint与symbol

export default {}
// bigint类型：表示非常大的数// 不能将number类型配置给bigint类型
// let hundred1:bigint=100;
// es2020可用
let hundred1:bigint=BigInt(100);
let hundred2:bigint=100n;
console.log(hundred1);//100n
console.log(hundred2);//100n// symbol类型：表示全局唯一引用let firstName=Symbol('name');
let seciondName=Symbol('name');console.log(firstName);//Symbol(name)
console.log(seciondName);//Symbol(name)
// 判断两个变量是否相等
//结果：不全等 地址指向不同
if(firstName===seciondName){console.log('我们一样！');
}else{console.log('我们不一样');
}

9、变量声明与解构

变量的声明

var：可重复声明、不受限于块级作用域、不存在暂时性死区
let：不可重复声明、受限于块级作用域（每一对花括号就是一个块级作用域）、存在暂时性死区
const：不可重复声明、声明必须赋值、赋值后不可更改

与 js 中完全一致数组解构与对象解构

export default {}// 变量声明的方式
// var let const// 数组解构
let name1=['成毅','杨紫'];
let [firstName,secondName]=name1;
console.log(firstName);//成毅
console.log(secondName);//杨紫let name2=['鞠婧祎','杨超越','虞书欣','王鹤棣'];
let [third,...rest]=name2;
console.log(third);//鞠婧祎
console.log(rest);//[ '杨超越', '虞书欣', '王鹤棣' ]let name3=['鞠婧祎','杨超越','虞书欣','王鹤棣'];
let [,fourth,,fifth]=name3;
console.log(fourth);//杨超越
console.log(fifth);//王鹤棣
// 对象解构
let beauty={uname:'赵金麦',age:16,sex:'女'
}
let {uname,age}=beauty;
console.log(uname);//赵金麦
console.log(age);//16

10、类型断言

什么是类型断言？

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

通俗来说就是我相信我自己在定义什么类型

语法格式：<类型>值值 as 类型

export default {}
let str = "世界上最遥远的距离就是,你是if而我是e1se，似乎一直相伴但又永远相离";
// 方法一：
let len1=(<string>str).length;
console.log(len1);//36
// 方法二：
let len2=(str as string).length;
console.log(len2);//36function TypeAs(x:number|string){// console.log(x.length);//不存在属性lengthlet num2=(x as string).lengthconsole.log(num2);//8// 如果传入的是字符串则输出字符串长度，否则输出数字本身if(typeof x=='string'){let num1=(<string>x).lengthconsole.log(num1);}else{console.log(x);}
}
TypeAs('又是美好的一天！')
TypeAs(100)//undefined

11、type别名

类型别名就是给一个类型起个名字，但是他们都代表同一个类型

例如：西游记中的孙悟空，它的外号叫：弼马温，孙行者，行者孙；这些都是孙悟空的别名，孙悟空与弼马温都表示同一个人物。

export default {}// 类型别名
// 第一种：
type beautys='杨颖'|'杨幂'|'唐嫣'|'贾玲';
let one:beautys;
// one=1;//报错
// one=true;//报错
one='杨幂';
// one='迪丽热巴';//报错// 第二种：
// 定义别名
type myfun=(a:number,b:number) => number;
// 声明具体函数
let fun:myfun=(a:number,b:number) => a + b;
// 调用
console.log(fun(10,20));//30// 第三种：
type myGoddass={name:string,age:number,sex:string,actor?:boolean
}
let add:myGoddass={name:'蔡徐坤',age:18,sex:"男",// address:"河南省"//不在已指定的属性当中
}

TypeScript 开发环境的搭建与数据类型相关推荐

Visual Studio Code搭建TypeScript开发环境
转载 http://www.cnblogs.com/sunjie9606/p/5945540.html 使用Visual Studio Code搭建TypeScript开发环境 1.TypeScrip ...
使用Visual Studio Code + Node.js搭建TypeScript开发环境
Visual Studio Code搭建Typescript开发环境 -- 相关文章: http://www.cnblogs.com/sunjie9606/p/5945540.html [注意:这里仅 ...
使用Visual Studio Code搭建TypeScript开发环境
使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...
Java开发环境的搭建与基础语法(温习知识点)
复习昨日内容 * Java语言概述* Java语言概述&发展史[了解]* Java的跨平台[了解]* JDK JRE JVM 有什么作用[理解] * Java开发环境的搭建 * JDK的下载与 ...
android笔记1——开发环境的搭建
Long Long ago...已经成为了历史,我还是要说出一个真相:早年前,那时候,android还不被大众所认知的时候,当然开发人员也没不像如今那样趋于饱和状态.一位大牛前辈,也是我的学长,那时候 ...
Java开发环境的搭建以及使用eclipse从头一步步创建java项目
原文:出自本人的Linux博客http://blog.csdn.net/unix21/article/details/18813173 一.Java 开发环境的搭建这里主要说windows环境下怎么 ...
Java开发环境的搭建以及使用eclipse创建项目
一.Java 开发环境的搭建这里主要说windows环境下怎么配置Java环境.如果是Linux环境参考本博客另一篇文章即可: Linux环境安装卸载JDK 1.首先安装JDK java的SDK简称 ...
SSH开发环境整合搭建
1.建立动态web工程,加入必要的jar包. antlr-2.7.7.jar asm-3.3.jar asm-commons-3.3.jar asm-tree-3.3.jar c3p0-0.9.1.2 ...
《python 与数据挖掘》一1.3　Python开发环境的搭建
本节书摘来自华章出版社<python 与数据挖掘 >一书中的第1章,第1.3节,作者张良均杨海宏何子健杨征,更多章节内容可以访问云栖社区"华章计算机"公众号查看 ...

TypeScript 开发环境的搭建与数据类型

一、Ts的优势

二、开发环境的搭建

三、数据类型

1、基础数据类型

2、数组

3、元组

4、any与void

5、null与undefined

6、never与object

7、枚举

数字型枚举

字符串枚举

异构枚举合并

8、bigint与symbol

9、变量声明与解构

变量的声明

10、类型断言

什么是类型断言？

语法格式：<类型>值值 as 类型

11、type别名

TypeScript 开发环境的搭建与数据类型相关推荐

最新文章

热门文章

TypeScript 开发环境的搭建与数据类型

一、Ts的优势

二、开发环境的搭建

三、数据类型

1、基础数据类型

2、数组

3、元组

4、any与void

5、null与undefined

6、never与object

7、枚举

数字型枚举

字符串枚举

异构枚举 合并

8、bigint与symbol

9、变量声明与解构

变量的声明

10、类型断言

什么是类型断言？

语法格式：<类型>值 值 as 类型

11、type别名

TypeScript 开发环境的搭建与数据类型相关推荐

最新文章

热门文章

异构枚举合并

语法格式：<类型>值值 as 类型