TS入门004接口01

初始化运行环境

  • 进入目录建立配置文件
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('')) // 这样写是有安全隐患的
// 会在运行的时候报错
  • 你必须确保它是 string 才可以
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
尽量不用 var,使用 let 和 const
  • 变量用 let
  • 常量用 const
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}