TS编译·数据类型合集·代码示例

目录

TS是什么

编译

普通编译

编译到指定目录

监听ts文件变化自动编译

通过tsconfig配置文件进行编译

配合package.json使用

运行

基本数据类型

number

string

boolean

null

undefined

void

object

any

unknown

any 和 unknown的区别

TS特殊类型

never

数组定义

元组

对象定义

可选属性

枚举类型

函数类型

函数参数类型的定义

函数的返回值类型的定义

有返回值的函数

没有返回值

类型声明

类型断言

类型守卫

联合类型

字面类型

---

TS是什么

TypeScript（TS）是一种由微软开发和维护的开源编程语言。它是 JavaScript 的一个超集，意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。

TypeScript 扩展了 JavaScript，并在其基础上添加了静态类型、类、接口、模块以及其他高级特性。通过引入静态类型系统，TypeScript 提供了更严格的类型检查，使得代码更具可读性、可维护性和可靠性。

TypeScript 编译器会将 TypeScript 代码转化为普通的 JavaScript 代码，这样可以在任何现代浏览器或 JavaScript 运行时环境中运行。

TypeScript 在开发大型应用程序时特别有用，因为它提供了丰富的工具和功能，可以使开发过程更高效，并且可以减少潜在的错误和调试时间。它也受到了广泛的支持和采用，在前端开发和 Node.js 后端开发中都有广泛的应用。

编译

普通编译

# tsc ts所在的路径
tsc 1.ts
# 在编译的时候加一个-w参数可以自动监听ts文件的变化，从而自动编译
tsc -w 1.ts

编译到指定目录

tsc --outDir ts文件所在目录 编译到的指定目录/*.js

监听ts文件变化自动编译

tsc --watch --outdir ts文件所在目录 编译到的指定目录/*.js

通过tsconfig配置文件进行编译

{
    "compilerOptions": {
      "outDir": "dist/",
      "target": "ES5"
    },
    "include": [ "src/**/*"],
    "exclude": [ "node_modules" ]
  }

outDir: 输出的文件目录

target: 编译js的版本

include: 编译的入口

exclude: 排除哪些文件或文件夹

*：匹配0或多个字符（不包括目录分隔符）

?：匹配一个任意字符（不包括目录分隔符）

**/：递归匹配任意子目录

配合package.json使用

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "tsc --watch"
  },
  "author": "",
  "license": "ISC"
}

运行

npm run dev

基本数据类型

number

let num:number;
num = 12;

string

let str:string;
str = 'hello';

boolean

let flag:boolean;
flag = true;

null

限制变量a只能是null类型。null类型的值有两种。一个是null，一个是undefined

let a:null;
// a = null;
a = undefined;

undefined

限制变量a只能是undefined类型。null类型的值有两种。一个是null，一个是undefined

let a:undefined;
// a = null;
a = undefined;

void

void代表空类型,一般用于函数的返回值类型

let a:void;
// a = null;
a = undefined;

object

let obj:object;
obj = { a: 12, b: 5 };

any

let a:any;
// a = 12;
a = 'hello';

unknown

unknown类型指的是声明的变量是未知类型，但不代表没有类型

let a:unknown;
let b:unknown
b = a;
let num: unknown;
let obj: any;
// num.indexof()
obj.indexof()

any 和 unknown的区别

1. any是任意类型，可以将任何类型的值赋值给any类型，unknown是未知类型，只能将any和unknown类型的值赋值给 unknow 类型
2. unknown类型可以看作是更安全的any类型
3. any类型是有其属性和方法的；unknown类型没有任何属性和方法

TS特殊类型

never

从不，永远也不会到达。用于定义函数的返回值  never类型常用在封装一些抛出错误的函数

function errValid():never {
  while(true) {}
}

// 封装抛出一些错误的函数
function errVolid():never {
  throw Error('有错了')
}

数组定义

简写：

let arr:Array;
arr = [1, 2, 3]

声明一个数组，并且限制数组里面的元素只能是number类型。数组在声明的时候必须要告诉它里面存什么类型的元素

let arr:number[];
arr = [1, 2, 3]

元组

元组就是一个指定长度的数组，里面可以放不同类型的元素。可以理解为元组就是一个定长的数组

声明一个只有两个元素的数组，并且限制数组的第一个元素必须是number类型，第二个元素是string类型

let arr:[number, string];
arr = [2, 'hello ts']

对象定义

如果我们在定义一个对象的时候，把变量的类型定义为object，这是不准确的，范围过大

let obj:object;
obj = {user: 'zs', age: 20, sex: 0} // 没问题，编译能过
obj = [1, 2, 3, 'a', 'b', 'c'] // 没问题，编译能过，数组也属于object类型

准确定义：

let obj = { user:string, age:number };
obj = {
    user: 'zs',
    age: 20
}

定义一个对象，并且限定里面只能有user和age两个元素，并且user的值必须是string类型，age的值必须是number类型

可选属性

let obj = { user:string, age?:number };
// 加上问号后，代表age这个属性是可选的
obj = {
    user: 'zs'
}

枚举类型

枚举就是列举的意思，即把一个值出现的所有可能情况全部列举出来就是枚举。例如：人的性别只能有男和女两种，日期就只有七天等都比较适用与枚举类型。

// 1. 定义枚举类型
enum Gender { male, famale }
console.log(Gender.male) // 获取枚举类型中的值，打印结果为0
console.log(Gender[0]) // 获取枚举类型中的属性，即键名key

// 2. 使用
let sex:Gender = Gender.male

枚举类型中的值默认是数字，从0开始，每一项的值依次递增

在定义枚举类型的时候给一个初始值

// 1. 定义一个具有初始值的枚举类型
enum Gender {
    male = 'male',
    famale = 'famale'
}
console.log(Gender.male) // 获取枚举类型中的值，打印结果为male

函数类型

函数参数类型的定义

function test(num:number, str:string) {
    // 定义参数num为number类型；str为string类型
	console.log(num, str);
}
test(1, 'hello');

函数的返回值类型的定义

有返回值的函数

function sum(num:number, num2:number):number {
	return num + num2;
}
sum(1, 2)

没有返回值

function test():void {
  console.log(1)
}
test()

类型声明

在ts中我们可以使用type关键字来声明一个自定义的类型

// 1. 声明一个User类型
type User = {
    uname: string;
    age: number;
}

// 2. 使用
let user:User;
user = {
    uname: 'zs',
    age: 20
}

类型断言

在 TypeScript 中，类型断言（Type Assertion）是一种向编译器传达特定类型信息的方式。当开发者比编译器更了解变量的类型时，可以使用类型断言来告诉编译器如何处理该变量的类型。

有两种形式的类型断言可以在 TypeScript 中使用：

1. 尖括号语法：

let someValue: any = "this is a string";
let strLength: number = (someValue).length;

  在上述例子中，我们将 `someValue` 声明为 `any` 类型，然后使用尖括号语法将其断言为 `string` 类型。这样我们就可以访问 `someValue` 的 `length` 属性了。

2. as 关键字：

   let someValue: any = "this is a string";
   let strLength: number = (someValue as string).length;

   在这个例子中，我们使用 `as` 关键字来进行类型断言，将 `someValue` 断言为 `string` 类型，并访问其 `length` 属性。

类型断言在需要确定变量类型的情况下非常有用，但需要注意的是，类型断言不会执行任何运行时的类型检查或转换。它们仅在编译时起作用，在编译后的 JavaScript 代码中并没有副作用。因此，类型断言需要谨慎使用，确保断言的类型是正确的，以避免潜在的错误。

类型守卫

类型守卫（Type Guard）是在 TypeScript 中用于判断变量的类型的一种技术。它允许开发者根据特定条件来细化变量的类型，以便在代码块中使用该类型的特定属性或方法，而无需使用类型断言或类型转换。

TypeScript 提供了几种类型守卫的方式：

1. 类型判断函数：

   function isString(value: any): value is string {
     return typeof value === 'string';
   }

   let someValue: any = "this is a string";
   if (isString(someValue)) {
     console.log(someValue.length);
   }

   开发者可以通过编写自定义的类型判断函数来确定变量的类型。这些函数可以返回一个布尔值，指示变量是否具有特定的类型，从而在代码块中使用该类型的属性或方法。

2. typeof 类型守卫：
   使用 `typeof` 运算符来判断变量的类型。

   function logLength(value: string | number) {
     if (typeof value === 'string') {
       console.log(value.length);
     } else {
       console.log('Not a string');
     }
   }

3. instanceof 类型守卫：
   使用 `instanceof` 运算符来判断变量是否属于某个类的实例。

   class Animal {
     name: string;
     constructor(name: string) {
       this.name = name;
     }
   }
   class Dog extends Animal {
     breed: string;
     constructor(name: string, breed: string) {
       super(name);
       this.breed = breed;
     }
   }

   function getAnimalName(animal: Animal) {
     if (animal instanceof Dog) {
       console.log(animal.name);  
       console.log(animal.breed);
     } else {
       console.log(animal.name);
     }
   }

这些类型守卫方法可以帮助开发者在编写类型安全的代码时更好地处理变量的类型。它们提供了一种更具表达性和安全性的方式来操作不同的类型，并避免了对类型的手动断言或类型转换。

联合类型

 a的值有两种number或string，我们通过 | 来表示a可以有多个类型，这就是联合类型

let a:number | string;

字面类型

sex只有male、female、other这三个值可选

let sex:'male'|'female'|'other';
// sex = 'male';
sex = "female";