说好的每周一篇博客，就这样拖着拖着，上周的博客拖到了这周周一，一个是因为项目确实忙 ，另一个是周末也比较忙（打开电脑的机会都没有，这个时候不禁感叹，时间都去哪了）
多希望有一夜突然惊醒，发现自己在一节课上睡着了，一觉醒来还在高中的教室里，老师的粉笔迎面而来砸到你的脸上，提醒你，上课不要睡觉。你告诉同桌，说做了个好长的梦，同桌骂你白痴，叫你好好听课，你看着窗外的球场，阳光洒在脸上，一切都那么熟悉，一切还充满希望
但是 回不去了
一入程序深似海，回首已是百年身
感慨过了，开始正题，上周没有发生什么有趣的难题，所以准备系统的写一篇关于typescript的入门教程（不禁感叹是谁给我的勇气）
现在最适合入门的教程是TypeScript中文文档，链接https://www.tslang.cn/docs/handbook/basic-types.html
而我这篇文章也是基于这个写的，因为翻译的大牛很多知识点是一笔带过，对于接触js不久，或者没有系统的学过后台语言的新手，还是有很多问题或者疑惑的地方，我之前也遇到很多疑惑的地方，有的经过多方查找资料和网上很多教程相互印证，现在已经理解的比较明白了，所以ts这一系列的文章就是，对我自己学习的一个总结
基础类型篇
ts基础类型 沿用js
js就有的 ----布尔值,数字,字符串,,Null 和 Undefined，数组，Object
js没有的 ----Tuple,enum,Any,Void,Never,类型断言
看一下具体的用法，基本都是变量后面跟一个 let xx：类型 = 值
let decLiteral: number = 6; //十六，十，八，二（进制）
let sentence: string = `Hello, my name is ${ name }.`
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3]; //泛型模式
上面比较特殊的一个是模板字符串，
1.对比于js的字符串，多了一个多行字符串的功能，不用多个=>字符串 + 字符串 + 变量......，直接一个xxxxx ${name}xxxx,就可以代替之前繁琐的写法，很赞的一个功能。
2.如果一个字符串模板，当作参数传递，ts有自动拆分字符串的功能
let tname: string = "zxw"
let getAge = function () {
return 27
}
function f(template,tname,age) {
console.log(tname)
console.log(age)
}
f`my name is ${tname},my age is ${getAge()}` //zxw 27
ts基础类型 新增
Tuple 已知类型和数量
enum enum Color {Red, Green, Blue}
any 任意类型
void 没有任何类型，常用于函数无返回值
Never 永不存在得值类型
类型断言 xxx as 类型
这里面说一下枚举 enum
top不赋值情况下永远是0，其余在前一个基础上+1
enum handle{top,right,bottom,left}
console.log(top) //0
console.log(right) //1
console.log(bottom) //2
console.log(left) //3
如果在中间赋值----top还是0，
被赋值后就等于被赋予的值
如果当前元素的前一个元素被赋值了 当前元素的值=前一个元素的值+1
enum handle{top,right,bottom=3,left}
console.log(top) //0
console.log(right) //1
console.log(bottom) //3
console.log(left) //4
列举一个试用场景，比如有一个简单的游戏需要上下左右四个按键操作，就可以写成这样
enum handle{top=1,right,bottom,left}
console.log(top) //1
console.log(right) //2
console.log(bottom) //3
console.log(left) //4
switch (n){
case top:
//dosomething
break;
case right:
//dosomething
break;
case bottom:
//dosomething
break;
case left:
//dosomething
break;
default:
//dosomething
}
说一下类型断言
其实中文文档上面说的已经比较清楚了
你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
两种实现方式 --- 第一种
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
第二种
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。
let和const
let
不存在变量提升，如果未定义使用会报错
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
暂时性死区,未申明不能赋值
x = 5 // 报错ReferenceError
let x
不允许重复申明
let x = 5
let x = 6 // 报错ReferenceError
块级作用域
{
let x = 5
}
console.log(x) //undefind
const
对于普通类型，被赋予的值是不能修改的
对于引用类型，栈地址是不允许修改的，但堆里面的内容是可以修改的
我理解的堆栈.png
关于let和const还有一个比较有意思的改变
let const声明的变量都不是挂载在window上的，而是挂在全局对象global上
let x = 10
console.log(window.x) // undefind
网友评论