初始化运行环境
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| # 使用 vscode，不然没法继续了
# 新建目录 ts004
mkdir ts004
# 进入目录
cd ts004
# 建立 .vscode 目录
# 在 .vscode 目录里新建 lanuch.json
# program 位置 填写你本地 ts-node 命令的路径
# which ts-node
{
"configurations": [
{
"name": "ts-node",
"type": "node",
"request": "launch",
"program": "/usr/local/bin/ts-node",
"args": ["${relativeFile}"],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
]
}
# ts004/001.ts
let a:string = 'hi';
console.log(a);
# 选中 001.ts 点击 侧边栏的小虫子
打印 hi 代表你的运行环境就好了
|
TS 数据类型
JS七种数据类型 + 枚举 + Any + void + never
那七种呢？
1
2
3
4
5
6
7
8
| let aa: null = null;
let bb: undefined = undefined;
let cc: boolean = false;
let dd: string = 'hello';
let ee: number = 1.23;
let ff: Object = {name:'hjx'};
let ss = Symbol('key'); // 不支持打印，很少用这里不进行解决。
|
any 类型
让喜欢动态类型的人有一个退路
1
2
3
4
5
6
7
8
9
| // ts里有个规定——你声明了 类型就不能更改,但是在js里是可以的
/*
let n:number = 1;
n = 'hello'
*/
// 如何在 ts 里给一个可以改变类型的变量怎么办？
let n2: any = 1;
n2 = 'hello'
|
枚举
1
2
3
4
5
6
7
8
| // 以前想给员工信息进行统计，用这样一个字段， 男的就是 man 女的就是 woman
let gender = 'man'
gender = 'woman'
// 有时你写错了个字母也发现不了
gender = 'men'
gender = 'women'
|
- 用字符串来代表状态是存在——手误导致状态变多了
- 人总是会出错的
- 答案就是用枚举
1
2
3
4
5
6
7
8
9
10
11
12
13
| enum Gender{
Man,
Woman
}
//此时在声明类型
let gender:Gender = Gender.Man
console.log(gender) // 0
// 万一要修改就
gender = Gender.Woman
console.log(gender) // 1
// 根据打印结果来看 enum 实际是根据你传递的枚举顺序返回索引
|
如果我想指定别的呢？
1
2
3
4
5
6
7
8
9
10
11
| enum Gender2{
Man = 3,
Woman = 'hello'
}
//此时在声明类型
let gender2:Gender2 = Gender2.Man
console.log(gender2) // 3
// 万一要修改就
gender2 = Gender2.Woman
console.log(gender2) // hello
|
void
1
2
3
4
5
6
7
8
9
10
| // void 明确的告诉别人 没有返回值
function print(x: any):void{
console.log(x);
}
// let a:number = print(1) //报错 因为已经说了没有返回值
// 如果a 不声明类型呢?
let a = print(1);
a === undefined // a 就是 undefined
|
undefined
- 你可以给任何类型的值赋值为 undefined
- 默认情况下，undefined 是所有类型的子类型，意思就是你可以把 null / undefined 赋值给所有类型
1
2
3
| let a1:number = undefined
let a2:string = undefined
let a3:boolean = undefined
|
类型转换
1
2
3
4
5
6
7
8
9
10
11
12
13
| // 类型转换
let n: number = 123;
// n.split('') // 报错
// 你只能转换之后在用
let str = n.toString()
console.log(str.split(''));
// ts 如何进行转化呢？
let m: number = 123;
// 还是报错
// console.log(<string>m.split(''))
|
- 因为类型转换必须从一个宽泛的类型才可以转换
- 也就是说 声明的时候应该是 any
1
2
3
| let n1: any = 123
console.log(n1.split('')) // 这样写是有安全隐患的
// 会在运行的时候报错
|
1
2
| let n2: any = '123'
console.log(n2.split(''))
|
实际用法是这样
1
2
3
4
5
| // 明确告诉程序它是什么类型, 意思就是 你不用担心 n3是什么，我能确保它是 string ——只是主观判断
// 如果你实际这样 let n3: any = 123 声明 还是会运行报错，那会是谁的责任，写代码的人
// 这样的意义有什么用，以后会有用——这个概念叫做 断言
let n3: any = '123'
console.log(<string>n3.split(''))
|
断言两种方式
1
2
| (<string>someValue).length;
(someValue as string).length;
|
类型转换的反例
1
2
3
4
5
6
7
8
| let a = '123'
a = a - 0
// 在 js 里 可以 把 a 变成 number
// 在 ts 里 是绝对禁止 这样的类型转换
// 但是 js 缺喜欢 偷偷的 类型转换
let b = 123
b = b + '' // '123'
|
正确做法
1
2
3
4
5
6
7
8
9
10
11
12
13
| // 正确姿势
let a:number = 123;
let b:string = a.toString();
let c:string = '123'
let d:number = parseFloat(c);
let s1:number = 1;
// 非常不推荐这样写
let b1:boolean = !!s1;
//应该这样
let b2:boolean = Boolean(s1);
|
为什么用 Boolean 来转换呢？
1
2
3
4
5
6
7
8
9
10
11
| // node 里 0是false 非0是true
!!0 // false
!!1 // true
!!2 // true
!!-1 // true
// ruby 里 数字都是 true
!!0 // true
!!1 // true
!!2 // true
!!-1 // true
|
字符串和对象的转换
1
2
3
4
5
6
7
8
9
10
11
12
| let o1 = {name:'hjx',age:18}
let str1 = JSON.stringify(o1);
console.log(o1);
console.log(str1);
let str2 = `{"name": "aaa", "age": 18}`;
let o2 = JSON.parse(str2);
// 结果如下
Object {name: "hjx", age: 18}
{"name":"hjx","age":18}
|
变量声明
1
2
3
4
5
6
7
| for(var i=0;i<10;i++){
setTimeout(function(){
console.log(i);
},100*i)
}
// 打印十次 10
|
类型转换的一个问题
1
2
3
4
5
6
7
8
9
10
11
12
| let a1 = [1,2,3]
let a2 = [4,5,6]
let a3 = a1 + a2 // [1,2,34,5,6]
// 正确姿势
let a4 = [...a1,...a2]
let o1 = {name:'hjx'}
let o2 = {age:18}
let o3 = {...o1,...o2}
|