TypeScript实例_手动编译与自动编译类型注解接口和类的详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TypeScript实例_手动编译与自动编译类型注解接口和类的详解相关的知识，希望对你有一定的参考价值。
一.认识TypeScript
TypeScript 是一种由微软开发的开源、跨平台的编程语言。它是 javascript 的超集，最终会被编译为 JavaScript 代码。 2012 年 10 月，微软发布了首个公开版本的 TypeScript，2013 年 6 月 19 日，在经历了一个预览版之后微软正式发布了正式版 TypeScript TypeScript 的作者是安德斯·海尔斯伯格，C＃的首席架构师。它是开源和跨平台的编程语言。 TypeScript 扩展了 JavaScript 的语法，所以任何现有的 JavaScript 程序可以运行在 TypeScript 环境中。 TypeScript 是为大型应用的开发而设计，并且可以编译为 JavaScript。 TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6＋的支持＊＊，它由 Microsoft 开发，代码开源于 GitHub 上。
1.1 TypeScript特点
TypeScript 主要有 3 大特点：
- 始于 JavaScript， 归于 JavaScript TypeScript 可以编译出纯净、简洁的 JavaScript 代码， 并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本） 的 JavaScript 引擎中。
- 强大的类型系统 类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。
- 先进的 JavaScript TypeScript 提供最新的和不断发展的 Java Scipt 特性， 包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性， 比如异步功能和 Decorators， 以帮助建立健壮的组件。
1.2 安装TypeScript
安装typescript非常简单，只需要在cmd命令窗口敲下以下命令：(前提，本地已安装node.js)
npm install -g typescript
使用命令，检测是否成功安装：(安装成功)
tsc -V
1.3 TS代码实例（手动编译代码）
新建一个01_tsDemo.ts文件：
(() =>
function hello1(str)
return "你好" + str
let text = "上进小菜猪"
console.log(hello1(text))
)()
在命令终端执行
tsc ./01_tsDemo.ts
执行完毕后会生成一个js代码：
新建一个html代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./01_tsDemo.js" ></script>
</body>
</html>
执行查看效果：
1.3.1 总结
- ts 的文件中如果直接书写 js 语法的代码，那么在 html 文件中直接引入 ts 文件，在谷歌的浏览器中是可以直接使用的
- 如果 ts 文件中有了 ts 的语法代码，那么就需要把这个 ts 文件编译成 js 文件，在 htm1 文件中引入 js 的文件来使用
- ts 文件中的函数中的形参，如果使用了某个类型进行修饰，那么最终在编译的 js 文件中是没有这个类型的
- ts 文件中的变量使用的是 1et 进行修饰，编译的 js 文件中的修饰符就变成了 var 了
1.4 TS自动编译代码
- 新建一个文件夹：TS自动编译
- 进入文件夹的终端，输入：
tsc --init
修改生成的json:
"outDir": "./js",
作用：把 ts 文件最终编译后放在 js 的目录中。
"strict": false,
作用：不使用严格模式。
保存之后，按照下面步骤：
在ts里写下下面代码：
(()=>
function hello(str)
return "hello"+str
let text = "上进小菜猪"
console.log(hello(text))
)()
点击保存，会在js里自动编译为js文件。在html里引入js后查看效果无误。
1.5 类型注解
类型注解：是一种轻量级的为函数或者变量添加的约束
智能的提示信息：
(()=>
function hello(str:string)
return "hello"+str
// let text = "上进小菜猪"
let text =[10,20,30]
console.log(hello(text))
)()
类似地，尝试除 greeter i调用的所有参数。下 ypeScript 会告诉你使用了非期望个数的参数调用了这函数。在这两种情况中，TypeScript 提供了静态的代码分析，它可以分析代码结构和提供的类型注解。要注意的是尽管有错误，greeter。js 文件还是被创建了。就算你的代码里有错误，你仍然可以使用 TypeScript。但在这种情况下，TypeScript 会警告你代码可能不会按预期执行。
1.6 接口的演示
interface：
interface是面向对象编程语言中接口操作的关键字，功能是把所需成员组合起来，用来封装一定功能的集合。 它好比一个模板，在其中定义了对象必须实现的成员，通过类或结构来实现它。
接口演示TS文件：
(()=>
interface IPerson
fristName:String
lastName:string
function showPullName(person:IPerson)
return person.fristName+ "_" +person.lastName
const person =
fristName: "我是",
lastName:"上进小菜猪"
console.log(showPullName(person))
)();
编译为的js文件如下：(对比查看)
(() =>
function showPullName(person)
return person.fristName + "_" + person.lastName;
const person =
fristName: "我是",
lastName: "上进小菜猪"
;
console.log(showPullName(person));
)();
运行结果如下：
1.7 类的演示
TS类的演示依然使用上面的例子：
封装成员：
interface IPerson
fristName:String
lastName:string
定义类：
class Person
fristName:String
lastName:string
fullName:string
constructor (fristName:String,lastName:string)
this.fristName=fristName
this.lastName=lastName
this.fullName=this.fristName+"_"+this.lastName
构造器函数：
constructor (fristName:String,lastName:string)
this.fristName=fristName
this.lastName=lastName
this.fullName=this.fristName+"_"+this.lastName
定义函数：
function showname(person:IPerson)
return person.fristName+"_"+person.lastName
实例化对象：
const person = new Person("上进","小菜猪")
console.log(showname(person))
编译产生的JS代码如下：
(() =>
class Person
constructor(fristName, lastName)
this.fristName = fristName;
this.lastName = lastName;
this.fullName = this.fristName + "_" + this.lastName;
function showname(person)
return person.fristName + "_" + person.lastName;
const person = new Person("上进", "小菜猪");
console.log(showname(person));
)();
以上是关于TypeScript实例_手动编译与自动编译类型注解接口和类的详解的主要内容，如果未能解决你的问题，请参考以下文章