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

星宇大前端

发布于 2021-07-19 15:32:41

4240

发布于 2021-07-19 15:32:41

文章被收录于专栏：大宇笔记大宇笔记

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

Javascript 原始类型

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

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

测试小例：

let str1:string = '3'
console.log(typeof str1);
let str2:String = '4'
console.log(typeof str2);
console.log((typeof str1) === (typeof str2));

打印结果：

[Running] ts-node "/Users/zhangyu/Desktop/study/ts/js2ts-project/tempCodeRunnerFile.ts"
string
string
true

数组

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

// 一维数组
//字面量写法
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);

打印结果：

[ 3, 4 ]
[ 3, 4 ]
[ [ 3 ], [ 4 ] ]
[ [ 3 ], [ 4 ] ]

Any

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

官网例子：

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 声明变量，你可以选择去加了一个明确的类型在变量后边，如：

let  name:string =  "xiaoming"

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

let  name =  "xiaoming"

name会推断成string 类型

函数

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

函数参数限制

function play(game:string) {
    console.log('玩' + game);
}

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

play(3)
//这时候会报错
//Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)

函数返回值限制和推断

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

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

函数名检测

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

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

对象类型

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

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 });

对象可选属性

可选值不需要必传

function printName(obj: { first: string; last?: string }) {
  // ...
}
// Both OK
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-07-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

typescript