TypeScript 快速上手学习系列 —— 类型注解

＊且听风吟

已于 2022-04-26 16:53:16 修改

阅读量2.9k

点赞数

分类专栏： # Typescript 文章标签：工具类网站 window技巧 javascript

于 2022-03-30 18:00:00 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/123275062

版权

Typescript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

类型注解

TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。

TypeScript 的类型注解是一种轻量级的为函数或变量添加约束的方式。

它是可选的，可以被忽略，从而使用 JavaScript 常规的动态类型。

实例

index.html 文件：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>typescript demo</title>
</head>
<body>
 	<script src="hello.js"></script>
</body>
</html>

创建一个 hello.ts文件（.ts 是 TypeScript 文件的后缀）：

function showInfo(name:string,grade:number,age:number){
	let desc =  "Hello, I am " + name +', my age is '+age+', my grade is '+grade;
	return desc;
}
console.log(showInfo('xiaoming',8,2))

对于基本类型的批注是 number，Boolean 和 string，弱或动态类型的结构是 any 类型。

类型批注可以被导出到一个单独的声明文件，以便让使用类型已被编译为 JavaScript 的 typescript 脚本的类型信息可用。批注可以为一个现有的 JavaScript库声明。

当类型没有给出时，typescript 编译器利用类型推断来推断类型。

如果由于缺乏声明，没有类型可以被推断出，那么就会被默认为是动态的 any 类型。

接下来，打开命令行，使用 tsc 命令编译 hello.ts 文件：

$ tsc hello.ts

在相同目录下就会生成一个 hello.js 文件，此时项目结构：

  typescript-demo
  |- /src
    |- hello.js
    |- hello.ts

然后，打开 index.html：
在这里插入图片描述

传入参数类型错误

修改 hello.ts文件：

function showInfo(name:string,grade:number,age:number){
	let desc =  "Hello, I am " + name +', my age is '+age+', my grade is '+grade;
	return desc;
}
console.log(showInfo('xiaoming',8,2))
let arr = [0, 1, 2]
console.log(showInfo(arr,8,2))

重新编译，可以看到，产生了一个错误：
在这里插入图片描述
尽管有错误，hello.js文件还是被创建了。打开 index.html，看到如下打印信息：

使用非期望个数的参数

修改 hello.ts文件：

function showInfo(name:string,grade:number,age:number){
	let desc =  "Hello, I am " + name +', my age is '+age+', my grade is '+grade;
	return desc;
}
console.log(showInfo('xiaoming',8,2))

console.log(showInfo())