C/C++教程

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

本文主要是介绍TypeScript学习笔记,持续更新中......,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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项目进行配置的,且在这里面可以书写注释代码。

image-20220119114631624

  • 配置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,开发习惯是能不用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学习笔记,持续更新中......的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!