TypeScript系列教程三《基础类型》

2021-07-19 15:32:41 浏览数 (1)

本篇主要介绍TypeScript 常见类型,在日常工作中常见

Javascript 原始类型

Javascript 常用的String,Number,Boolean, TypeScript有与之相对应的类型string,number,boolean

注意TypeScript 推荐使用后者,虽然在TS中使用String等也是可以的,但是最后Typeof也是string

测试小例:

代码语言:javascript复制
let str1:string = '3'
console.log(typeof str1);
let str2:String = '4'
console.log(typeof str2);
console.log((typeof str1) === (typeof str2));

打印结果:

代码语言:javascript复制
[Running] ts-node "/Users/zhangyu/Desktop/study/ts/js2ts-project/tempCodeRunnerFile.ts"
string
string
true

数组

数组可以通过泛型指定类型,字面量写法方便,具体见小例。

代码语言:javascript复制
// 一维数组
//字面量写法
let array1:number[] = [3]
array1.push(4)
console.log(array1);

//泛型写法
let array2:Array<number> =  Array.of(3)
array2.push(4)
console.log(array2);


// 二维数组
//字面量写法
let array3:number[][] = [[3]]
array3.push([4])
console.log(array3);

//泛型写法
let array4:Array<Array<number>> = Array.of([3])
array4.push([4])
console.log(array4);

打印结果:

代码语言:javascript复制
[ 3, 4 ]
[ 3, 4 ]
[ [ 3 ], [ 4 ] ]
[ [ 3 ], [ 4 ] ]

Any

TypeScript 还有一个特殊的类型,any,当你不希望某个特定的值导致类型检查错误时,你可以使用它。用了它你就回到了Javascript,一个大神说过,这是TypeScript一个漏洞。

官网例子:

代码语言:javascript复制
let obj: any = { x: 0 };
// None of the following lines of code will throw compiler errors.
// Using `any` disables all further type checking, and it is assumed 
// you know the environment better than TypeScript.
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;

noImplicitAny

如果使用了any,就无法再上下文推断类型。如果不想如此,我们可以通过noImplicitAny 编译选项去限制使用。

类型推断

通常我们使用const var let 声明变量,你可以选择去加了一个明确的类型在变量后边,如:

代码语言:javascript复制
let  name:string =  "xiaoming"

其实大多数的情况下,这是不需要做的,TS类型推断系统会帮助我们完成类型推断识别,如下面:

代码语言:javascript复制
let  name =  "xiaoming"

name会推断成string 类型

函数

相对于JS,TS的函数新增了类型限制和约束

函数参数限制

代码语言:javascript复制
function play(game:string) {
    console.log('玩'   game);
}

限制了参数必须是string ,如果传入其他类型会报错

代码语言:javascript复制
play(3)
//这时候会报错
//Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)

函数返回值限制和推断

通常我们不会去写返回值,因为TS类型推断系统会推断出合适的返回值,如:

如果我们限制了返回类型,返回类型不匹配的时候会报错

函数名检测

如果TS知道一个类型,去调用其函数,如果有一点不同,TS会检查出并推荐出函数名,如图所示:

这里toUpperCase 写成了 toUppercase, TS会检测出,并报错提示。

对象类型

对象相对于JS也是加上类型限制,如例子:

代码语言:javascript复制
function printCoord(pt: { x: number; y: number }) {
  console.log("The coordinate's x value is "   pt.x);
  console.log("The coordinate's y value is "   pt.y);
}
printCoord({ x: 3, y: 7 });

对象可选属性

可选值不需要必传

代码语言:javascript复制
function printName(obj: { first: string; last?: string }) {
  // ...
}
// Both OK
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

0 人点赞