初识typeScript

153 阅读4分钟

基础类型

1.布尔值

最基本的数据类型就是true或false

example:

let isStudy:Boolean = false 编译后js代码 var isStudy = false;

2.数字

和JavaScript一样,TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量,TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。

example:

let decimal:Number = 1234           //十进制
let hexadecimal: Number = 0xf00d    //十六进制
let binary:Number = 0b110           //二进制
let octonary:Number = 0o123         //八进制

编译后:

var decimal = 1234;          //十进制
var hexadecimal = 0xf00d;    //十六进制
var binary = 6;              //二进制
var octonary = 83;           //八进制

3.字符串

和JavaScript一样,可以使用("")或者('')表示字符串类型,同样还可以使用模板字符语法

example:

let Myname:String = 'lili'
let age:Number = 23
let sentance:String = `lainey is ${age} years old`

编译后:

var Myname = 'lili';
var age = 23;
var sentance = "lainey is " + age + " years old";

4.数组

ts有两种表示数组的形式

  • 在元素类型后面加[]

    let arr:Number[] = [1,2,3]

  • 使用数组泛指Array<元素类型>

    let arr:Array<number> = [1,2,3]

5.元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为 string和number类型的元组。

let T:[string,number];
T = ['lainey', 25] ;  //不会报错
T = [25,'lainey'];    //编辑器会提示错误

编译:

当访问一个已知索引的元素,会得到正确的类型:

let T:[string,number];
T = ['lainey', 25] ;

console.log(T[1].substr(1))编译:

当访问一个越界的元素,会使用联合类型替代(3.1以上版本会报错)

6.枚举

enum类型是对JavaScript标准数据类型的一个补充,默认枚举得数值是从0开始,但是你也可以给它赋值

enum Color{red,blue,gray}            //默认
let c:Color = Color.blue
enum Color { red = 1, blue, gray }   //自己赋值

枚举类型提供的一个便利,是你可以由枚举的值得到它的名字。 例如,我们知道数值为2,但是不确定它映射到Color里的哪个名字,我们可以通过数值查找相应的名字:

enum Color{red,blue,gray}
let colorName:string = Color[2];
console.log(colorName);
编译后:
var Color;
(function (Color) {
    Color[Color["red"] = 0] = "red";
    Color[Color["blue"] = 1] = "blue";
    Color[Color["gray"] = 2] = "gray";
})(Color || (Color = {}));
var colorName = Color[2];
console.log(colorName);   // 运行输出 gray

7.Any

有时候我们不知道此变量得类型时可以给它指定我any类型

let notSure:any = 1;
notSure = 'a';
notSure = false

当你只知道一部分数据的类型时,可以使用any类型。

let list:any[] = [1,'a',false];
list[1] = 'b'
console.log(list)
编译后:
var list = [1, 'a', false];
list[1] = 'b';
console.log(list);     // 运行输出 [1,'b',false]

9.void

某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void

function warnUser(): void  {
  console.log('this is a warning message');
}

10.undefined和null

TypeScript里,undefined和null两者各自有自己的类型分别叫做undefined和null,默认情况下null和undefined是所有类型的子类型。 就是你可以把 null和undefined赋值给number类型的变量。但是,当你指定了--strictNullChecks标记,null和undefined只能赋值给void和它们各自。如果你想传入一个 string或null或undefined,你可以使用联合类型string | null | undefined

没有指定:--strictNullChecks 指定:--strictNullChecks(严格模式)

11.nerver

never类型表示的是永不存在的值的类型,例如,never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型;变量也可能是never类型,当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型,也可以赋值给任何类型;但没有类型是never的子类型或可以赋值给never类型(除了never本身之外)。即使any也不可以赋值给never。

// 返回never的函数必须存在无法达到的终点
function error(message:string):never {
  throw new Error(message);
}
// 推断的返回值类型为never
function fail():never {
  return error('something failed')
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop():never {
  while (true) {
    
  }
}

12.Object

object表示非原始类型,也就是除number,string,boolean,symbol,null或undefined之外的类型。使用object类型,就可以更好的表示像Object.create这样的API

13.类型断言

有时候你会遇到这样的情况,你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

类型断言有两种形式。 其一是“尖括号”语法:

let value:any = 'something is wrong'
let strLength:number = (<string>value).length

另一种是as语法:

let value:any = 'something is wrong'
let strLength:number = (value as string).length
console.log(strLength)

学习来源:www.tslang.cn/docs/handbo…