TypeScript数据类型[七日打卡]

南山隐士
203 阅读4分钟

什么是TypeScript

TypeScript 是 Javascript 的超集，遵循最新的 ES6、Es5 规范。TypeScript 扩展了 JavaScript 的语法。

TypeScript 安装和编译

安装: npm install -g typescript 编译(将ts转换成js): tsc 文件名称

Vscode同步编译

  1. 创建配置文件 终端运行 tsc --init
  2. 将配置文件中的 "outDir": "./js", 设置对应的输出路径
  3. 点击菜单 任务-运行任务 点击 tsc:监视-tsconfig.json

image.png

此时你修改ts文件的内容,会对应生成或者修改同名的js文件

数据类型

TypeScript的数据类型包括:

布尔类型（boolean） 数字类型（number） 字符串类型(string) 数组类型（array） ==元组类型（tuple）== ==枚举类型（enum）== ==任意类型（any）== null 和 undefined ==void类型== ==never类型== Object类型

然后我们还需要明确TypeScript ==增加了类型效验== ,也就是说你现在定义变量,必须定义一个类型

布尔类型

var flag:boolean = true

如果是其他类型 var flag:Boolean = 121

image.png

数字类型

var num:number = 123;
num = 456;
console.log(num);  /正确/
num='str';    //错误

字符串类型

var str:string = 'this is ts';

str = 'yaojin';  //正确

str = true;  //错误

数组类型

方式一:

var arr:number[] = [11,22,33];

console.log(arr);

上面的代码定义为一个==必须是数组,并且元素是要数值==的类型

方式二(数组泛型):

var arr:Array<number> = [11,22,33];

console.log(arr)

元组类型

元组类型表示一个==已知元素数量和类型的数组==，各元素的类型不必相同

let arr:[number,string]=[123,'this is ts'];

上面的代码中,数组中必须含有数值和字符串才可以,并且类型位置必须按先数值再字符串的顺序,并且数量只能2个,只要一个不满足,就会报错

未知事情: 看官网的例子可以超出数量,称用联合类型替代, 测试不可以,待后续确认

枚举类型

在以前,我们一般用某个数值来定义一个状态,来传给后台,可是这样的可读性非常差,现在枚举类型帮我们解决了这个问题

使用枚举类型可以为一组数值赋予友好的名字

enum Status {
  success,
  error
}
let pay:Status = Status.success
console.log(pay) // 0

默认情况下,它将会以==下标==, 并且从0开始作为值, 当然你也可以定义从哪个数值开始,甚至定义指定的值

enum Status {
  success = 1,
  error = 2
}
let pay:Status = Status.success
console.log(pay) // 1

你还可以通过枚举的值,很容易的得到它的名称

console.log(Status[2]) // error
let getName:string = Status[1]
console.log(getName) // success

any类型

在你不知道这个变量最终会是什么数据的时候,any类型非常有用,它可以接受任意类型的数据

例如,此时我的变量需要接受一个dom节点,如果不使用any,就会报错

var oBox:any = document.getElementById('box');
oBox.style.color='red';

null 和 undefined

undefined和null两者各自有自己的类型分别叫做undefined和null

默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量

当你指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自, 意思通过 --strictNullChecks标记 进行编译的时候, tsc [filename] --strictNullChecks

var num:undefined;
console.log(num)  // undefined

var num:null;
console.log(num) // null

Void

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。一般用于定义没有返回值的函数

function warnUser(): void {
    console.log("This is my warning message");
}

nerver

never类型表示的是那些永不存在的值的类型。

var a:never;

function fail() {
    return error("Something failed");
}

像定义一个没有使用过的变量或者抛出一个异常

Object

object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。

let obj:object = {name:'yaojin'}

类型断言

类型断言可以告诉ts, 我很清楚的知道这个类型是什么, 你不用去检查了,它可以通过2种方式去定义

尖括号语法

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

as语法

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

==当你在TypeScript里使用JSX时，只有 as语法断言是被允许的, 例如React==

简答的例子

// 类型断言
let someValue:any = 'My name is YaoJin'

function getValueLength(something: any):void {
// 当使用any类型时候, 不确定该值是否有toString方法, 告诉ts, 我很确定它的类型是什么
  if ((<string>something)) {
    return something.toString().length
  }
}
console.log(getValueLength(someValue))

GitHub

基础类型代码

avatar
文章
阅读
粉丝