ts是js 的超集为js添加了类型系统，开发体验更好，减少类型错误。
安装typescript,ts-node
npm install -g typescript
npm install -g @types/node tslib
声明变量
let age : numbner = 18;
// :number 是用来指定变量age为数值类型：类型注解
数据类型
基本数据类型
//number/string/boolean/undefined/null
//number
//整数小数都是number
let age: number = 18;
//正数负数也是number
let age: number = (+/-)18;
//string
let food: string = '面';
//boolean
let isshow: boolean = true;
//undefined
let n: undefined = undefined; //类型注解为本身
//null
let n: null = null;
复杂数据类型
运算符
赋值运算符
// =
// 将等号右边的值运算之后赋值给左边
// += -= *= /=
算数运算符
// + - * /
// + 运算符的作用，拼接字符串
// - 除加号以外其他运算符左右两侧必须是数值类型
console.log( 2 - '1') //不能正常执行，必须是数值number类型
// ts里面使用 2- (+'1'),转换数据类型，+放在字符串前面表示转换为正数
// 自增自减 ++ --
比较运算符
// 比较两个值返回boolean
// < > >= <= === !==
逻辑运算符
// 与：&& 或：|| 非：！ 结果返回boolean
语句
条件语句
// if 语句
// else 语句
// 三元运算 判断条件 ? 真 : 假
循环语句
// for循环
for( let i: number; i< 3; i++ ){
// 循环体
}
断点调试配置： 在当前运行目录下按照 ts-node typescript
// launch.json
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "ts 调试",
"program": "${workspaceRoot}/index.ts",
"outFiles": [
"${workspaceRoot}/dist/*.js"
],
// 这句话很重要，调试的时候运行ts代码
"runtimeArgs": [
"--nolazy",
"-r",
"ts-node/register"
],
"args":[],//要调试的文件
"cwd": "${workspaceRoot}",
"sourceMaps": true,
"console": "integratedTerminal"
},
// {
// "type": "node",
// "request": "attach",
// "name": "Attach to Process",
// "port": 5858,
// "outFiles": [],
// "sourceMaps": true
// }
]
}
调试技巧
// break
for( let i: number; i< 3; i++ ){
// 循环体
if(i===3){
// 停止执行
break;
}
}
// continue
for( let i: number; i< 3; i++ ){
// 循环体
if(i===3){
// 跳过本次循环继续下次循环
continue;
}
}
数组
//字符串数组
let names: string[] = []
let ages: number[] = new Array(1,2,3,4)
数组对象
数组对象-some
//查找是否有一个满足条件的元素
let nums:number[] = [1,2,3,8,69]
nums.some((n)=>{
console.log(n)
if(n>7){
return true
}
return false
})
函数的使用
//参数定义; 如下参数必须是字符串数组
const getName = (names:string[]){
// 函数体
}
//如果函数没有返回值定义类型为：void(可省略不写)
const toSolo = (name:string,age:number):void =>{
console.log('')
}
//如果函数需要返回数值 则如表示
const toSolo = (name:string,age:number):number =>{
console.log('')
}
// 栗子：
const age = (name:string,age:number):number =>{
return age;
}
const toSolo:number = age('lisi',14)
对象
// TS中的对象是结构化的，结构简单来说就是对象有什么属性方法
// 对象的类型注解就是建立一种约束，约束对象的结构。
//类型注解
let person: {
name:string,
age:number
}
// 创建对象
person = {
name:"lisi",
age:18
}
// 对象的方法的类型注解
let person:{
sayHi: ()=>void,
sayHii: (name: string)=> void,
sayHiii: (sum:number)=> number
}
//直接卸载对象名称后面的类型注解不简洁、无法复用类型注解
interface Person {
name:string
age:number
}
let p1: Person = {
name:"lisi",
age:18
}
// 推荐使用接口来作为对象的类型注解
// 内置对象
TS 中的类型推论
在ts 中某些没有明确指出类型的地方，类型推论会帮助提供类型 换句话说由于类型推论的存在,有些地方的注解可以省略不写 发生类型推论的常见场景：
- 声明变量并初始化的时候
- 决定函数返回值的时候
// 不进行类型注解，直接进行变量赋值，会进行类型推论
let age = 18;//number
let age; //any(任意类型)
age =18
let age: number;
age = 18;
浏览器中运行ts
浏览器中只能运行js无法直接运行ts，因此需要将ts转化为js然后运行 使用
//推荐live server监听html
//tsc --watch 自动调用tsc 将ts->js
tsc --watch *.ts
类型断言
手动指定更加具体的类型。
使用场景：当你比ts更了解某个值的类型，并且需要指定更加具体类型的时候
let image = document.getElementId('#image')
// 如果我想直接给image赋值src 会报错
// 技巧 console.dir(image)可以拿到详细类型HTMLImageElement
// 需要使用类型断言
let image = document.getElementId('#image') as HTMLImageElement
// 这样就可以直接进行赋值了而不会报错了
要注意函数声明时候参数的类型注解
let btn = document.getElementById('#btn') as HTMLButtonElement
// 使用事件参数时候要指定类型注解，否组访问对象属性时候 没有任何提示
const btnClick = (e: MouseEvent) =>{
console.log('点击'+e)
}
btn.addEventListener('click',btnClick)
// 直接时候匿名函数时候不需要声明
btn.addEventListener('click',function(e){
//技巧：鼠标悬浮e的时候会显示类型注解
})
