加深ts开发理解 -- 用于定义数据类型环境使用

一、为什么使用TS开发，js不足够吗

第一点知识：vscode和TypeScript是都是微软开发，维护的。市场使用人多率

TS是微软公司开发和维护的一种面向对象的编程语言。它是JS的超集，包含其他所有元素。

TypeScript完全遵循OOPS的概念，在TSC（TypeScript编译器）来解析ts文件代码转换成js文件代码

使用命令 tsc xx.ts  生成一个xx.js文件 这是node的js环境下暂时还不支持ts开发，所以只能使用编译器  12年发布，10年创建开发

1.TS基础知识

 TypeScript 它是JS的超集，他为JS代码提供了强类型语言特性。它的好处可以精确数据的类型，可以更好控制

程序的数据引用，为程序后期维护提供数据支撑，它是预编译语言，会在执行前进行编译检查，如果有错，不会进行编译。

一般是复杂项目，数据关系比较复杂的项目才会使用ts,否则就是冗余。

所有的文件必须以ts后缀（react -> tsx , vue ->script lang='ts' 或则是js文件改为ts文件）

因为ts需要编译后才能运行，所以必须安装编译环境

cnpm i -g typescript

编译文件：tsc xxx.ts 解释=> tsc typescript compile

这个使用 nodejs现在不支持ts运行，需要配置运行环境

2.语法编写

//显示数据类型定义
//1.显示数据类型定义 -->就是在声明变量后加冒号 数据类型来决定赋值
let str:string ='str'
let num:number = 1
let bool:boolean = !!1 //使用！来取反  强制转换为Boolean 
//这种定义了数据类型就是 不可以赋值为其它数据类型

//2.推导类型定义  在ts里不声明 数据类型 直接赋值就是为推导数据类型

let str0 = 'str0'   //一旦给定初始值，那么str0的数据类型就为string
//3.它的推导类型 为any（任意数据类型） => let num0 :any;
let num0
 num0 = 'num0'
 num0 ={}

//3.如果是复杂数据对象，可以用接口和类型来定义数据对象类型 
// 定义数据接口 (接口是定义规则的方法) interface  -->定义对象
interface UserInf{
  id:string;
  name:string;
  sex:number;
  age:number;
 //定义某个属性为非必须属性
  vip?:boolean;
}
let user:UserInf ={id:'',name:'',sex:1,age:18,vip:false}
//定义数据类型接口使用
user = {id:'zhangsan',name:'张三',sex:0,age:parseInt('12')}
//4.接口可以继承 数据对象
interface ZhangSan extends UserInf{
   say:()=>void;
   help:(s:string) => boolean;
}
let Zhangsan:ZhangSan = {id:'zhangsan',name:'张三',age:12,sex:1,vip:false,say:function(){
  console.log('-------在说话')
},
help:s=>{
  return s === '给钱' ? false :true
}
}
Zhangsan.help('12')
//5.定义具体的数据类型，但是数据类型没有办法继承  type具体定义声明
type UserType ={
  id:string,
  age:number,
  vip?:boolean
}
let UserInfo:UserType = {id:'王五',age：12,vip:false}
//6.如果实在不想定义数据类型直接使用any -- 不要经常使用any数据类型，否则你用ts干嘛？
let Userany:any ={id:'王五',age:12,vip:false,name:'zhangsan',sex:'男'}
userany = false
console.log(UserInfo)

3.实现总结

定义数据类型来使用，因为在组件下发传值时，需要参数数据时是变量，可能会不精确数据的传值

1.在文件夹下

mikdir ts-demo

cd ts-demo

code .

npm init -y     ==>初始化