typeScript 之 基础

FlyingBird~2023-08-12 12:27

工具: 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 布尔类型， 使用true和false进行判定
  • 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类型， 相当于其他类型包含null和undefined的子类型，代表不会出现的值
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"

注意下null 和undefined：

  • 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

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

相关推荐
j喬乔3 小时前
Node导入不了命名函数？记一次Bug的探索
typescript·node.js
yg_小小程序员15 小时前
vue3中使用vuedraggable实现拖拽
typescript·vue
高山我梦口香糖16 小时前
[react 3种方法] 获取ant组件ref用ts如何定义?
typescript·react
prall18 小时前
实战小技巧：下划线转驼峰篇
前端·typescript
一條狗2 天前
隨筆 20241224 ts寫入excel表
开发语言·前端·typescript
轻口味3 天前
配置TypeScript：tsconfig.json详解
ubuntu·typescript·json
小林rr4 天前
前端TypeScript学习day03-TS高级类型
前端·学习·typescript
web150850966414 天前
前端TypeScript学习day01-TS介绍与TS部分常用类型
前端·学习·typescript
前端熊猫5 天前
省略内容在句子中间
前端·javascript·typescript
禁止摆烂_才浅5 天前
React全家桶 -【高阶函数/高阶组件/钩子】-【forwardRef、mome、useImperativeHandle、useLayoutEffect】
react.js·typescript
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库