TypeScript学习笔记，持续更新中......

2023-09-28 19:06:34

TypeScript，冲！

一个特别好使的ts自动编译为js代码的编译环境如下：

https://www.typescriptlang.org/play

1.搭建开发环境

使用npm初始化项目

npm init生成package.json包管理文件

//package.json
{
  "name": "typescript-coding",
  "version": "1.0.0",
  "description": "typeScript-learning",
  "main": "./src/index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/Wanghe0428/typeScript-learning.git"
  },
  "keywords": [
    "typeScript",
    "source_code",
    "wang_He"
  ],
  "author": "wang_He",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Wanghe0428/typeScript-learning/issues"
  },
  "homepage": "https://github.com/Wanghe0428/typeScript-learning#readme"
}

全局安装部分依赖

需要全局安装typeScript包和tslint(对代码风格进行检测的工具，专注于ts，与eslint类似)，安装完这两个依赖包之后，就可以使用tsc命令了。

使用tsc初始化配置

tsc --init进行初始化ts项目，运行此代码之后会新增一个tsconfig.json文件，这个文件主要是用于对ts项目进行配置的，且在这里面可以书写注释代码。

配置webpack

这里采用webpack4。

cnpm i webpack webpack-cli webpack-dev-server -D

添加开发和打包命令

在package.json中的script几点下配置build打包：

“build”: “webpack --config ./build/webpack.config.js”，

在终端输入命令npm run buind后就会将打包的文件输出到指定文件目录下（/dist目录）。

2.typescript基本数据类型

布尔值

// 布尔类型
// 声明变量并初始化
let bool: boolean = false
// bool = 123  //这里是错误赋值，由于bool变量设置为布尔型，所以他不能赋值为其他类型number

数值

// 数值类型
let num: number = 123
// num = "w"  //错误写法
// 在ts中支持ES6中新增的二进制、八进制、十进制、十六进制写法
num = 0b00000001  //0b二进制写法 数值1
num = 0o1 //0o八进制  数值1
num = 0x1  //十六进制  数值1

字符串

// 字符串类型
let str: string = "ww"
// 也可以使用ES6新增的模块化字符串``进行拼接字符
str = `数值是${num}`
console.log(str);

数组

// 数组类型[1,2,3]
// 写法1，arr1为所有数值都为number类型的数组
let arr1: number[]
// 写法二,有点儿java中泛型编程的意思
let arr2: Array<number>
// 上面的arr1和arr2数组中的数值只能是一种类型，下面是一种联合写法
let arr3: (number | string)[]
// 也可以这样写：
let arr4: Array<number | string>

元组

// 元组类型，与数组类似，是数组的拓展，区别是数组只要指定了元素的数据类型，你写多少数据都可以即不固定长度length
// 而元组是固定长度固定位置上的类型的
let tuple: [string, number, boolean]
tuple = ["wh", 23, true] //元组数值类型必须与元组对应索引原先设定的类型相同
// tuple = ["wh", "ww", true,2]  //"ww"类型不同会报错,且长度不能超过，会越界

枚举值

// enum枚举类型，c++中常见枚举类型，枚举类型中的值都会对应一个序列号
// 枚举值一般都大写开头
// 定义一个角色用户枚举对象
// 像设置一个对象类似
enum Roles {
    // 也可以手动设置序列号,默认序列号是从0开始枚举依次递增
    SUPER_ADMIN = 1,
    ADMIN = 2,
    USER = 3
}
console.log(Roles.SUPER_ADMIN, Roles.ADMIN, Roles.USER); //分别是1,2,3
console.log(Roles[1]);  //SUPER_ADMIN
console.log(Roles); //{1: 'SUPER_ADMIN', 2: 'ADMIN', 3: 'USER', SUPER_ADMIN: 1, ADMIN: 2, USER: 3}

//以上创建Roles枚举对象的ts代码等同于一下js代码
(function (Roles) {
    // 也可以手动设置序列号,默认序列号是从0开始枚举依次递增
    Roles[Roles["SUPER_ADMIN"] = 1] = "SUPER_ADMIN";
    Roles[Roles["ADMIN"] = 2] = "ADMIN";
    Roles[Roles["USER"] = 3] = "USER";
})(Roles || (Roles = {}));

// any类型，任何类型,可以给一个变量赋任何类型的值,但是any我不能总是用any，开发习惯是能不用any的时候就不要用！！无语
let any: any = "w"
any = 133
const arr5: any[] = [2, "ww", false]

void

// void类型，经常用于函数没有返回值时，返回void类型
const say = function (mes: string): void {
    console.log(mes);
    // 此函数没有任何返回值就需要设置返回值为void类型
}
say("吃饭")
//  其实void类型数据可以赋值undefined和null，函数中没有返回值，就是返回undefined，undefined属于void类型
let v: void = undefined
let n: void = null

null和undefined

// null和undefined,在ts中他们既是值又是类型,undefined和null是其他类型的子类型，比如可以为number类型数据赋值null
let u: undefined = undefined
let n: null = null
// n=2 ,报错
// undefined和null是其他类型的子类型，比如可以为number类型数据赋值null
// let num1: number = null
// num1 = undefined
// console.log(num1);

never

// never类型，主要用于两种情况，
// 1、用于抛出异常时函数返回的类型
const errorFunction = function (mes: string): never {
    throw new Error(mes)
}
// errorFunction("出错了")
// 2、函数中由死循环的，返回值类型为never类型
const infiniteFunction = (): never => {
    while (true) { }
}
let nev: never = infiniteFunction()
// never类型也是其他类型的子类型，可以为其他类型赋值的变量，比如：
num = nev

object

// object类型，简单数据类型即数值类型的它们存的是值，是对象类型的值是存的是对象在内存中地址的引用
let obj = {
    name: "wh"
}
function getObject(obj: object): void {
    console.log(obj);
}
getObject(obj)

类型断言

主要是针对变量类型没有某些属性，而让此变量类型强制类型转化为某种类型

类型断言写法(变量)或者(变量 as string) ，表示将变量转化为string类型

// 类型断言
const getLength = (target: (string | number)) => {
    // 传过来的target参数有length属性,对类型进行判断会出错（因为number类型没有length属性，而代码中使用了length），
    // 所以我们要采用类型断言来解决此问题,类型断言写法(<string>target)或者(target as string)
    if ((<string>target).length) {
        return (<string>target).length
    } else {
        // 如果传入的是数值，数值类型是没有length属性的，我们就需要先把他转化为字符串
        return target.toString().length
    }
}

后续更新中…

码农公寓

TypeScript，冲！

一个特别好使的ts自动编译为js代码的编译环境如下：

1.搭建开发环境

2.typescript基本数据类型

相关文章