安装

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=[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)表示取值可以为多种类型中的一种

字符串字面量 限定了使用该字面量的地方仅接受特定的值,联合类型 对于值并没有限定，仅仅限定值的类型需要保持一致