国美在线网站建设,wordpress 游客权限,广州黄埔网站建设,西安门户网工具: PlayGround
源码#xff1a; GitHub TypeScript 变量声明
typeScript中变量声明注意#xff1a;
开头不能以数字开头变量名称可以包含数字和字母除了下划线_和美元$符号外#xff0c;不能包含其他任意特殊字符
声明的结构#xff1a; let 变量名#xff1a; 类型…工具: 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 variableany 表示类型不明确可以通过赋值改变为不同的类型
// 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: Arraynumber [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)); // NaNnull和undefined 前者表示一个空的引用 后者表示一个没有设置数据的变量因此他们的类型并不相同
console.log(typeof(null)); // object
console.log(typeof(undefined)); // undefinedobject 它表示一个非原始类型(数字字符串布尔)的值主要作用于数组对象和函数等它是一种泛指的类型可以包括任意类型值。
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声明变量的关键字thrownumber/ string/enum基础数据类型 浮点数字符串枚举true/falseboolean类型值void/null/any/return/function–static/const静态和常量静态类成员可以直接访问 常量必须在声明后初始化for/do while循环语句get/set用于对对象属性变量的获取或设置module/namespacemodule用于定义一个模块用于组织和封装相关代码 自TypeScript 2.7版本起逐渐被namespace代替type/typeoftype用来做类型别名 typeof用来获取数据类型instanceofJavaScript的运算符用于检查对象是否是指定类的实例public/private可用于声明类方法类型是公有还是私有exportexport用于将模块中的变量函数类等导出使其可以被其他模块使用import用于导入变量函数类相关与export配对使用super用于派生类调用基类的构造函数方法和属性相关this在类中使用用于引用当前对象extends用于类继承相关implements/interfaceinterface用于定义一个接口通过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); // 5try/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(Its an apple.);break;case banana:console.log(Its a banana.);break;default:console.log(Its 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 numberinstanceof 用于检查实例对象是否是特定类的实例
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); // trueexport/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); // 输出 Hellointerface/implements 定义并实现接口
// 定义接口
interface MyInterface {myMethod(): void;
}// 实现接口
class MyClass implements MyInterface {myMethod() {console.log(Implementing MyInterface);}
}const myObj new MyClass();
myObj.myMethod(); // 输出 Implementing MyInterfaceyield 生成器函数暂停
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编写可能有误请您不吝指导。
