vue 转向 react ,正好vue3.0 也用到TypeScript 所以需要抓紧时间学习 TypeScript 。
教学视频 是 千锋前端TypeScript教程陆荣涛老师主讲(陆神顶配版TS入门教程)
(可能之前都有一些基础 但是比较凌乱 现在想系统性的学习一下,而且视频 我都是看完一遍 第二遍的时候才开始记笔记 如果有小伙伴 想学习的话 根据自己实际情况 学习就行)
学习视频 ---> 千锋前端TypeScript教程陆荣涛老师主讲
TypeScript 简称 ts
Javascript 简称 js
什么是TypeScript
ts 是 js 的一个超集,可以在ts 中使用 js 之外的扩展 语法,同时借助ts 对面向对象 和静态类型的 良好支持,可以编写更大型更健康的项目。
我个人理解ts 把它理解成 预编译 也行 或者把他理解成 对你所使用的数据增加类型判断等 从而可以在运行代码之前就可以检验出代码是否正确,从而达到了更早发现问题的目的。
关于 ts 的优缺点
优点:
提供可选的强静态类型
更早发现 BUG
代码可预测
丰富的 IDE 支持
方便重构
提供面向对象的写法
缺点:
不是真正的静态类型
有一定的学习成本
需要写更多的代码
需要编译
TS 常用数据类型(基础篇 且 必用)
通常声明一个变量 以 :类型 为准 如 数字类型 let num:number = 6;(在以后的变量使用中 如果num的数据类型发生变化(除了null undefined 外) 则代码编译的时候就会警告,这就是ts 不同于js 的地方之一)
TS中的常用的数据类型有 (内置类型)Number, String, Boolean, Null, Undefined, Void, enum,Array,Any,Object,元组, 接口等
数字类型
例如 let decimal: number = 6;
字符串
let color: string = "blue";
布尔类型
let isDone: boolean = true;
let bool1: Boolean = new Boolean();
Null和Undefined
null和undefined是所有类型的子类型,可以赋值给 任意类型的变量
undefined表示未定义的值,一个变量最原始的状态,例如声明了变量没有赋值
null是空值的意思,表示一个对象被人为的重置为空对象,相当于栈中的变量没有指向堆中的内存对象。
let num: number = undefined;
void类型(表示没有任何返回值的函数;表示没有任何类型)
function warnUser(): void {
console.log("This is my warning message");
}
enum枚举类型
enum Color {Red, Green, Blue}
let c: Color = Color.Greent
enum Color {Red = 1, Green, Blue}
let c: Color =color.green
数组
数组的项中不允许出现其他的类型; 有时候可以通过any类型来允许出现任意类型
类型+方括号的表示法 例如 number[], 这种类型的数组里面是不允许有除了number之外的类型
数组泛型 Array+ <类型> 例如 Array<number>
接口表示数组, 利用索引签名
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
interface selfArray {
[index: number]: numer
}
let list3: selfArray = [1,2,3]
元组(数组是合并了相同类型的对象, 而元组Tuple合并了不同类型的对象)
let list:[number, string] = [1, 'a']
Any类型
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;
Object 类型
Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法,即便它真的有这些方法
let prettySure: Object = 4;
prettySure.toFixed(); 这行会直接报错
安装编辑器 编译环境
我个人还是习惯用webstrom 编辑器
新建 xxx.ts 文件
在该文件中输入console.log('这是一个简单的测试!');
然后在该文件下打开termial 输入命令 tsc xxx.ts 后 会生成一个与之相对应的js 文件 ,然后再执行 node xxx.js 控制台输出内容。这样一个简单的ts 文件转化 以及输出 就完成了。
这里事先要说一下 将来可能会看到 xxx.ts 的文件 也会看到 xxx.tsx 文件 ,这个问题 问过大佬 大佬说 ts是js文件(通过编译转化成js文件) tsx是写代码模版的。日后会看到很多 先温习一下基础知识。
优化编译
解决 ts 和 js 的代码冲突问题
当 ts 和 js 中出现相同方法名称或者变量名称的时候 会出现警告。
如图
tsc --init 执行命令后 会在文件下生成 tsconfig.json 文件里面有各种配置项 (执行后会发现 方法中传入的参数会报警告,原因是没有定义 参数的类型)
tsc --watch 执行命令后 可以实时检查代码编译情况,包括报错情况。
tsc -noEmitOnError xxx.ts 文件 执行该命令的时候 当ts文件中的方法出现错误的时候 文件不可以编译成js 文件。(日后项目优化的时候 会用到)
在ts 文件中有类型的增加 如
function greet(person:string,date:Date){
console.log(`Hello ${person}, Today is ${date.toDateString()}`);
}
中的 person:string
在编译成js 代码后 没有出现 后面的 :string
以下是代码部分 我直接贴出来 有空的小伙伴 勤加练习。
//字符串
let str:string ='hello world!';
//数值
let num:number =100;
//布尔
let bool:Boolean =true;
//数组 (有两种写法) :type[] :Array<type>(泛型写法)
let arr01:number[] = [1,2,3];//数组中必须是 number 类型的值
let arr02:Array = [1,2,3];
//特殊类型 any (可以将任意类型的值 赋值给 对应的变量) 如下
let obj:any = {
x:0
};
obj ='any 也可以赋值成 字符串。'
//函数 :void 意思是 默认啥也不返回 name: string 类型注释 :void 返回值类型注释
function greet(name:string):void{
console.log(name)
}
greet('字符串参数。')
//也可以 写入 number 返回值类型
function returnNum(x:number):number{
return x>1?x:1
}
returnNum(50);
//匿名函数 会自动指定编译类型 names 中有不同类型的值 forEach输出的时候
// 就可以正常输出 不报任何错误
//值得注意的是 当我们打印 x.toUpperCase()的 时候就会报错toString() 不报错
let names = ['1','2',3];
names.forEach(x =>{
console.log(x.toString());
})
//对象类型
function printCoord(pt:{x:number,y:number}){
console.log(pt.x)
console.log(pt.y)
}
printCoord({x:1,y:1});
// 对象类型中 传入的参数 是可选 的 如下 last? 就是 用户 可传 可不传的 值 不可以额外传入 没有接收的值
function printName(obj:{first:string,last?:string}){
console.log(obj.first)
console.log(obj.last ?obj.last:'last 没有值');
//等同于上面的三元表达式
console.log(obj.last?.toString())
}
printName({first:'对象类型中传入last值',last:'传入last值。'});
printName({first:'对象类型中不传入last值'});
//联合类型 两个或者多个其他类型组成的类型
// 既可以是 字符串类型 也可以是 数值类型
function printId(id:string |number ){
console.log(id);
// 类型缩小 也叫类型判断 其实就是 事先对传过来的值 增加一个判断 然后根据类型的不同做不同的事儿
if(typeof id ==="string"){
console.log('传过来的是个字符串类型。')
}else{
console.log('传过来的是个数值类型。')
}
}
printId(100)
printId('100')
// 既可以传入 字符串 也可以传入 字符串类型的数组
// 这里 主要是想练习一下 Array.isArray(xxx) 的方法,以前都是通过 长度判断是否为字符串的
function welcomePeople(x:string[] |string){
if(Array.isArray(x)){
console.log('传过来的是个字符串类型的数组。')
}else {
console.log('传过来的是个字符串。')
}
}
welcomePeople(['1','2','3']);
welcomePeople('传入字符串。');
// 类型别名 通过 type 直接定义 对象 数值 字符串 三种类型
type obj = {
x:number,
y:number
};
type Id =number;
type name =string;
type arr = Boolean;
function isObjType(point:obj){
console.log(point.x)
console.log(point.y)
}
isObjType({x:0,y:1});
function isString(x:Id){
console.log(x)
}
// 自定义返回值 方式 之前的:void
type useArr =string;
function isMethods(str:string):useArr{
return str;
}
isMethods('返回一个字符串。')