抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

Mr.wang

Time flies and people come and go

ts学习笔记

安装typescript编译

1
2
3
4
5
npm i -g typescipt
//当前版本
tsc -v
//编译为js
tsc <ts文件>

报错

1
2
3
function join(word: string) {
return "hello " + word
}

参数类型错误

error Argument of type ‘number[]’ is not assignable to parameter of type ‘string’

1
2
let word = [0, 1];
console.log(join(word));

多个参数错误

error Type ‘null’ is not assignable to type ‘number’.

1
2
let word = [0, 1];
console.log(join(word, 1));

严格模式检查null

error Argument of type ‘number[]’ is not assignable to parameter of type ‘string’

1
2
let n: number = 4
n = null

元组报错

未定义的元组下标不能赋值,索引不能超过定义的长度

error Type ‘“wang”‘ is not assignable to type ‘undefined’

Tuple type ‘[string, number]’ of length ‘2’ has no element at index ‘3’

1
2
let tuple: [string, number]
tuple[3] = "wang"

ts接口定义参数类型

1
2
3
4
5
6
7
interface Word {
firstName: string,
lastName: string,
}
function join(word: Word) {
return "hello " + word
}

ts基础类型

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
let isDone:boolean = true/false
let num: number = 20
let str: string = "wang"
let str: string = `wang${num}`
let arr: number[] = [0, 1, 2]
let arr:Array<number> = [0,1,2]
let arr: string[] = ["w", "a", "n","g"]
//元祖
let x:[string,number]
x = ["wang",10]//true
x = [10,"wang"]//false
x[0].sub(1)//true(字符串上的方法)
x[1].sub(1)//false(数字没有方法)
x[1/0].toString()//true(都有的内置方法)
x[0] = "hello"//true
x[1] = 20//true
x[1] = true //false(只能是定义的元祖类型)
//枚举
enum Color{
Red,
Green,
Blue
}
let c:Color = Color.Green
//枚举有顺序
enum Color {
Red,
Green,
Blue
}
let colorName: string = Color[0]
console.log(colorName);//Red
//编译结果
var Color;
(function (Color) {
Color[Color["Red"] = 0] = "Red";
Color[Color["Green"] = 1] = "Green";
Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
var colorName = Color[0];
console.log(colorName);

//可自定义枚举下标,下面的都按顺序递增
enum Color {
Red=1,
Green,
Blue
}
let colorName: string = Color[2]
console.log(colorName);//Green
//any类型
let notSure:any = 4/"wang"/true
let list:any[] = [1,true,"wang"]
//void
function wang():void {
console.log("this is void")
}
let wang:void = null
let wang:void = undefined

let wang:undefined = undefined
let wang:null = null
let wang:null = undefined

//联合类型
let num:number | null = 4/null
//never
function error(message:string):never{
throw new Error(message)
}
function fail(){
return error("error")
}
function inifiniteloop():never{
while(true){

}
}
//object
declare function create(o:objext|null):void
create(o:{props:0})
create(o:null)
create(o:"wang")
create(o:20)
create(o:false)
create(o:undefined)
//类型断言
//强制转化为一种类型
let someValue:any = "wang"
let strlength:number = (someValue as string).length

ts接口

必须的接口

1
2
3
4
5
6
7
interface Person {
firstName: string,
lastName: string,
}
function join(person: Person) {
return "hello " + person.firstName + " " + person.lastName
}

可选属性

1
2
3
4
5
6
7
8
9
10
11
interface Person {
firstName: string,
lastName: string,
}
interface PersonConfig {
firstName?: string,
lastName?: string,
}
function join(person: PersonConfig):Person {
return "hello " + person.firstName + " " + person.lastName
}

只读属性

1
2
3
4
5
interface Point {
readonly x: number,
readonly y: number,
}
let p:Point = {x:10,y:20}

额外属性

1
2
3
4
5
6
interface Point {
x: number,
y: number,
[propName:number]:any
}
let p:Point = {x:10,z:20}

函数类型检查

1
2
3
4
5
6
7
8
interface PointFunc {
(x: number,y: number):boolean
}
let p:PointFunc
p = function(x: number,y: number):boolean{
let result = x.search(y)
return result>-1
}

评论