Typescript基本类型---上篇

简介: Typescript基本类型---上篇

类型声明


  • 类型声明是TS非常重要的一个特点
  • 通过类型声明可以指定TS中变量(参数、形参)的类型
  • 指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错
  • 简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值
  • 语法:



let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{
    ...
}


自动类型判断


  • TS拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型
  • 所以如果你的变量的声明和赋值时同时进行的,可以省略掉类型声明


类型

image.png


image.pngimage.pngimage.pngimage.pngimage.png

number


声明一个变量a,同时指定它的类型是number


let a : number;


a的类型设置为了number,在以后使用a的过程中a的值只能是数值


a = 33;
// a = 'hello'   此行代码会报错,因为变量a的类型是number,不能赋值字符串

string




let color: string = "blue";
color = 'red';
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.I'll be ${age + 1} years old next month.`;


boolean


let isDone: boolean = false;

字面量


可以直接使用字面量进行类型声明


let c : 10
c= 10
console.log(typeof c)  //number

也可以使用字面量去指定变量的类型,通过字面量可以确定变量的取值范围,可以使用|连接多个类型(联合类型),这里的|是“或”的意思


let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;

any


any表示任何类型,一个变量设置类型为any后相当于关闭了ts的类型检测

不建议使用


let a : any;
let d: any = 4;
d = 'hello';
d = true;


声明变量如果不指定类型,则ts解析器会自动判断变量的类型为any(隐式any)


let e;
e = 'hello'
e = 123

unknown


unknown 表示未知类型的值


let f : unknown
f  = 10
f = "hello"


unknown 实际上就是一个类型安全的any

unknown类型的变量,不能直接赋值给其他变量,如图所示:


dc1cf4cca13042368712f1eb8aded044.png


在这里我们定义一个string类型的变量,没有赋值,随后定义了f,我们直接将f赋值给s,直接会报错,这就是因为unknown类型的变量,不能直接赋值给其他变量

我们需要给f指定类型,这样的话才不会报错,实例代码如下:


if (typeof f === 'string') {
    s = f
}


但是在我们的实际书写代码的时候,编译器一旦遇到unknown类型的变量时便无法解析,我们一直if判断未免不会感到麻烦,这就引入了一个名词类型断言


类型断言


定义 :用来告诉解析器变量的实际类型


语法: 变量 as 类型 或 <类型>变量


s = f as string
s = <string>f

void


在我们书写函数的时候都知道函数都可以去返回值的,在书写函数的时候:void用来表示空,以函数为例,就表示没有返回值的函数




function fn() : void {
}
//es6箭头函数
const fn1 = () :void =>{
}


never


never表示永远不会返回结果(undefined都不会返回),在我们学习js的时候都学过抛出异常这个函数,这个函数什么都不返回,就是提示报错。




function fn2() : never {
    throw new Error('报错了')
}


在书写代码时,当我们需要报错的时候只要一调用这个函数,就会报错,这就体现了ts的严谨性!


小结


通过ts基本类型的上篇学习,就可以感受到ts书写代码的严谨性,ts在运用到大型项目中非常的实用,在维护的过程中非常的便利,通过学习基本类型就可以感觉到ts比js更加的细节!


相关文章
|
3月前
|
JavaScript 前端开发
TypeScript(二)基本类型和特殊类型
TypeScript(二)基本类型和特殊类型
26 0
|
5月前
|
JavaScript
【TypeScript学习】—基本类型(二)
【TypeScript学习】—基本类型(二)
【TypeScript学习】—基本类型(二)
|
5月前
|
JavaScript 前端开发 开发者
TypeScript基础(一)基本类型与类型运算
TypeScript是一种开源的编程语言,它是JavaScript的超集,意味着所有的JavaScript代码都可以在TypeScript中运行。TypeScript添加了静态类型检查和其他一些新特性,以提高代码的可读性、可维护性和可扩展性。
57 0
|
11月前
|
JavaScript
TypeScript基本类型和引用类型实例
TypeScript基本类型和引用类型实例
|
JavaScript 安全 前端开发
TypeScript基本类型详解
TypeScript基本类型详解
236 0
|
存储 JavaScript 前端开发
[TypeScript]简介、开发环境搭建、基本类型
说到TypeScript我们不得不提到JavaScript,JS是由网景公司发明的一款弱类型动态脚本语言。说到弱类型,我们也就知道它非常的灵活,但是这个灵活是一把双刃剑。这就导致有些错误可能在编译时发现不了,直到运行的时候才会报错。这非常不利于我们后期的维护,而现在很多企业的大型项目转而去使用TypeScript来解决这个问题。产生背景TypeScript起源于使用JavaScript开发的大型项目。由于JavaScript语言本身的局限性,难以胜任和维护大型项目开发。。...
[TypeScript]简介、开发环境搭建、基本类型
|
自然语言处理 JavaScript
Typescript基本类型---下篇
Typescript基本类型---下篇
Typescript基本类型---下篇
|
JavaScript 前端开发 C#
|
JavaScript 前端开发 C#
下一篇
无影云桌面