ts的学习历程 -- 01

ts的学习历程 – 01

ts是什么?

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。


TypeScript 由微软开发的自由和开源的编程语言。


TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

语言特性

ts是一种给js添加特性的扩展性语言,扩展功能如下:

  • 基础类型
  • 接口
  • 函数
  • 泛型
  • 类型兼容性
  • 高级类型
  • 模块
  • 命名空间
  • 混入

基础类型

js是弱语言类型,而ts类似c++这种强语言,可以对变量进行处理,规定变量的类型,让程序变得可维护性强,有价值。

布尔值

我们可以在ts中进行如下声明:

let isDone: boolean = false

数字

和js一样,ts中的数字都是浮点数,类型为number.

let num: number = 6

字符串

let str: string = "26"

数组

有两种可以定义数组的方式

let list: number[] = [1, 2, 3]   // 表示由此类型元素组成的一个数组

let list: Array<number> = [1, 2, 3] // 使用数组泛型Array<元素类型>

元组 Tuple

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

let x: [string, number];

x = ['hello', 10];

枚举 enum

类型是对JavaScript标准数据类型的一个补充

enum Color {Red, Green, Blue}

let c: Color = Color.Green;

默认情况下,从0开始为元素编号。你也可以手动的指定成员的数值

enum Color {Red = 1, Green, Blue}

let c: Color = Color.Green;

或者,全部都采用手动赋值:

enum Color {Red = 1, Green = 2, Blue = 4}

let c: Color = Color.Green;

枚举类型提供的一个便利是你可以由枚举的值得到它的名字

enum Color {Red = 1, Green, Blue}

let colorName: string = Color[2]; // Green

任意值 any

有的时候我们或许还不知到该变量到底该赋什么类型的值,比如对象

let notSure: any = 4;

当你只知道一部分数据的类型时,any类型也是有用的。 比如,你有一个数组,它包含了不同的类型的数据:

let list: any[] = [1, true, "free"];

list[1] = 100;

空值 void

你可以理解为和any相反的类型,他表示没有任何类型

function warnUser(): void {
    alert("This is my warning message");
}

在声明变量的时候,你只能赋予它undefined和null

let unusable: void = undefined;
            ||或
let unusable: void = null;

Null 和 Undefined

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

let u: undefined = undefined;

let n: null = null;

Never

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

返回never的函数必须存在无法达到的终点

function infiniteLoop(): never {
    while (true) {

    }
}

类型断言

有的时候会或许更了解你的一些变量【两种写法】

尖括号

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;

表示非null的意思

有时候获取的节点有可能为null,但是我们可以明确的使用ts表达自己的意向,明确自己想要的值

const a = document.getElementById('id')!