typescript 基本数据类型

奔跑的金龟
935 阅读3分钟

安装

  • cnpm i typescript -g

查看版本

  • tsc --version

  • cnpm init -y 创建package.json文件

  • tsc --init 创建tsconfig.json文件

vscode编译ts文件

  • 终端（Terminal） -> 运行任务（run Task...） -> tsc:watch - tsconfig.json

命令行运行

  • 在package.json中更改 "scripts": { "build": "tsc", "build:watch": "tsc --watch" },
  • 运行 npm run build

数据类型

  • 如果代码里有export import之类的代码，那么这个文件变成一个模块
//如果不加export {}，变量是全局的，name就会报错（name重复声明）
export { }
let age: number = 30
let name: string = 'gao'

布尔类型（boolean）

let married: boolean=false;

数字类型（number）

let age: number=10

字符串类型（string）

let fistname: string='zfpx'

数组类型（array）

let arr2: number[]=[4,5,6];
let arr3: Array<number>=[7,8,9];
let arr4: string[] = ['1','2','3']

元组类型（tuple）

  • 类似一个数组 它是一个长度和类型都固定都数组
  • 在TypeScript的基础类型中，元组（Tuple）表示一个已知数量和类型的数组
let kuxuan:[string,number] = ['kuxuan',7];
kuxuan[0].length;
kuxuan[1].toFixed(2);

枚举类型（enum）

  • 事先考虑某一个变量的所有的可能的值，尽量用自然语言中的单词表示它的每一个值
  • 比如性别、月份、星期、颜色、单位、学历

普通枚举

enum Gender{
    GIRL,
    BOY
}
console.log(`李雷是${Gender.BOY}`)
console.log(`韩梅梅是${Gender.GIRL}`)

<!-- 解析出来是 -->
let Gebder = {
    0:"GIRL",
    1:"BOY",
    "GIRL":0
    "BOY":1
}

enum Week{
    MONDAY=1,
    TUESDAY=2
}
console.log(`今天是星期${Week.MONDAY}`)

任意类型 anyscript

  • 弟三库没有类型定义 类型转换的时候 数据结构太复杂太灵活 any
  • ts为dom 提供了一整套的类型声明
let root: HTMLElement | null = document.getElementById('root')
root!.style.color = 'red';
<!-- !断言不为空 -->

null undefined

  • null 空 undefined 未定义
  • 它们都是其他类型的子类型 可以把它们赋给其他类型的变量
  • 如果把它们赋值给其他类型，需要把tsconfig.json文件里的strictNullChecks改为false，否则代码将会报错（不能将类型“undefined”分配给类型“string”）
let myname1: string = null;
let myname2: string = undefined;

let x:number;
x=1;
x=undefined;
x=null;

void类型 空的 没有

function greeting(name: string):void{
    console.log(`hello ${name}`)
    return null
}
greeting('g')

never 永远不

  • never 是其他类型的子类型，代表不会出现的值
  • 返回“从不”的函数不能具有可访问的终结点
  • 在函数内部永远会抛出错误，导致函数无法正常结束
  • console.log('end point')永远执行不到
function createError(message: string):never{
    console.log(1)
    throw new Error('error')
    console.log('end point')
}

function sun(): never{
    while(true){
        console.log('hello')
    }
    console.log('end point')
}

包装对象（Wrapper Object） java装箱和拆箱 c#

  • 自动在基本类型和对象类型之间切换
  • JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。
  • 所有的原始数据类型都没有属性（property）
  • 原始数据类型
    • 布尔值
    • 数值
    • 字符串
    • null
    • undefined
    • Symbol
  • 在内部迅速的完成一个装箱的操作，把基本类型迅速包装成对象类型，然后用对象来调用方法
let name = 'zhufeng';
console.log(name.toUpperCase());

console.log((new String('zhufeng')).toUpperCase());

联合类型

  • 联合类型（Union Types）表示取值可以为多种类型中的一种
  • 未赋值时联合类型上只能访问两个类型共有的属性和方法
let name: string | number;
console.log(name.toString());
name = 3;
console.log(name.toFixed(2));
name = 'zhufeng';
console.log(name.length);

类型断言

  • 类型断言可以将一个联合类型的变量，指定为一个更加具体的类型
  • 不能将联合类型断言为不存在的类型
let name: string | number;
console.log((name as string).length);
console.log((name as number).toFixed(2));
console.log((name as boolean));

字面量类型

  • 可以把字符串、数字、布尔值等字面量组合在一起
type ZType = 1 | 'One'|true;
let t1:ZType = 1;
let t2:ZType = 'One';
let t3:ZType = true;

字符串字面量 vs 联合类型

  • 字符串字面量类型用来约束取值只能是某几个字符串中的一个, 联合类型（Union Types）表示取值可以为多种类型中的一种
  • 字符串字面量 限定了使用该字面量的地方仅接受特定的值,联合类型 对于值并没有限定，仅仅限定值的类型需要保持一致
avatar
文章
阅读
粉丝