TS学习-1

TS简介

1. TypeScript由微软开发，是基于JavaScript的一个扩展语言。
2. TypeScript 包含了 JavaScript 的所有内容，即： TypeScript 是 JavaScript 的超集.
3. TypeScript 需要编译为 JavaScript ，然后交给浏览器或其他 JavaScript 运行环 境执⾏。
4. TS静态检查，不需要运行就可以检查。静态类型检查：在代码运⾏前进⾏检查，发现代码的错误或不合理之处，减⼩运⾏时出现异常的⼏率，此种检 查叫『静态类型检查』，TypeScript 和核⼼就是『静态类型检查』，简⾔之就是把运⾏时的 错误前置。
5. 同样的功能，TypeScript 的代码量要⼤于 JavaScript，但由于 TypeScript 的代码结构更加 清晰，在后期代码的维护中 TypeScript 却胜于 JavaScript。

编译TS

浏览器不能直接运⾏ TypeScript 代码，需要编译为 JavaScript再交由浏览器解析器执⾏。

命令行编译

要把 .ts ⽂件编译为.js ⽂件，需要配置 TypeScript的编译环境，步骤如下：

第一步：创建⼀个 .ts ⽂件，例如demo.ts

第二步：全局安装 TypeScript

 npm i typescript -g

第三步：使用命令编译.ts文件

 tsc demo.ts  

自动化编译

第一步：创建TypeScript编译控制文件

tsc --init

1. ⼯程中会⽣成⼀个 tsconfig.json 配置⽂件，其中包含着很多编译时的配置。
2. 观察发现，默认编译的JS 版本是 ES7 ，我们可以⼿动调整为其他版本

第二步：监视目录中的.ts文件变化，有变化生成对应的.js

 #监视工程中的所有ts文件变化
 tsc --watch  或 tsc -w
 #监视某个文件的变化
 tsc --watch index.ts

第三步：小优化，当编译出错时不生成.js文件

修改 tsconfig.json 中的 noEmitOnError 配置，启动该配置

备注：也可以手动启动

tsc --noEmitOnError --watch

Vue,react：使用官方的脚手架，不需要手动配置，直接可以写ts文件。

类型声明

使用: 来对变量或函数形参，进行类型声明

let a: string //变量a只能存储字符串,小写
let b: number //变量b只能存储数值
let c: boolean  //变量c只能存储布尔值

a = 'hello'
a = 100 //警告：不能将类型“number”分配给类型“string”

b = 666
b = '你好'//警告：不能将类型“string”分配给类型“number”

c = true
c = 666 //警告：不能将类型“number”分配给类型“boolean”

// 参数x必须是数字，参数y也必须是数字
function count(x:number,y:number){
    return x+y
}

// 参数x必须是数字，参数y也必须是数字,返回值类型也声明
function count(x:number,y:number):number{
    return x+y
}

//调用也严格
count(100,200) 
count(100,'200') //警告：类型“string”的参数不能赋给类型“number”的参数

在: 后也可以写字面量类型

let a: '你好' //a的值只能为字符串
let b: 100 //b的值只能为数字100

类型推断

TS 会根据我们的代码，进⾏类型推导，例如下⾯代码中的变量 d ，只能存储数字

let d = -99 //TypeScript会推断出变量d的类型是数字
d = false //警告：不能将类型“boolean”分配给类型“number

类型总览

JS类型

TS数据类型

let str1:string//Ts官方推荐的写法
str1='hello'
str1=new String('hello')//报错

let str2:String
str2='hello'
str2=new String('hello')

console.log(typeof str1)//string
console.log(typeof str2)//object

注意：string是基元，String是包装的对象

// 原始类型字符串
let str = 'hello'

// 当访问str.length时，JavaScript引擎做了以下⼯作：
let size = (function() {
    
     // 1. ⾃动装箱：创建⼀个临时的String对象包装原始字符串
    let tempStringObject = new String(str);
    
     // 2. 访问String对象的length属性
    let lengthValue = tempStringObject.length;
    return lengthValue;
 })();
 	// 3. 销毁临时对象，返回⻓度值
	// （JavaScript引擎⾃动处理对象销毁，开发者⽆感知）
console.log(size); // 输出: 5