typeScript 之 基础

工具: PlayGround

变量声明

typeScript中变量声明注意:

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

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

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

typescript 复制代码
let name: string = "name";

// 没有声明类型,在赋值以后,编译器会对类型进行推导
// 如果不能推导出类型,则被默认为any类型
let value = 10;

// 没有赋值表示为undefined
let data;

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

typescript 复制代码
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 布尔类型, 使用truefalse进行判定
  • void 表示不返回任意类型的函数返回类型
  • undefined 表示一个没有设置数据的变量
  • null 表示一个空对象的引用
typescript 复制代码
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 {}

其他的常用类型相关:

  • const常量相关,
typescript 复制代码
const value = 10;
value = 11;						// Error:  Assignment to constant variable
  • 数组相关, 类型后面有个[]
typescript 复制代码
// 有类型的数组
let arr: number[] = [1, 2];
// 任意类型数据
let dataList: any[] = [1, false, "hello"];
// 泛型数组
let dataList: Array<number> = [1,2,3];
  • any 表示类型不明确,可以通过赋值改变为不同的类型:
typescript 复制代码
// any类型,表示类型不明确; 可以赋值为不同的类型
let data: any = null;
data = "hello";
data = false;
  • enum枚举相关
typescript 复制代码
enum kColor {
  RED,
  GREEN,
  BLUE,
}
let color: kColor = kColor.RED;
  • never类型, 相当于其他类型包含nullundefined的子类型,代表不会出现的值
typescript 复制代码
let x: never;

// 运行错误,数字类型不能转为 never 类型
// Type 'number' is not assignable to type 'never'
x = 123;

// 运行正确,never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

注意,该语言可以通过|支持不同的数据类型,比如:

typescript 复制代码
let value: number | string = null;

类型判定

可通过console.log进行测试

typescript 复制代码
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周年" 

类型判定 可以使用typeof进行判定,比如:

typescript 复制代码
console.log(typeof(null));								// "object" 
console.log(typeof(undefined));						// "undefined" 
console.log(typeof(function));						// "function" 
console.log(typeof(any));									// "undefined" 
console.log(typeof(false));								// "boolean" 
console.log(typeof(1.0));									// "number" 
console.log(typeof(0XFFFF));							// "number" 
console.log(typeof("script"));						// "string" 

注意下nullundefined

  • null 表示一个空对象的引用
  • undefined 表示一个没有设置数据的变量

关键字

最后说下关键字相关,算是对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 声明变量的关键字
typescript 复制代码
/*
var是ES5及之前的JavaScript的关键字,特点:
* 函数作用域,声明的变量在整个函数体内, 而不仅是在块作用域内
* 变量会提升,声明的变量会提升到函数的顶部, 即可在声明之前使用
* 允许重复声明
*/
function example() {
  var x = 10;
  if (true) {
    var x = 20; // 在同一函数作用域内重复声明变量x
    console.log(x); // 输出:20
  }
  console.log(x); // 输出:20
}
example();

/*
let是ES6及之后的JavaScript和TypeScript引入的关键子,特点:
* 块作用域, 比如if语句,循环语句,并不是整个函数体内
* 不存在变量提升,必须声明之后才能使用
* 不允许崇明声明,否则会报错
*/
function example2() {
  let y = 10;
  if (true) {
    let y = 20; // 在块级作用域内声明变量y
    console.log(y); // 输出:20
  }
  console.log(y); // 输出:10
}
example2();
  • as 用于将一个实体断言为特定的类型
typescript 复制代码
let someValue: any = "hello";
let strLength: number = (someValue as string).length;
console.log(strLength);			// 5
  • try/catch 捕获异常
typescript 复制代码
try {
  // 可能引发异常的代码
  throw new Error("Something went wrong!");
} catch (error) {
  // 异常处理逻辑
  console.log(error.message);
} finally {
  // 总是执行的代码块
}
// 输出:Something went wrong!
  • 条件语句相关
typescript 复制代码
// 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 用于检查实例对象是否是特定类的实例
typescript 复制代码
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
typescript 复制代码
// 模块导出
export const myVariable = 123;
export function myFunction() {
  // 函数实现
}
export class MyClass {
  // 类实现
}

// 模块导入
import { myVariable, myFunction, MyClass } from './myModule';
  • super 用于子类调用基类的构造函数和方法等
typescript 复制代码
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用于对对象属性变量的获取或设置
typescript 复制代码
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 定义并实现接口
typescript 复制代码
// 定义接口
interface MyInterface {
  myMethod(): void;
}

// 实现接口
class MyClass implements MyInterface {
  myMethod() {
    console.log("Implementing MyInterface");
  }
}

const myObj = new MyClass();
myObj.myMethod(); // 输出 "Implementing MyInterface"
  • yield 生成器函数暂停
typescript 复制代码
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

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

相关推荐
MiyueFE19 小时前
🚀🚀五个前端开发者都应该了解的TS技巧
前端·typescript
ttod_qzstudio21 小时前
基于typescript严格模式以实现undo和redo功能为目标的命令模式代码参考
typescript·命令模式
张志鹏PHP全栈21 小时前
TypeScript 第十天,TypeScript面向对象之Class(二)
前端·typescript
慧一居士1 天前
ESLint 完整功能介绍和完整使用示例演示
前端·javascript·typescript
enzeberg2 天前
TypeScript 工具类型(Utility Types)
typescript
難釋懷2 天前
TypeScript类
前端·typescript
杰哥焯逊2 天前
基于TS封装的高德地图JS APi2.0实用工具(包含插件类型,基础类型)...持续更新
前端·javascript·typescript
工业甲酰苯胺3 天前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
土豆骑士4 天前
简单理解Typescript 装饰器
前端·typescript
ttod_qzstudio4 天前
彻底移除 HTML 元素:element.remove() 的本质与最佳实践
前端·javascript·typescript·html