typeScript 之 基础

工具: PlayGround

源码： GitHub TypeScript

变量声明

typeScript中变量声明注意：

• 开头不能以数字开头
• 变量名称可以包含数字和字母
• 除了下划线_和美元$符号外，不能包含其他任意特殊字符

声明的结构： let 变量名： 类型 = 值

如果没有声明类型，则变量为any类型， 如果没有赋值，则数值为undefined

let name: string = "name";// 没有声明类型，在赋值以后，编译器会对类型进行推导
// 如果不能推导出类型，则被默认为any类型
let value = 10;// 没有赋值表示为undefined
let data;

针对于没有声明的类型，TypeScritp会静态编译，注意警告：

let num = 2;
console.log("num type:", typeof(num));		// "num type:",  "number" 
console.log("num 变量的值为 "+num);				 // "num 变量的值为 2"// Type 'string' is not assignable to type 'number'
// 没有报错，但会有警告
num = "12"; console.log("num type:", typeof(num));    // "num type:",  "string" 
console.log(num);                         // "12" 

基础类型

在TypeScript中，内置的数据类型也被称为原始数据类型，主要有：

• number 双精度64位浮点数，注意 TypeScript和JavaScript没有整数
• string 存储UTF-16的字符串序列， 可以使用单引号(‘’)或双引号(“”)来包含字符串，使用反引号(`)来格式化文本或内嵌表达式等
• boolean 布尔类型， 使用true和false进行判定
• void 表示不返回任意类型的函数返回类型
• undefined 表示一个没有设置数据的变量
• null 表示一个空对象的引用

let data: number = null;// number
let value: number = 0.1;
let decLiteral: number = 6;    				// 十进制
let binaryLiteral: number = 0b1010; 	// 二进制
let octalLiteral: number = 0o744;    	// 八进制
let hexLiteral: number = 0xf00d;    	// 十六进制// string 
let name: string = "TypeScript";
let years: number = 5;
let words: string = `您好，今年是${name}发布${years + 1}周年`;// boolean
let flag: boolean = true;// void 
function Debug(index: number): void {}

在编写程序的时候，可以通过console.log输出日志，使用工具推荐: PlayGround

let dataList = [1, 2, 3];
console.log(dataList);										// [1, 2, 3] let value = 10;
console.log("value: ", value);						// "value: ",  10 let name: string = "TypeScript";
let years: number = 5;
let words: string = `您好，今年是${name}发布${years + 1}周年`;
console.log("Content:" + words);					// "Content:您好，今年是TypeScript发布6周年" 

console.log的不仅支持基础数据，也支持数组，Map相关； 不需要考虑是否存在Lua中的dump相关

// 数组
const numList = [1, 2, 3];
console.log(numList); 
// 输出： [1, 2, 3] // Map列表
let myMap = new Map([["key1", "value1"],["key2", "value2"]
]); 
console.log(myMap);
// 输出： Map (2) {"key1" => "value1", "key2" => "value2"} // String对象
console.log(String);
// 输出： function String() { [native code] } 

其他类型

• const常量相关

const value = 10;
value = 11;						// Error:  Assignment to constant variable

• any 表示类型不明确，可以通过赋值改变为不同的类型：

// any类型，表示类型不明确； 可以赋值为不同的类型
let data: any = null;
data = "hello";
data = false;

• 数组相关， 类型后面有个[]

// 有类型的数组
let numList: number[] = [1, 2];
let strList: string[] = ["heloo", "typeScript"];
// 任意类型数据
let dataList: any[] = [1, false, "hello", 4];
// 泛型数组
let dataList: Array<number> = [1,2,3];

• enum枚举相关

enum kColor {RED,GREEN,BLUE,
}
let color: kColor = kColor.RED;

• never类型， 相当于其他类型包含null和undefined的子类型，代表不会出现的值

let x: never;// 运行错误，数字类型不能转为 never 类型
// Type 'number' is not assignable to type 'never'
x = 123;// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

• 注意，可以通过|支持不同的数据类型，比如：

let value: number | string = null;
let value: string | string[];

类型判定typeof

使用typeof可以对数据进行类型判定显示，比如：

console.log(typeof(false));								// "boolean" 
console.log(typeof(1.0));									// "number" 
console.log(typeof(0XFFFF));							// "number" 
console.log(typeof("script"));						// "string" 

其他一些有意思的特性：

// "object"
console.log(typeof(null));
console.log(typeof {});
console.log(typeof []); 									// "undefined"
console.log(typeof(undefined));				// "undefined"				
console.log(typeof(any));							// "undefined"
let data;
console.log(typeof(data));						// "undefined"// 函数相关
function getValue(): number {return 0;
}
console.log(typeof(function));					// "function" 
console.log(typeof(getValue));          // "function" 
console.log(typeof(getValue()));        // "number"// NaN相关
console.log(typeof(NaN));									// "number" 
console.log(typeof(Number.NaN));					// "number" 

我们需要注意下：

• NaN的类型虽然是number数字类型， 但它真正代表的 非数字数特殊值，用于表示非法的数值  如果两个NaN比较，他们并不相等, 数学运算中较为常见：

console.log(0/0);						// NaN 
console.log(Math.sqrt(-1)); // NaN
console.log(Math.log(-1)); 	// NaN

• null和undefined 前者表示一个空的引用， 后者表示一个没有设置数据的变量，因此他们的类型并不相同

console.log(typeof(null));				// "object"
console.log(typeof(undefined));		// "undefined"

• object 它表示一个非原始类型(数字，字符串，布尔)的值，主要作用于数组，对象和函数等，它是一种泛指的类型，可以包括任意类型值。

const numObj = new Number(10);
const strObj = new String("");
console.log(typeof(numObj));        // "object" 
console.log(typeof(strObj));        // "object" 

在TypeScript的语言中，如果我们单纯的使用value === null或者!value 这种方式来判定数据的合法性，可能会存在不严谨性。

考虑到数字0、空字符串、false、null、undefined、NaN的情况存在， 我们可以使用Boolean()函数将值转换为布尔值, 然后再进行判定。

const value_1 = Boolean(0);
const value_2 = Boolean("");
const value_3 = Boolean(null);
const value_4 = Boolean(undefined);
const value_5 = Boolean(NaN);
// 输出均为false 
console.log(value_1, value_2, value_3, value_4, value_5);

boxing和unboxing

前面说到了一个Boolean类型的转换，既然支持Boolean类型对象的转换，当然也提供了Number和String类型的转换。

他们支持数字或字符串调用相关的方法接口，以实现一些复杂的逻辑处理。

const numObj = new Number(10);
const strObj = new String("");

但在熟悉JavaScript/typeScript后，会发现类似这样的一个情况：

const str = "hello TypeScript";
console.log(str.toUpperCase());			// "HELLO TYPESCRIPT" const strObj = new String(str);
console.log(strObj.toUpperCase());	// "HELLO TYPESCRIPT" 

string基础数据和String对象可以调用相同的函数来实现逻辑， 这个原因在于：

JavaScript/TypeScript允许将数字，字符串等值类型转换为对应的封装对象， 这个转换的过程被称为boxing装箱， 而对应的将一个引用对象类型转换为值类型则被称为unboxing拆箱。

在这里简要的说明下，有助于对后面的文章理解。

关键字

最后说下关键字相关，算是对typeScript有个大概的了解：

关键字	描述
break/continue	跳出循环， break用于跳出当前循环， continue用于跳出当前循环的剩余代码
as	类型断言，用于将一个实体断言为特定的类型
try/catch/finally	用于捕获和处理异常
switch/case/default	条件语句相关，可使用break进行截止
if/else if / else	条件语句相关
var/let	声明变量的关键字
throw
number/ string/enum	基础数据类型： 浮点数，字符串，枚举
true/false	boolean类型值
void/null/any/return/function	–
static/const	静态和常量，静态类成员，可以直接访问； 常量必须在声明后初始化
for/do while	循环语句
get/set	用于对对象属性变量的获取或设置
module/namespace	module用于定义一个模块，用于组织和封装相关代码， 自TypeScript 2.7版本起，逐渐被namespace代替
type/typeof	type用来做类型别名， typeof用来获取数据类型
instanceof	JavaScript的运算符，用于检查对象是否是指定类的实例
public/private	可用于声明类方法类型是公有还是私有
export	export用于将模块中的变量，函数，类等导出，使其可以被其他模块使用
import	用于导入变量，函数，类相关，与export配对使用
super	用于派生类调用基类的构造函数，方法和属性相关
this	在类中使用，用于引用当前对象
extends	用于类继承相关
implements/interface	interface用于定义一个接口，通过implements来实现接口
yield	用于定义**生成器(特殊函数，可以在执行过程中暂停和恢复)**函数的暂停点，可以将值返回给调用者

一些简单的实例：

• var/let 声明变量的关键字

/*
var是ES5及之前的JavaScript的关键字，特点：
* 函数作用域，声明的变量在整个函数体内， 而不仅是在块作用域内
* 变量会提升，声明的变量会提升到函数的顶部， 即可在声明之前使用
* 允许重复声明
*/
function example() {var x = 10;if (true) {var x = 20; // 在同一函数作用域内重复声明变量xconsole.log(x); // 输出：20}console.log(x); // 输出：20
}
example();/*
let是ES6及之后的JavaScript和TypeScript引入的关键子，特点：
* 块作用域， 比如if语句，循环语句，并不是整个函数体内
* 不存在变量提升，必须声明之后才能使用
* 不允许崇明声明，否则会报错
*/
function example2() {let y = 10;if (true) {let y = 20; // 在块级作用域内声明变量yconsole.log(y); // 输出：20}console.log(y); // 输出：10
}
example2();

• as 用于将一个实体断言为特定的类型

let someValue: any = "hello";
let strLength: number = (someValue as string).length;
console.log(strLength);			// 5

• try/catch 捕获异常

try {// 可能引发异常的代码throw new Error("Something went wrong!");
} catch (error) {// 异常处理逻辑console.log(error.message);
} finally {// 总是执行的代码块
}
// 输出：Something went wrong!

• 条件语句相关

// switch/case相关
let fruit = "apple";
switch (fruit) {case "apple":console.log("It's an apple.");break;case "banana":console.log("It's a banana.");break;default:console.log("It's something else.");
}// if/ else if / else相关
let num = 10;
if (num > 0) {console.log("Positive number");
} else if (num < 0) {console.log("Negative number");
} else {console.log("Zero");
}
// 输出：Positive number

• instanceof 用于检查实例对象是否是特定类的实例

class Animal {// class implementation
}class Dog extends Animal {//
}const animal = new Animal;
const myDog = new Dog();
console.log(animal instanceof Animal);		// true
console.log(myDog instanceof Animal); 		// true

• export/import

// 模块导出
export const myVariable = 123;
export function myFunction() {// 函数实现
}
export class MyClass {// 类实现
}// 模块导入
import { myVariable, myFunction, MyClass } from './myModule';

• super 用于子类调用基类的构造函数和方法等

class Parent {private _value: number = 0;constructor(value: number) {// this用作类中对象的引用this._value = value;console.log("Parent constructor:", this._value);}parentMethod() {console.log("Parent parentMethod");}
}// extends 继承
class Child extends Parent {constructor() {super(10); // 调用父类构造函数}childMethod() {super.parentMethod(); // 调用父类方法}
}const child = new Child();
child.childMethod();/*
Parent constructor: 10
Parent parentMethod
*/

• get/set用于对对象属性变量的获取或设置

class MyClass {private _myProperty: string;get myProperty(): string {return this._myProperty;}set myProperty(value: string) {this._myProperty = value;}
}const myObj = new MyClass();
// 设置对象属性值
myObj.myProperty = "Hello";
// 获取对象属性值
console.log(myObj.myProperty); // 输出 "Hello"

• interface/implements 定义并实现接口

// 定义接口
interface MyInterface {myMethod(): void;
}// 实现接口
class MyClass implements MyInterface {myMethod() {console.log("Implementing MyInterface");}
}const myObj = new MyClass();
myObj.myMethod(); // 输出 "Implementing MyInterface"

• yield 生成器函数暂停

function* myGenerator() {yield 1;yield 2;yield 3;
}const generator = myGenerator();
console.log(generator.next().value); // 输出 1
console.log(generator.next().value); // 输出 2
console.log(generator.next().value); // 输出 3

编写可能有误，请您不吝指导。